본격적으로 개발하기에 앞서, 개발 환경을 세팅해보도록하자. 빠른 진행을 위해 create-react-app을 사용하여 프로젝트를 생성할 것이다. 빌드나 CI 환경에 대해서는 간단하게만 짚고 넘어가겠다.

1. Node.js 설치하기

이곳에서 현재 LTS 버전을 다운받아 설치한다. Node.js를 설치해야 NPM(Node package manager)를 통해 각종 패키지를 이용할 수 있다. 다운로드가 완료되면 터미널에서 다음과 같은 명령어를 사용하여 설치가 정상적으로 완료되었는지 확인한다.

    
    node -v
    
    v8.9.4

2. create-react-app 설치하기

create-react-app는 facebook에서 제공하는 React프로젝트 제너레이터 도구이다. 자세한 내용은 여기를 참고하자. 설치는 NPM을 통해 설치할 수 있다.

    npm install -g create-react-app

3. 프로젝트 생성 및 실행

create-react-app의 설치가 완료되면, 간단한 명령어로 React 프로젝트를 생성할 수 있다. 아래와 같이 프로젝트를 생성하고자 하는 위치에서 명령어를 실행하자.

    create-react-app  [project name]

프로젝트의 생성이 완료되면 설치 위치로 이동하여 다음과 같은 명령어를 실행한다.

    cd [project name]
    npm start

가상 웹서버가 실행되면서 localhost:3000으로 프로젝트가 실행된다.

4. 디렉토리 구조 살펴보기

설치한 React 프로젝트는 다음과 같은 구조이다.

    root
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── .gitignore
    ├── public
    │   └── favicon.ico
    │   └── index.html
    │   └── manifest.json
    └── src
        └── App.css
        └── App.js
        └── App.test.js
        └── index.css
        └── index.js
        └── logo.svg
        └── registerServiceWorker.js

• node-modules: 이 프로젝트에서 필요한 모듈들이 위치한다. 이 모듈들은 package.json에 의해 관리된다.
• public: 앱의 시작점인 index.html이 존재한다. webpack이 관여하지 않는 리소스를 사용하고 싶을 때 이 디렉터리에 위치하도록한다. 자세한 내용은 여기를 참고하도록한다.
• src: 실제 개발하게 될 위치이다. 이곳의 파일들은 webpack에 의해 관리되어진다.

. . .

여기까지 create-react-app을 이용하여 기초 프로젝트를 생성하였다. 다음 포스팅부터는 본격적으로 React를 활용하여 개발할 수 있는 튜토리얼을 구성하도록하겠다. 이 포스팅은 아래의 링크를 참고하여 작성하였다.

• React 공식 사이트
• 웹 Frameworks
• VELOPERT.LOG
• create-react-app