Youngble_개발스토리

어제, 오늘 SEO 관련해서 실질적으로 구글에 검색할때 어떻게 적용되는지 알고싶어서 조금 테스트를 해봤다. 깊게 공부한건 아니지만 meta, title, body에 내용에 따라 구글에서 어떻게 나오고 어떤 검색을 하면 뜨는지 궁금했다. 먼저 title을 Awesome Place 맛집추천 사이트라고 지정하였고 meta태그의 desciprtion의 content역시 같은 내용으로 썼다. title은 말그대로 그 사이트이름으로 들어갈거라고 생각했고 descrition 이 제목아래 본문내용에 나올까 기대했는데 그건? 아닌거 같기도하고 그냥 검색할때 알고리즘중하나의 색인? 으로 나오는거같고 위의 스크린샷처럼 index.html body 직접적으로 만든 태그는 아닌 리액트의 메인 페이지 component중에 해당 ..

객체를 복사할때 객체안에 직접적인 프로퍼티에 해당한다면 (1차복사, 얕은복사)값만 복사하여 복사한 객체의 프로퍼티값을 바꾸거나 원본객체의 프로퍼티값을 바꿔도 서로 같은것을 참조하지않기 때문에 서로 다른값의 프로퍼티가 된다. 하지만 객체 안의 프로퍼티가 또다른 객체를 가지고 있다면(2차 복사, 깊은복사) 이는 깊은 복사가 필요하다. 만약 깊은복사를 하지않는다면 원본객체에서 값을 바꾸면 복사된 객체에서도 값이 바뀌게 된다. 즉 불변객체를 만들어줘야한다. 이때 깊은 복사하는 방법은 몇가지 있다. 1. 재귀함수 var copyObject = function(target){ var result ={}; if(typeof target==='object'&& target!==null){ for(var prop in ..

앞으로 공부할 순서 코어자바스크립트 책 완독 알고리즘 - 1) udemy의 Javascript 알고리즘& 자료구조 마스터 클래스 강의 듣기 2) 프로그래머스 문제 풀기 2-2)백준 문제풀기 모던자바스크립트 책 완독 CS공부 Next.js (SSR, 서버사이드렌더링 방식으로 해보기) Vue/Angular 해보기 리액트 훅스 공식문서 보고 안해본거 해보기, useMemo, custom Hook 등 Storybook 백엔드 기초 해보기 node.js 및 DB관련 sql 작성법 등등 통신관련 socket http 완벽가이드:웹은 어떻게 동작하는가 책 완독 지긋지긋한 학점을 위한 학교를 제외하고 몰입한다고 생각할때 3개월잡고 하면 얼마나 할수있을까? 일단은 그동안 못했던 자바스크립트 제대로 공부하고 알고리즘/자료..

오늘하루 박종욱 CTO님과 대화와 식사, 훌륭하고 좋은 분이란걸 많이 느꼈다. 직접 찾아와주신거에 당황했고 감사했던 날이다. 부족한 나는 배울게 많고, 세상에 대해 알것도 많다. 근데 가장중요한건 기본.. 어렵다 기본 이렇게 개발블로그를 통해 기록을 남기는데 잊어버리는 나의 머리 에휴. 무엇을 위해 남기는가 일기인가, 출석도장? 내가 쓰고 정리되어 언제봐도 이해하고 까먹지 않았으면 좋겠고, 뭔가 퀄리티있는 내용이나 정리를 할려면 시간을 할애해야하는데..

오늘은 캡스톤 발표 및 수상하는날 고생하고 기대못하다 상받아서 기분좋다.

캡스톤디자인이 끝났다. 팀장으로써 그리고 프론트엔드 솔로로 다 만들기위해 다른 과목에 시간투자하지않고 완성하기위해 많은 시간을 투자했다. 역시나 코딩뿐만 아니라 신경쓸게 너무많았다. 보고서, 피피티, 영상, 스케쥴 조율, 디자인, 데이터 취합, 팀워크, 인간관계 이제 끝냈으니 취업에 몰두할시간이다. udemy 강의다시보고 내 페이스대로 가자!

위의 사진처럼 전역 window 브라우저상의 스크롤이 아닌 컴포넌트 일정 영역안의 스크롤을 생성할시 보통 window.scrollTo(0,0) 으로 사용하라는 글이 많지만 직접 적용해보면 전체 윈도우에서 스크롤이 생긴게아니라 해당 컴포넌트로 접근해서 스크롤위치를 조절해줘야한다. 따라서 getElementById를 사용하여 시작하는 스크롤 해당 컴포넌트에서 .scrollTo(0,0) 을 해주면된다. 이때 매번 이벤트를 감지하기위해 useLocation을 사용하고, useEffect의 2번째 인자로 해당 경로 path가 달라질때마다 실행하게 하는것이다. 자세한 코드는 아래와 같다. App.tsx> 참고사이트: react에서 scrollTo 메소드로 스크롤 이동이 안될 때 window.scrollTo(0, 0..

메인컨텐츠 랜덤 슬롯머신 구현화면 side effect : React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컫는다. → 랜덤게임 슬롯을 돌릴때 settimeout 을 사용하여 순서대로 0.8, 1.6, 2.4초에 false를 하기로결정했다. 초기에 useEffect에다가 쓰지않고 js 코드를 쓸수있는곳에 함수를 만들어 settimeout을 사용했는데 이때 문제는 동작하는데는 문제가 없지만 만약 시간이 다되어 끝나기전에 해당 컴포넌트를 닫아아버리면(unmount) 해당 settimout에서 state를 업데이트할때 닫혀진 컴포넌트 state 업데이트에 대한 에러가 발생하게된다. 초기한번만 발생하고 새로고침전까진 안뜨긴하지만 어쨋든 이러..

시험 종료 github actions 사용 CI/CD 구축완료 aws bucket의 access key, secret access key 만듬 github에서 settings-> secrets,actions에서 위의 key들을 암호화저장 actions-> new workflow->set up a workflow yourself push or pull request할 브랜치 설정, ci/cd 관련 install, build, deploy 설정(deploy에서 위의 keys를 사용하여 배포위치설정) http 이해를 위한 책 리딩 'HTTP가이드:웹은 어떻게 동작하는가' HTTP: 웹 프로토콜 통신 규약, 인터넷에서 데이터를 주고받을 수 있는 프로토콜 URI: URL, URN으로 나뉨 보통 URL과 URI를 ..

portal은 부모 컴포넌트의 DOM 계층 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법 컴포넌트의 HTML 컨텐츠를 다른 곳에 옮길때 사용 이런식으로 jsx코드 노드가 여러가지 있다고 치면 createPortal을 사용하여, 원하는 html 위치에서 렌더링 되게 할수있다. 이를위해 index.html 에서 id 가 “root”과 같은 위치에서 랜더링하고싶다면 옆에 식으로 만들어주고 해당 컴포넌트 js에서 import '원하는이름' from ‘react-dom’ 해주고 js작성 구역에 아래와같이 해당 div 컴포넌트를 Backdrop 컴포넌트 함수안에 return으로 담아주고 return 부분에서 원하는 위치에서 ReactDom.createPortal(, document.getElementBy..