[react] 리액트 프로젝트를 쉽게 만들어주는 C - R - A

C-R-A 란 create-react-app node module 의 약자로 리액트 프로젝트를 쉽게 만들 수 있게 필요한 모듈혹은 설정을 포함하는 보일러 플레이트이다.( C-R-A 가 없다면 우리는 바벨, eslint, 웹팩등을 직접 하나하나 설치하고 해당 파일을 일일히 설정 해주어야 할 것이다. )

 

또한 C-R-A 는 페이스북에서 직접 관리하고 있으니 꾸준히 업데이트되는 장점도 있다. 

 

C-R-A의 설치

먼저 노드가 global로 설치가 되지 않았다면 노드를 먼저 설치한다. https://nodejs.org/en/

 

다음 본인의 node 패키지 환경에 따라 터미널에 다음과 같이 작성 한다. 

 

 

npm을 사용하는 경우 

npm install -g create-react-app

 

yarn을 사용하는 경우

 

yarn add global create-react-app

 

 

실행 

C-R-A 의 설치가 완료되면 C-R-A를 통해 프로젝트를 생성한다. 

 

npm을 사용하는 경우

npx create-react-app my-app //my app자리는 프로젝트폴더로 폴더명 대신 .을 적으면 해당 경로에 설치되게 된다.

 

yarn을 사용하는 경우

 

C-R-A 가 ver2가 됨에 따라 명령어가 create-react-app 에서 create react-app으로 변경된 모양이다. 

yarn create react-app my-app

create-react-app을 실행하여 프로젝트에 필요한 것들을 다운 받는 모습

 

프로젝트구조 

 

C-R-A홈페이지에서 받은 프로젝트 폴더 내부구조

 

public 폴더에는 공용으로 사용하는 파일들이 있다.

 

src 폴더는 react 모듈들을 저장하는 곳으로 해당 웹팩은 index.js를 기준하여 번들링 하며 index.js는 public/index.html 파일의 root라는 div에 렌더하는 파일이다. 

 

개발서버실행 

package.json 파일을 들여다 보면 각종 스크립트 명령어가 있는 모습을 볼 수 있는데 사용하는 package manager에 따라 " yarn start" , "npm start" 와 같은 명령을 하면 개발 서버를 켜서 사용할 수 있다. 주소는 http://localhost:3000 이다.

 

 

3000포트에 개발서버를 실행 시킨 모습 

 

바벨이나 웹팩 설정 

바벨이나 웹팩의 기본 설정은 C-R-A가 알아서 해준다. 그러나 기본 설정이외에 좀더 커스텀하여 사용하고 싶은 경우 eject명령어를 사용하면 웹팩의 config 파일을 볼 수 있다. 

 

참조 

 

github C-R-A 문서

 

https://github.com/facebook/create-react-app

facebook/create-react-app