Next.js
1.Next.js 작동 방식
Next.js는 애플리케이션을 구조화 하는 프레임워크와 개발 프로세스와 최종 애플리케이션을 더 빠르게 만드는 데 도움이 되는 최적화를 제공이제부터 다양한 단계에서 애플리케이션 코드에 어떤 일이 일어나는지 살펴볼 것임코드가 실행되는 환경 : 개발 vs 프로덕션 ( Dev
2.Next.js 렌더링 (공식문서)
React에서 작성하는 코드를 UI의 HTML 표현으로 변환할 때에 피할 수 없는 작업렌더링은 서버나 클라이언트에서 발생할 수 있고빌드시나 런타임 시 모든 요청에 대해서도 발생함Next를 활용하면 SSR, CSR, SSG의 세 가지 유형의 렌더링 방법을 사용할 수 있음
3.Next.js 렌더링 (스터디 정리)
SSG (스태틱 사이트 제네레이션) 이미 만들어진 html을 보내 주는 것 (음식이긴 한데, 편의점에서 처럼 만들어진 음식만을 먹는 것) Ex. 쇼핑몰 (요청 적음) SSR (서버 사이드 렌더링) 서버에서 요청에따라 동적으로 html을 만들어서 제공함 단, 클릭시
4.Next.js 시작 세팅
React로 완전한 웹 애플리케이션을 구축하려면 고려해야할 중요한 세부사항이 많이 있음 코드는 Webpack과 같은 번들러를 사용하여 번들링 되고 Babel 같은 컴파일러를 사용하여 변환 되어야함코드 분할과 같은 생산 최적화를 수행해야함성능 및 SEO (search
5.라우팅 & Link 설정
신기하게도 pages 디렉토리 아래에 JS 파일을 생성하니 경로가 URL 경로가 되었다. 그 경로로 접속하니 바로 그 페이지로 이동웹사이트에서 페이지를 연결할 땐 <a> 태그를 사용Next에서는 next/link 애플리케이션의 페이지를 연결할 수 있음리액트와 비슷
6.Assets, Metadata, CSS
Next는 빌트인으로 CSS와 Sass를 제공Static assets (이미지)와 title 태그처럼 페이지 메타 데이터를 처리하는 방법에 대해서도 설명할 예정Next에 정적 파일 (이미지 등)을 추가하는 방법각 페이지의 <head> 태그 안을 커스터마이징 하는
7.Pre-Redering & Data Fetching
기본적으로 Next는 모든 페이지를 Pre-Rendering함즉, Next는 클라이언트 측의 JS에서 모든 작업을 수행하는 것이 아닌 미리 각 페이지에 대한 HTML을 생성이렇게 하기 때문에 기업들의 SEO를 가져올 수 있음이렇게 생성되는 HTML들은 최소한의 JS만
8.Dynamic Routes
여태는 페이지의 콘텐츠가 외부 데이터에 의존을 하는 경우였기에 getStaticProps나 getServerSideProps를 활용 했다면이제는 각 페이지의 경로가 외부 데이터에 의존하는 경우를 배워Next에서 동적 URL을 활성화할 것
9._app과 _document
두 가지 중요한 기본페이지 \_app과 \_document타입스크립트이기에 js대신 ts, jsx대신 jsx를 사용함\_app은 서버로부터 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 함모든 컴포넌트에 공통적으로 적용할 속