[ReactJS] 개발환경 설정, 프로젝트 진행

1. 작업환경 설정하기

1) GIT : 버전관리 시스템

2) NPM / NODE

- Node.js는 자바스크립트를 서버환경에서 실행하는 자바스크립트 런타임이다. 

- NPM은 Node.js로 만들어진 모듈들을 설치 및 버전관리 할 수 있는 프로그램이다.

- Node.js를 설치하면 NPM도 함께 설치된다.

3) MONGODB

4) EDITOR

2. React Project 만들기

1) Global Dependency 설치

$npm install -g webpack webpack-dev-server

2) webpack : 브라우저 위에서 import를 할 수 있게 해주고 자바스크립트 파일을 하나로 합쳐준다.

3) webpack-dev-server : 별도의 서버를 구축하지 않고도 static 파일을 다루는 웹서버를 열 수 있으며 hot-loader를 통하여 코드가 수정될 때마다 자동으로 리로드 되게 할 수 있다.

4) 프로젝트 생성

$mkdir react-fundamentals
$cd react-fundamentals
$npm init

- package.json 이라는 파일이 생성된다. 이 파일은 프로젝트의 정보를 담고 있다.

5) Dependency 및 Plugin 설치 (프로젝트에 필요한 의존모듈 설치)

- React 설치

$npm install --save react react-dom

- 개발 의존 모듈 설치

$npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
$npm install --save-dev react-hot-loader webpack webpack-dev-server

- Webpack 설정 (webpack.config.js 파일)

var webpack = require('webpack');
 
module.exports = {
    entry: ['react-hot-loader/patch', './src/index.js'] ,
 
    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },
 
    devServer: {
        hot: true,
        inline: true,
        host: '0.0.0.0',
        port: 4000,
        contentBase: __dirname + '/public/',
    },
 
    module:{
        loaders: [
            {
                test: /.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react'],
                    plugins: ["react-hot-loader/babel"]
                }
            }
        ]
    },
 
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

- (줄 1) webpack을 불러오는 것이다. npm으로 설치된 것들을 require로 불러올 수 있는 것이다.

- (줄 3) module.exports : 이 객체를 module로 내보내겠다는 의미이다. 즉 다른 코드에서 이 객체를 require해서 불러올 수 있다.

- (줄 4) entry에 있는 파일에서부터 require한 파일들을 불러오고 그 파일에서 require한 파일들을 불러오고 이런식으로 재귀적으로 필요한 것들을 다 불러온다.

- (줄 6~9) 합친 파일들을 public 폴더에 bundle.js라는 파일로 저장하겠다는 의미이다.

- (줄 11~17) 개발서버의 설정을 의미한다.

- (줄 12) hot : 파일이 수정될 때마다 reloading을 한다는 의미이다.

- (줄 13) inline : hot reloading에서 필요한 webpack dev server의 client를 bundler에 같이 넣어주는 것

- (줄 14) host : 서버를 리슨할 주소. 기본값은 로컬호스트. 로컬호스트는 외부에서 접속이 안되기 때문에 0.0.0.0으로 설정해주자.

- (줄 15) port : 개발 서버의 포트

- (줄 16) contentBase : 인덱스 파일의 위치

- (줄 19~32) loader를 통하여 es6와 react를 일반 자바스크립트 형식으로 변환해준다.

- (줄 34~36) 자동으로 reloading해주는 hotmodulereload도 plugin을 통해서 하는 것이다.

3. 개발 서버 실행 스크립트

1) package.json 파일 수정

  "scripts": {
    "dev-server": "webpack-dev-server"
  }

2) 서버 실행

$npm run dev-server

3) 브라우저에서 localhost:4000 접속