Creating React Project

이번에는 실제로 React의 Project를 만드는 방법에 대해 알아봅니다. 지금까지는 CDN을 사용했지만, 본격적으로 실제 현업에서 사용하는 Project를 함께 만들어봅시다.

1. Create React App

Create React App은 줄여서 CRA라 부르며, 해당 링크에서 확인하실 수 있습니다.

페이스북에서 제공하는 오픈소스로써 리액트 애플리케이션을 만드는 커맨드에 대해서 설명하는 사이트입니다.

1.1 create-react-app

실제로 터미널 명령어로 설치를 진행해보도록 하겠습니다. 참고로 npx는 npm 5.2.0 이상부터 함께 설치된 커맨드라인 명령어로 라이브러리를 현재 최신 버전의 라이브러리를 확인하고 실행해주는 명령어입니다.

$ npx create-react-app tic-tac-toe

1.2 npm start

$ npm start

해당 명령어는 개발 모드로 로컬에서 열 수 있도록 하는 CLI입니다.

1.3 npm run build

$ npm run build

이것은 우리가 작업한 소스코드를 컴파일을 진행하게 하는 명령어입니다. Project 폴더 바로 아래 build 라는 폴더가 만들어지고, 그 안에 Production 배포를 위한 파일들이 생성되게 됩니다.

$ npm install serve -g
$ serve -s build

위의 명령어는 serve라는 패키지를 전역으로 설치합니다. serve라는 명령어를 -s 옵션으로 build 폴더를 지정하여 실행합니다. -s 옵션은 어떤 라우팅으로 요청해도 index.html을 응답하도록 합니다.

1.4 npm test

$ npm test

create-react-app에서는 Jest를 기반으로 test code들을 작성할 수 있습니다. 그렇기 때문에 npm test를 통해 Jest로 test code가 실행이 되게 됩니다.

1.5 npm run eject

$ npm run eject

해당 명령어를 통해 create-react-app에서 코드를 작성하다가 더이상 이를 통해 관리받지 않겠다고 하는 명령어입니다. 이는 프로젝트 환경 설정을 커스터마이즈하기 위해 create-react-app에서 제공하지 않는 범위의 변경 사항을 eject하여 처리하려는 목적으로 사용하게 됩니다.

현업에서 대부분의 경우, CRA의 범위에서 해결하려고 하기 때문에 자주 사용되지는 않는 명령어라 할 수 있습니다.