react 환경설정

 $ npm install -g npm

다른 패키지를 설치하기 전에 npm을 최신버전으로 업데이트 한다.

필요한 package 설치

 1. babel

: babel은 transpiler 중 하나로,  ES6를 ES5 문법으로 변환하여 대부분의 자바스크립트 엔진에서 사용할 수 있도록 만들어 준다.

웹 브라우저마다 ES6의 지원 여부가 다르기 때문에 동작가능한 Javascript 코드로 변환해주는 이 작업이 필요하다. 

2. webpack

: import된 모듈을 하나의 파일로 묶어주는 module bundler의 역할을 하는 도구다. 

$ npm install -g babel webpack

 babel 사용해보기

$ babel [input file]

ES6로 작성한 [input file]을 변환하여 출력한다.

$ babel [input file] --out-file [output file] --watch

--out-file : 출력내용을 파일로 저장한다. 

--watch : [input file] 변경시 자동으로 인식하여 transpile 작업이 이루어진다.

$ babel-node
> var hello = () => console.log('hello');
undefined
> hello()
hello

스크립트 언어의 interpreter shell과 같은 기능으로 ES6 문법을 테스트하는데 사용할 수 있다.

 의존성 관리 및 플러그인 설치

1. 의존성 관리를 위한 package.json 파일 생성

$ npm init

2. babel에서 사용될 플러그인 설치. --save-dev 옵셥을 붙여 개발환경에서만 사용하도록 한다.

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

webpack 설정 (webpack.config.js)

    entry:'./src/main/webapp/resources/javascripts/app/react/invitation/index.js',
    output: {
        path: __dirname + '/src/main/webapp/resources/javascripts/app/react/public/',
        filename: 'bundle.js'
    },
    devServer: {               // 개발환경에서 사용할 서버설정
        hot: true,
        inline: true,
        host: 'localhost',
        port: 4000,
        contentBase: __dirname + '/src/main/webapp/resources/javascripts/app/react/public/'
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[local]'
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}; 

webpack의 역할은, entry인 index.js에서 시작하여 import된 모듈들을 다 불러온 후, 하나의 파일로 합쳐bundle.js 에 저장합니다.

추가적으로는, babel loader 모듈을 통하여 ES6 문법으로 작성된 코드를 ES5 형태로 변환도 해줍니다.

loader 모듈은 babel 외에도 css-loader, handlebars-loader 등 여러가지가 있으니 필요에 따라 검색하여 사용할 수 있다.

webpack이 지원하는 로더는 webpack 문서의 'List of loaders'에서 확인할 수 있다.

babel loader 모듈에서 preset 이란 개념도 중요하다.

transpile을 하기 위해서는 여러 플러그인이 필요한데, 이 플러그인들을 모아 설정해논 것이 preset이다.

'preset document'를 보면 es2015, react 등 해당하는 preset에 포함된 플러그인들을 볼 수 있을 것이다.

$ webpack --watch &

webpack.conf.js에 정의된 설정대로 bundle.js 파일이 생긴다.

번들된 파일은 사용될 html파일에 추가해주면 된다.

참고자료

react 환경구성에 대한 전반적인 설명 - velopert 님

Babel 사용법 - Haruair 님

Babel plugin 및 preset 설명 - outsider 님

webpack 개념 및 사용법

webpack Doc