JavascriptReact.jsSetting

React.js 개발환경 설정

NodeJS, javascript, npm, react.js

React.js 개발환경 설정에는 NodeJS를 이용해서 하기 때문에 NodeJS 및 npm이 설치 필요

Node.js를 설치하고 npm install -g npm을 통해 npm 버전을 최신버전으로 업데이트 하는걸 추천. 구버전 npm의 경우(npm ver 3.0.0 미만) nested 구조로 node_modules 폴더를 구성하기 때문에 용량을 많이 잡아먹지만, 신버전 npm의 경우(npm ver 3.0.0 이상) 일반 디렉토리 구조로 생성해서 용량이 많이 줄어든다.

1. Global Package 설치

1
2
# npm 으로 babel, webpack, webpack-dev-server 를 설치한다.
 $ npm install -g babel webpack webpack-dev-server
  • babel - ECMASciprt6를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용할 수 있게 도와준다.
  • webpack - 모듈 번들러로, 브라우저 위에서 import(require)을 할 수 있고, js 파일들을 하나로 합쳐준다.
  • webpack-dev-server - webpack에서 지원하는 간단한 개발 서버로 별도의 서버 구축없이 웹 서버를 제공해주고, hot-loader를 통해 코드가 수정될 때 마다 자동으로 리로드 되게 해준다.

2. 프로젝트 생성

1
2
3
4
5
6
# react 개발 환경 세팅할 디렉토리 생성
$ mkdir react 
# 해당 디렉토리로 이동
$ cd react
# 개발 환경을 저장해 놓을 package.json 생성
$ npm init

3. Dependency, Plugin 설치

1
2
3
4
# 해당 디렉토리 안에 있는 node_modules 폴더에 react 와 react-dom 설치하고 package.json에 의존 패키지로 해당 모듈을 추가해준다.
$ npm install --save react react-dom
# babel에서 사용될 플러그인 설치, 개발환경에서만 해당 모듈이 필요한 경우 --save-dev(-D) 옵션을 줘서 설치한다.
$ npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-dev-server

webpack 과 webpack-dev-server를 로컬 모듈로 설치한 이유는 webpack의 -hot 옵션을 사용하고, 커맨드라인 환경에서 webpack-dev-server로 바로 실행하기 위함이다.

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

1
2
3
4
5
6
7
8
9
react
├── package.json
├── public            # server publick path
│   └── index.html    # main page
├── src               # React.js 프로젝트 루트
│   ├── components    # 컴포넌트 폴더
│   │   └── App.js    # App 컴포넌트
│   └── index.js      # Webpack Entry point
└── webpack.config.js # Webpack 설정파일

Webpack Entry point는 webpack 모듈에서 가장 처름으로 읽어들이는 파일이다. 이 파일에서부터 시작해서, 해당 파일에서 import한 다른 모듈들을 불러온다.

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

webpack 설정(webpack.config.js)

webpack.config.js -> ECMAScript6를 컴파일 해주고 개발 서버를 열어주는 webpack의 설정파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
module.exports = {
   // entry 부터 시작해서 필요한 모듈을 모두 불러온다.
    entry: './src/index.js',
    // 불러온 모듈을 bundle.js 라는 하나의 파일로 합친다.
    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },
    // webpack-dev-server 설정 
    // 0.0.0.0(localhost)
    // 4000번 포트를 이용해 public 폴더 내부의 index.html을 보여준다.
    devServer: {
        hot: true,
        inline: true,
        host: '0.0.0.0',
        port: 4000,
        contentBase: __dirname + '/public/',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                // babel-loader 을 사용해서 ES6(es2015), react 문법을 ES5형태로 변환시켜줌
                loaders: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
};

package.json 설정

package.json의 scripts block을 아래와 같이 수정한다. 

1
2
3
4
5
6
7
// webpack-dev-server 를 
// --hot 옵션(코드가 변경되면 실시간으로 reload)과 
// --host 옵션(localhost가 아닌 외부 서버에서 dev-server 실행시 필요한 옵션 localhost인 경우 생략)
// 으로 실행 한다.
"scripts" : {
  "start" : "webpack-dev-server --hot --host 0.0.0.0"
},
1
2
3
# 커맨드 라인에 npm start 를 입력하면 
# webpack-dev-server --hot --host 0.0.0.0를 입력한 것과 같은 효과
$ npm start

6. HTML 및 js 수정

public/index.html

localhost로 접속하면 보여질 html 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>React App</title>
    </head>
    <body>
        <!--React 프로젝트의 root element-->
        <div id="root"></div>
        <!--webpack으로 생성된 bundle.js 파일을 연결-->
        <!--react 라이브러리 및 기타 자바스크립트 파일들이 하나로 합쳐진 파일-->
        <script src="./bundle.js"></script>
    </body>
</html>

src/components/App.js

React 컴포넌트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// node_modules 안에 있는 react를 React라는 이름으로 불러옴
// var React = require('react'); 와 같음
import React from 'react';
// App class를 React.Component 로 확장 시킴
class App extends React.Component {
    render(){
        return (
            <h1>Hello React</h1>
        );
    }
}
// App 이라는 이름으로 외부에서 접근 할 수 있도록 내보냄
// module.export = App; 과 같음
export default App;

src/index.js

App 컴포넌트를 rootElement에 렌더링

1
2
3
4
5
6
7
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
const rootElement = document.getElementById('root');
// ReactDOM에 있는 render 함수를 이용하여 <App/>을 렌더링
ReactDOM.render(<App />, rootElement);

7. webpack-dev-server 실행

webpack-dev-server에 hot 옵션이 있기 때문에 App.js를 수정하면 새로고침하지 않아도 알아서 새로고침이 된다.

1
$ npm start

*출처 velopert React.js 강좌 작업환경 설정

Share