Next.js

매일(월~금) 하루 하나씩 기술 관련 글 읽기 챌린지를 시작했다. 월 : 웹 퍼포먼스 개선을 위한 Lighthouse CI 도입기 웹 퍼포먼스 개선을 위한 Lighthouse CI 도입기 | DRAMA&COMPANY 안녕하세요. 리멤버의 웹 프론트엔드 개발을 하고 있는 한지섭입니다. 최근에는 직장인들의 고민해결을 위한 서비스인 ‘리멤버 커뮤니티’를 개발하고 있는데요, 이번 글에서는 사용자들이 blog.dramancompany.com 화 : What to look for in a code review (Google's Engineering Practices documentation) What to look for in a code review Google’s Engineering Practices docu..

이번 포스팅에서는 Next.js에서 지원하는 동적 라우트(Dynamic Route)에 대한 개념을 살펴보고 간단한 예제로 실습까지 해보는 시간을 가지려고 한다. 참고로 튜토리얼은 Next.js 공식 홈페이지에서 제공하는 자료 및 소스코드를 가지고 진행하였다. 예제는 간단한 블로그를 만드는 프로젝트이다. 블로그의 페이지 컨텐츠는 외부 데이터에 의존하는데, getStaticProps 함수를 통해서 데이터를 패치하고 렌더링한다. 이번에는 각각의 블로그 포스팅 페이지 경로가 외부 데이터에 의존하는 부분에 대해서 다뤄보려고 한다. Next.js에서는 경로를 바탕으로 정적으로 페이지를 생성할 수 있는 기능을 제공한다. 이 기능이 Next.js에서 동적 url을 가능하게 한다. 동적 라우트를 생성한다는 말은 만약에 ..

지난 포스팅에 이어서 Next.js 튜토리얼 글을 이어서 작성해 보고자 한다. 시작하기에 앞서 이제부터 타입스크립트를 사용할 계획이라 TS 설치를 먼저 진행한다. $ npm i typescript @types/react @types/node --save-dev // node_modules 폴더를 지우고 $ npm i $ npm run build & npm run dev 그러면 프로젝트 root 디렉토리 위치에 다음 파일들이 자동으로 생성이 될 것이다. next-env.d.ts tsconfig.json 그리고 기존의 어플리케이션도 jsx 파일을 tsx로 바꾸어 주면 정상적으로 실행이 된다. 오늘 해볼 작업들은 다음과 같다. Link를 통해 페이지를 이동 getStaticProps()를 통한 동적 데이터 추..

Next.js는 React에서 기존에 CSR(Client Side Rendering)의 특징에 더하여 SSR(Servers Side Rendering)을 혼합하여 운영환경에서 최적의 퍼포먼스를 낼 수 있게 도와주는 프레임워크이다. 2020년 11월 현재 버전 10.0.1이 나와있으며 다음과 같은 기능들을 지원한다. 페이지 기반 라우팅 (동적 라우팅) 데이터 패칭 빠른 성능을 위한 코드 스플리팅 CSS in JS 이미지 최적화 빠른 컴포넌트 재활성화 정적 파일 처리 타입스크립트 환경 변수 브라우저 지원 각각에 대한 자세한 사항들은 이후에 하나씩 알아보고자 한다. Next.js는 SPA에서 CSR이 가질 수 밖에 없는 한계들을 보완해 주는 도구이다. SSR과 CSR에 대한 포스팅 참고 CSR은 초기 로딩 속..