CRA

• 리액트에 필수인 바벨(Babel)과 웹팩(Webpack)을 복잡한 환경 설정 없이 사용이 바로 가능
• 바로 build해서 사용할 수 있어서 편리
• 프로젝트 새로 할 때마다 CRA 설치가 필요
  • Global로 설치할 경우 한 번만 설치해도 된다.

<aside> 💡 Babel ES6 이상의 코드를 ES5로 변환, JSX파일을 JS로 변환시켜주는 역할

</aside>

<aside> 💡 Webpack 여러 개로 컴포넌트로 분리되어 있는 JS를 하나로 묶어서(번들) 파일로 만드는 역할

</aside>

Next.js

• SSR을 쉽게 구현할 수 있도록 도와주는 프레임 워크
• react 자체적으로도 SSR을 구현할 수 있지만, 생각보다 복잡하기 때문에 만들어졌다.

특징

• 코드 스플리팅 자동화
• 간단한 클라이언트 사이드 라우팅 제공
• HTTP 서버(Express, Node.js)와 함께 사용 가능
• getInitialProps()
  • getInitialProps 함수를 통해 데이터를 가져올 수 있으며, 데이터를 미리 가져와서 한 번에 렌더링 가능
• Babel, Webpack 설정 커스터마이징 가능
• HMR(Hot Module Replacement)을 지원하는 웹팩 기반 환경