React.js Setting

2017-07-11

2024-06-07

react

React.js 작업환경 설정하기

React 작업환경을 설정에 대해 알아보자. NodeJS 환경에서 React를 사용 할 것이므로 NodeJS 및 npm이 설치되있어야 한다. NodeJS 환경에서 React를 사용하는 방법은 대표적으로 webpack을 이용하는 방법이 있고, browserify를 이용하는 방법이 있는데, 이 포스트에서는 webpack을 이용하는 방법을 설명한다.
주의: Node.js를 설치 한 다음에, npm install -g npm 을 통하여 npm 버전을 최신버전으로 업데이트 한다. LTS 버전에서는 지금은 NPM을 2.15.9 을 사용하는데, 이는 모듈을 설치할때 nested 된 구조로 설치하기 때문에 React.js 프로젝트를 만들땐 오래 걸린다. (babel-preset-es2015 설치 할 때). 위 명령어로 최신버전인 3.10.6 을 사용하면 모듈설치가 훨씬 빨라진다. (node_modules 의 용량차이가 상당하다. babel-preset-es2015 의 경우 6.14MB, 구버전 NPM을 사용 했을땐, 144MB)

1. Global Package 설치

작업환경 설치를 위하여 몇가지 글로벌 패키지가 설치 되어야 한다. 설치 할 패키지들은 다음과 같다.

babel: 아직 ECMAScript6 를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용 할 수 있게 해준다.
webpack: 모듈 번들러로서, Browserify 처럼 브라우저 위에서 import (require) 을 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐준다.
webpack-dev-server: wepback에서 지원하는 간단한 개발서버로서 별도의 서버를 구축하지 않고도 웹서버를 열 수 있으며 hot-loader를 통하여 코드가 수정될때마다 자동으로 리로드 되게 할 수 있다.

1	$ npm install -g babel webpack webpack-dev-server

2. 프로젝트 생성

react-tutorial 이라는 루트 폴더를 생성 후 npm init 명령어를 사용하여 Nodejs 프로젝트를 생성한다.

1 2	$ mkdir react-tutorial && cd react-tutorial $ npm init

3. Dependency 및 Plugin 설치

React 를 사용 할 것이므로, react-dom을 설치해야 한다. –save 옵션을 통하여 package.json 에 의존 패키지들을 추가 할 수있다.

1	$ npm install --save react react-dom

둘쨰로, babel 에서 사용 될 플러그인을 설치해야 한다. 해당 모듈들은 개발환경에서만 사용되므로 –save-dev 옵션을 설정한다.

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

webpack 과 webpack-dev-server 가 글로벌로 이미 설치가 되어있는데, 로컬 모듈로 설치된 이유는 webpack 의 livereload와 비슷한 기능인 –hot 옵션을 사용하기 위함 이다. 사실 상, webpack 모듈을 글로벌 패키지로서 꼭 설치 할 필요는 없다. 이를 설치 한 이유는 커맨드라인에서 webpack-dev-server을 바로 실행하기 위함인데, 로컬에만 설치하고 나중에 webpack 을 실행할 때는 ./node_modules/bin/webpack-dev-server –hot 이런식으로 실행 할 수 있다.

현재 package.json 파일을 확인해 보면 설치된 의존 모듈은 다음과 같다.

"dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
},
"devDependencies": {
    "babel-core": "^6.7.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
}

4. 디렉토리 구조 이해 및 파일 생성

react-tutorial
├── package.json         
├── public            # 서버 public path
│   └── index.html    # 메인 페이지
├── src               # React.js 프로젝트 루트
│   ├── components    # 컴포넌트 폴더
│   │   └── App.js    # App 컴포넌트
│   └── index.js      # Webpack Entry point
└── webpack.config.js # Webpack 설정파일

다음 명령어를 통하여 파일들을 생성한다.
Webpack entry point 는, Webpack 모듈에서 가장 처음으로 읽어들일 파일이다.

이 파일에서부터 시작해서, 해당 파일에서 import 한 다른 모듈들을 불러온다.

1	$ mkdir src src/components public && touch public/index.html src/components/App.js src/index.js webpack.config.js

5. 컴파일러, 서버 및 로더 설정

webpack 설정하기 [webpack.config.js]

ECMAScript6 를 컴파일해주고 개발서버를 열어주는 webpack의 설정파일 webpack config.js 을 수정한다.

module.exports = {
    entry: './src/index.js',

    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },

    devServer: {
        inline: true,
        port: 7777,
        contentBase: __dirname + '/public/'
    },

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

webpack의 역할은, entry 부터 시작하여 필요한 모듈들을 다 불러온 후, 한 파일로 합쳐 bundle.js 에 저장한다.
추가적으로는, 모듈을 통하여 ES6 문법으로 작성된 코드를 ES5 형태로 변환도 해준다.

개발 서버의 포트는 7777로 설정되었다.
개발 서버는 파일이 변동 될 때마다 다시 컴파일하고, 연결되어있는 브라우저를 새로고침해주는 기능을 가지고 있다.

package.json
npm start 명령어를 콘솔에서 입력 했을 때, webpack-dev-server 가 실행 될 수있게 package.json 의 “scripts” 블록을 수정한다.

1
2
3

"scripts": {
    "start": "webpack-dev-server --hot --host 0.0.0.0"
},

만약에 localhost 가 아닌 외부 서버에서 dev-server 실행 시, –host 옵션을 추가하지 않으면 접근이 안된다.
localhost 경우에는 생략하면 다.

6. HTML 및 js 수정

index.html

이 파일은 평범한 HTML 파일 이다. div id = “app” 을 React 프로젝트의 root element 로 지정하고 index.js 스크립트를 로드해주세요. 이 파일은 webpack에서 bundle된 파일로서, react 라이브러리 및 기타 자바스크립트 파일들이 하나로 합쳐진 파일이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>

src/components/App.js
처음 만들어 볼 React 컴포넌트 이다. * 파일 및 컴포넌트의 첫 문자를 대문자로 하는건 React의 naming convention 다.

import React from 'react';

class App extends React.Component {
    render() {
        return (
                <h1>Hello React Skeleton</h1>
        );
    }
}

1번에서 사용된 import JavaScript ES6 에 새로 도입된 키워드로서, require(‘..’) 의 역할을 한다.
12번에서 사용된 export는 JavaScript ES6 에 새로 도입된 키워드로서, module.export = App 와 같다.
컴포넌트에 대한 설명은 추후 자세히 알아보도록 하겠다.

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

App 컴포넌트를 불러와서 root element에 렌더링하는 부분입니다.

7. webpack-dev-server 구동하기

1	$ npm start

지금까지 같은 모듈 버전에 오타가 없이 위에 예제들을 순차적으로 진행하였으면 에러 없이 서버가 구동 될 것 다.
브라우저에서 링크를 띄운 상태에서 App.js 를 수정해보면 브라우저에서 수동으로 F5를 누르지 않아도 자동으로 새로고침 된다.

FrontendSPAReact.js