create-react-app으로 프로젝트 만들기

기존에 create-react-app 이  존재하기 전에는 ReactJS 프로젝트 만들기 위해서 webpack, babel 등을 Package Manager를 통해서 설치하고 설정해야 했음. 그러나  난 그전에 webpack, babel을 한적이 없으므로 잘 모르겠지만 이 과정이 복잡하고 번거롭다고 합니다.

create-react-app으로 ReactJS 프로젝트를 만들기  위해 세가지를 다운받아 설치해야 합니다.

1. VS Code(Visual Studio Code) 설치하기 => https://code.visualstudio.com 

Visual Studio Code - Code Editing. Redefined

2. Node.JS와 npm 설치하기 => https://nodejs.org/ko/ 

Node.js

3. create-react-app

ReaactJS 프로젝트를 생성하는  CLI(Command Line Interface)입니다.

$ npm install -g create-react-app

VS Code의 터미널 또는 커맨드  창에서 npm install -g create-react-app를 실행하여 설치합니다.

create-react-app 사용방법

create-react-app <project-directory>

위에 세가지를  모두 설치했으면 RejectJS 프로젝트를 만들준비가 끝났음.

이제 hello-react 프로젝트를 생성합니다.

create-react-app hello-react

hello-react 프로젝트 생성

생성된 프로젝트를 실행합니다.

PS C:\Users\SungKwonChoi> cd .\hello-react\
PS C:\Users\SungKwonChoi\hello-react> npm start

실행 결과 화면은 다음과 같습니다.

hello-react 초기 실행 화면

이제 프로젝트의 구조를 확인하기 위해 hello-react 프로젝트를 open합니다.  <Open Folder... 클릭>

hello-react 폴더를선택합니다.

hello-react 프로젝트의  폴더 구조 확인

node_modules : Package manager를 통해 설치된 모듈들이 모여 있는 디렉터리

public : ReactJS의 html 파일과 favicon 아이콘이 있는 디렉터리

src : 대부분의 코딩이 이루어질 디렉터리

package.json : Package manager를 통해 설치된 모듈과 스크립트 명령어 들을 담고 있는 JSON 파일

 

package.json

package.json 파일을 열어보면 아래와 같이 보이며 Dependencies는 설치된 모듈들을 나타내고, scripts는 스크립트 명령어를 나타냅니다.

script에서는 start와 build 두가지 정도 알아두면 됩니다. start는 ReactJS 프로젝트를 실행할 때 사용되며, npm start 명령어로 사용하면 됩니다.

build는 실제로 배포할 파일들을 build 디렉터리 밑에서 생성해 줍니다.

start 이외의 스크립트를  실행시켜야 할 경우 npm run script와 같이 run을 npm 뒤에 붙여야 합니다.

npm run build

npm runn build 명령어로 배포버전의 ReactJS 프로젝트를  얻을 수 있습니다.

ReactJS 프로젝트를 컴파일하여 번들러를  통해 하나의 CSS파일과JS파일로 묶어 줍니다.

npm run build 명령어가 실행되고 난 후의 프로젝트 구조는 다음과 같습니다.

 

요약하면 실제 ReactJS 서비스를배포할 경우 npm run build를 통해 생성한 build 디렉터리를 통째로 배포하면 됨.

Git 주소 :  https://github.com/sksmail/hello-react/tree/210907