Youngble_개발스토리

SEO 최적화는 어느정도 마무리가되어 서비스의 성능 최적화를 위하여 번들사이즈를 줄이기로 하였다. 먼저 찾아본결과 Nextjs build후에 번들의 사이즈를 알기위해서 bundle analyzer를 사용하여 사이즈를 체크하고 사용하지않는 코드와 import들을 Tree Shaking을 진행하면 된다고 하였다. 현재 Nextjs로 진행하고 있기 때문에 @next/bundle-analyzer 라이브러리를 사용하여 번들사이즈를 이미지화하여 볼수 있다. bundle-analyzer를 사용하여 보는 사이즈는 Stat size, Parsed size, Gzipped size 총 3개가 있다. Stat: 빌드된 그대로의 상태 사이즈 Parsed: 번들된 사이즈 Gzipped: 압축된 사이즈 Parsed를 줄이면 Gz..

한달 넘도록 블로그관리를 하지 못했어서 한달 회고록을 파트1 과 2로 나누어서 쓰려고한다. SEO 먼저 내가 담당했던 서비스의 마케팅부분에서 구글 SEO가 제대로 잡히지 않아 급하게 프로젝트를 다시 내부적으로 교체해야하는 상황이 왔었다. 어느정도 서비스가 잘이루어져서 구글 Ads와 페이스북을 통해 마케팅 광고를 시작했는데 예전에 최적화하지 못했던 SEO부분때문에 빠르게 최적화를 하지못한다면 많은 고객을 받지 못하는 상황이 되기 때문에 가능하면 빠르게 대안을 찾아야한다고 전달 받았었다. 모노레포 선택지를 몇가지 주었다. 모노레포 라는 개념으로 프로젝트를 만들어서 SEO에 필요한 페이지에 대해서 따로 라우팅을 잡아서 배포하는 부분이 첫번째 제안이었고 두번째는 Next.js로 필요한 페이지를 부분이관이 가능한..

Router Next.js의 Router는 file-system 기반 File-system? 파일을 만들면 해당 파일이름으로 라우터로 즉각적으로 인지하여 주소와 docking이 된다. pages/ src/pages/ 만약 src/pages 도 있고 pages/ 경로도 있다면 어느게 우선순위가 높고 어떤걸로 인지하는가? 만약 pages/ 가 있다면 이것을 우선순위로 인지하여 실행되고 아래 src/pages는 인지하지않는다. Nested routes pages/products/first-item.js => /product/first-item pages/settings/my/info.js => /settings/my/info 이때 경로 depth가 길어질수록, import 할때 상대경로의 …/../ 등 일정하..

Layouts 여러 page들의 공통 처리 하나의 공통된 layout을 쓰는 경우 Components/Layout.js 컴포넌트 하나를 pages/_app.js 에서 활용하면 됨 만약 여러개의 Layouts을 활용하고 싶은 경우 Components/SubLayout.js Page.getLayout에 getLayout 함수를 제공 Next.js에서 다른 url path로 이동하거나 새로고침시에 전역적으로 사용하는 header, navigator 같은 형식이나, 전체적으로 가져가고싶은 css 등을 설정할수 있게하는 기능이 있다. 이를 전체 한개의 layout으로 쓸 Layout이라는 컴포넌트와 그외에 추가적인 layout을 쓴다면 SubLayout을 만들어서 사용한다. 먼저 Layout.js 컴포넌트를 보면..

SSR : Server Side Render 서버가 그린다. 그린다: 데이터를 가져와서 그린다 서버가 그린다: 서버가 데이터를 가져와서 그린다. SSR을 담당하는 함수 - getServerSideProps 정해진 틀로 props에 원하는 값을 넘겨주면되는데 이때 time에 현재시간을 넣어주었다. 위와 같이 getServerSideProps를 선언하고 Home이라는 컴포넌트에서 {time}을 매개변수로 사용한다. 그리고 jsx return 문에서 해당 time을 출력해보면 아래와 같이 뜬다. 이 getServerSideProps와 페이지 Home 컴포넌트 어디서 작동하는지 알기위해 console.log를 써놨는데 클라이언트 브라우저에서는 아무 로그도 찍히지 않았다. 대신 terminal을 통해 server..

재귀란? 자신의 함수에서 자기자신을 호출하는 것 재귀함수를 사용하는 이유 모든 곳에서 재귀함수를 사용하고 있다. 예로 간략한 리스트는 다음과 같다. - JSON.parse - JSON.stringify - document.getEementById - DOM traversal algorithm(DOM 순회 알고리즘) - data structures - cleaner alternative to iteration DOM traversal algorithm(DOM 순회 알고리즘) DOM의 모든요소가 중첩된 트리 구조로 되어있기 때문에 만약 div 태그안에 div가 들어있고 이러한 중첩 계층이 100개나 될때 그것을 살펴보고자 할때 흔한 접근법 중 하나가 재귀적으로 코드를 작성하는 것이다. Data structu..