React JS, Babel, Webpack

React JS로 개발을 하다 보면, 웹 Front를 이루는 많은 component들이 각각의 목적에 맞게 나눠져 있을 때가 많다. 그리고 각 Component들이 서로 별개의 library를 사용하는 경우도 있지만, 공통적으로 사용하는 library들도 정말 많다. 이러한 JS 파일들을 파편화 상태 그대로 서비스 하는 것이 아니라, 하나로 뭉쳐서 그리고 의존성 체크까지 다 한 상태의 하나의 파일로 만들어 서비스를 하고 싶다는 생각에 찾아보게 되었고, webpack이란 걸 알게 되었다.

또한, React JS는 JSX라는 Javascript에서 사용하는 Markup Code를 사용하는데, 이를 바로 rendering하여 사용자에게 보여줄 수 없다. 이 때 사용하는 것이 Babel, Babel Loader이다.

이 글에서는 이러한 webpack과 babel 그리고 이 둘을 이용해 React JS를 컴파일해서 사용해보는 내용을 간단하게 작성해보려 한다.

Webpack 정말 좋더라…

---

Webpack?

Webpack은 Module Bundler 중 하나이다.
문서를 보면 Webpack의 목표에 대해 나와 있는데 이를 설명해 보자면,

• 의존성 트리를 로드가 필요할 때 chunk 단위로 나눈다(Split the depeendency tree into chunks loaded on demand)
• 초기 로딩 속도를 빠르게한다(Keep initial loading time low)
• 모든 static asset들을 module화 할 수 있게한다(Every static asset should be able to be a moduel)
• 많은 Third-Party 라이브러리들을 모듈화 할 수 있게한다(Ability to integrate 3rd-party libraries as modules)
• Module bundler의 대부분을 customizing할 수 있게한다(Ability to customize nearly every part of the module bundler)
• 큰 프로젝트에 적합하다(Suited for big projects)

또 다른 특징으로는 Javascript만이 아닌, CSS, SASS 등도 다양한 loader들을 이용해 포함시킬 수 있다.

Loader List

---

Babel

Babel은 Transform Compiler이다. 보통 TypeScript, CoffeeScript 같은 Javascript 문법이 아닌 각각의 문법으로 작성된 코드를 Javascript 엔진에서 동작 가능한 코드로 변환하는 역할을 하는데, 여기에서는 React JS의 JSX 문법을 Javascript에서 실행되도록 변환하는 역할을 한다.
링크 참고
Babel을 이용하면 ES6 문법도 적용가능하다.

---

적용해보자

그 전에 아래 버전을 확인하자.

• NodeJS 4.2.0
• NPM 2.14.3

Directory Structure

webpack_test/
├── dist
│   └── bundle.js
├── index.html
├── package.json
├── node_moduels/
├── src
│   └── app.react.js
│   └── list.react.js
└── webpack.config.js

Root 디렉터리인 webpack_test가 있고, React JS Component 들이 포함된 src 디렉터리, webpack과 babel-loader를 이용해 컴파일 된 결과물이 존재하는 dist 디렉터리가 있다.

그리고, webpack을 실행 시에 줄 옵션을 포함하는 webpack.config.js가 root 디렉터리에 있다.

Package Install

이제 ReactJS와 webpack을 사용하기위해 package들을 설치한다.

npm init

npm install --save react react-dom
npm install --save-dev webpack babel-loader babel-preset-react

추가적으로 ES6 문법을 사용하기 위해 babel-preset-es2015를 설치한다.

npm install --save-dev babel-preset-es2015

그 외 방법으로 아래 파일을 복사해 root 디렉터리에 package.json으로 저장하고, 아래 명령어를 실행하면 모든 package가 설치된다.

npm install

Simple ReactJS App

webpack으로 컴파일할 ReactJS 파일과 html 파일을 간단하게 작성한다.

1. index.html을 root 디렉터리에 생성
2. body 태그 내부에 아래 코드를 추가

<script src="./dist/bundle.js"></script>

1. 이 후 src/app.react.js 파일과 src/list.react.js 파일을 생성 후 아래 코드 추가

src/app.react.js

var React = require("react");
var ReactDOM = require("react-dom");

var List = require("./list.react");
var Hello = React.createClass({
    render: function(){
        return (
            <div className="greeting">
                <List name={this.props.name} />
            </div>
        )
    }
});

ReactDOM.render(
    <Hello name="yumere" />,
    document.getElementById("container")
);

src/list.react.js

var React = require("react");

var List = React.createClass({
    render: function(){
        return (
            <div>
                This Is List
                Hello, {this.props.name}
            </div>
        )
    }
});

module.exports = List;

Webpack Config

이제 webpack config 파일을 생성한다.

root 디렉터리에 webpack.config 파일을 생성하고 아래 코드를 추가한다.

module.exports = {
    entry: {
        javascript: "./src/app.react.js"
    },

    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },

    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ["react", "es2015"],
                    cacheDirectory: true
                }
            }
        ]
    }
};

entry는 시작 파일을 의미하며, 여기서는 ReactDOM.render 코드가 있는 부분을 의미한다.
output은 bundle화 된 파일이 저장될 곳을 의미한다.
module이 가장 중요한데, 각 react component에 사용된 JSX를 어떤 Transform Compiler를 사용해 Javascript 코드로 바꿀 것인지 설정한다.

이 글에서는 babel-loader를 이용하며, query에 react 옵션을 넣어야 한다.

Run

설정이 다 됐으면, root 디렉터리에서 아래 명령을 실행하면, dist/bundler.js가 생성된 것을 확인할 수 있다.

webpack -w webpack.config.js