package.txt

// 1번 터미널에서
npm install --save react react-dom

// 2번 터미널에서
npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-dev-server

// 3번 루트에 webpack.config.js 파일을 만들고 아래 내용 삽입
module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },
    devServer: {
        inline: true,
        port: 8080,
        contentBase: __dirname + '/public/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

// 4번 webpack devserver 가 실행 될 수 있도록 package.json 파일을 수정
"scripts": {
  "start": "webpack-dev-server --hot --host 0.0.0.0"
},

// 5번 webpack-dev-server 구동 터미널에서 npm start

// 6번 크롬에서 http://localhost:8080/ 입력

// 7번 css 사용을 하려면
npm install --save-dev style-loader css-loader

// 8번 맵 사용을 위한
npm install --save react-gmaps
https://www.npmjs.com/package/react-gmaps

// 9번 express 및 data parser 를 위한 설치
npm install --save express body-parser

// 10번 react-hot-loader 설치
npm install --save-dev react-hot-loader

// 11번 babel-cli 설정
.babelrc 파일을 만들고 아래 내용 작성
{
  "presets" : ["es2015"]
}

// 12번 서버사이드 코드 컴파일 하기
babel server --out-dir build

// 13번 코드 컴파일 후 브라우저에서 localhost:3000 확인

// 14번 webpack 실행하면 코드 컴파일 후 합쳐점

// 기타
JSX
Flex Layout
Inline Style
React Hot Loader