create-react-app

Create-react-app 이란?

React 작업 환경을 구축해 주면서 webpack / babel 등의 작업 환경을 별도로 구축하지 않아도 자동으로 구축해준다.

Dan Abramov (Redux 창시자) 님의 개발하신 내용인데요 

사용법에 대해서 간략히 알아보겠습니다.

우선 create-react-app 설치 이 전에 반드시 설치되어야 할 부분은 node.exe가 설치 되어야 합니다. 

아래 내용은 node cli에서 진행하기 때문입니다. 

노드 설치 :   https://nodejs.org/en/download/

(노드를 자신의 컴퓨터 OS에 맞게 설치하시고 기본 환경 구축 및 예제를 진행하고 다음 아래 내용을 진행해주시면 감사하겠습니다.)

설치  

npm install -g create-react-app

App 생성

create-react-app 생성할 프로젝트 이름 

create-react-app 도구를 통하여 react 프로젝트를 초기화 시키게 됩니다. 

다음에는 자동으로 스크립트를 통해서 dependency package들을 설치합니다. (webpack / babel / eslint 등..)

여기서 dependency package를 루트 프로젝트에 설치하는 것이 아니라 node_modules/react-scripts 디렉토리에 설치해야 합니다.

Package.json 

{
  "name": "프로젝트 이름",
  "version": "0.0.1",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.1.0"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  }
}

babel 이나 webpack 과 같은 패키지들은 node_modules/react-scripts에 있어서 package.json에 보이지 않습니다.

여기서 eject 부분만 집고 넘어가자면 , eject는 기본 설정에 추가적으로 기능을 더하려 할 때 사용하는 모듈로 이를 활용해서

설정을 별도로 수정하여 작업할 수 있습니다.

자동으로 hot-reload가 적용되어 있기 때문에 npm start 명령어를 이용하여 개발 서버를 구동할 수 있습니다. 

hot-reload 때문에 또한 코드 수정 시 자동으로 적용되게 됩니다.  

이 후에는 뷰레이어 바인딩 역할을 하는 redux와 react-redux 패키지를 설치하여 컴포넌트에서 redux에 연결을 쉽게하도록 진행해줍니다.

지금 까지 작업 환경 맞추기를 진행하였으며 (by create-react-app) 다음 포스팅에서는 직접 코딩을 통해서 기본 서버 구조를 만들어보도록 하겠습니다.