CRA & Next.js

서버를 만들기 위해 Back-end에서 사용하는 java script 개발환경이 node js이고 이러한 node js의 프레임워크가 express이다.

그에 비교하여 Front-end에서 웹앱을 만들기 위해 사용하는 java script 개발환경이 React이고 이 React의 프레임워크가 CRA와 Next.js이다.

 

React는 원래 java script밖에 인식을 하지 못한다. 하지만 페이지를 구성하기 위해선 css 또는 font 등 추가적으로 인식되어야 하는 파일들이 있다. 이때 React가 해당 파일들을 인식할 수 있도록 하기 위해서 loader라는 모듈 등을 설치하고 그에 대한 설정을 해주는 과정이 필요하다. 이러한 설정의 모음인 React의 configuration library가 있는데 그것이 Webpack과 barbel이다. 하지만 개발을 할 때 Webpack단부터 설정을 시작하는것은 굉장히 복잡하고 어려운 일이다.

 

그래서 사용하는것이 CRA와 Next.js이다. CRA와 Next.js는 React의 보일러 플레이트라고도 부를 수 있다. 보일러 플레이트란 신문사에서 활자를 찍기 위해 사용하던 강철판에서 유래된 말로, 프로그래밍 쪽에선 일종의 상용구 코드를 의미한다. 자주 사용하는 코드들을 모아 두고 최소한의 변경으로 활용하는 것이다. (프레임워크와 동일하게 생각할 수 있다.) CRA와 Next.js에는 기본적으로 웹앱을 만들 수 있는 React 설정이 완료되어 있다. 하지만 이러한 설정으로 상용 앱을 만들기에는 무리가 있기 때문에 상용화 버전 개발을 위해선 이러한 기본 설정을 해지하고 Webpack단을 customizing 하게 된다. 이렇게 기본 설정을 해지하는 것을 eject라고 한다.

---

1. CRA ( Creat React App )

CRA는 페이스북에서 출시한 리액트의 공식 프레임워크이다.

설치는 리액트 공식 홈페이지에서 참고 가능하다 : ko.reactjs.org/docs/create-a-new-react-app.html

npm install -g npx create-react-app //CRA 글로벌 설치
create-react-app 폴더명 //CRA 폴더 만들기
npm run dev //실행

 

2. Next.js

Next.js는 ZEIT사에서 출시한 CRA의 부족한 점을 보완한 프레임워크이다.

설치는 Next.js 공식 홈페이지에서 참고 가능하다 : nextjs.org/docs/getting-started

npm install -g npx create-next-app //Next.js 글로벌 설치
create-next-app 폴더명 //Next.js 폴더 만들기
npm run dev //실행