[넥스트 Next.js] 설치 명령어, 코드스플리팅 (Code Splitting)

Next.js

• 버셀에서 만든 React 프레임워크 
• 정적사이트 생성과 같은 기능을 제공하여 SPA(Single Page Application)를 쉽게 구축할 수 있도록 한다
• 동적 라우팅, 데이터 미리 가져오기, 코드 분할, 이미지 최적화 등을 지원한다
• TypeScript를 포함한 다양한 언어와 함께 사용할 수 있다

 

CRA 설치 명령어

npm	yarn
npx create-react-app [프로젝트명]	yarn create next-app [프로젝트명]

 

패키지 설치 명령어

npm	yarn
npm install next react react-dom	yarn add next react react-dom

 

프레임워크
애플리케이션 개발을 위해 구조와, 규칙 등을 제공하는 도구모음(ex. ppt)
코드의 흐름을 제어하는 것이 원래 개발자의 몫이었지만, 제어의 역전을 통해
정해진 규칙대로 코드를 작성하면 프레임워크가 알아서 제어의 흐름을 가져가 애플리케이션의 흐름에 맞게 구조를 맞춰준다
ex. Angular, React, Vue.js, Django, Spring 등

라이브러리
특정 기능을 수행하기 위한 코드(모듈)의 모음
ex. jQuery, Axios, Lodash 등

제어의 역전
규칙대로 작성된 코드를 호출하게 되면 필요 시점에 실행하여 전체적인 흐름을 제어하는 것

---

Code Splitting (코드 스플리팅)

• JavaScript 파일을 작은 청크(chunk)로 분할하여 사용자가 필요로 하는 페이지나 기능에 따라 필요한 파일만 로드하는 것
• 페이지나 기능에 따라 로딩 시간을 다르게 해 성능을 최적화하며, 애플리케이션의 전반적인 로딩 시간을 줄일 수 있다

TTV (Time to View )
웹 페이지 실행 시 HTML 등의 정적 콘텐츠가 화면에 나타나기까지 걸리는 시간

하이드레이션
정적콘텐츠 렌더링 후 동적콘텐츠를 렌더링 하여 정적 콘텐츠에 입히는 것

TTI (Time to Interactive )
동적 콘텐츠 또는 페이지가 렌더링 되어 사용자가 이벤트 등을 사용할 수 있는 시간(버튼 클릭, 폼 작성 등) 

정리
사용자가 웹 접속 시,
TTV 이후 글, 이미지 등을 볼 수 있고
하이드레이션을 통해 정적페이지에 동적 기술을 렌더링 하여 입힌다
TTI 이후 클릭 이벤트 등을 사용할 수 있다(알림 창, 버튼 등)