React Foundation

React 설치 가이드

1. Node.js 설치

React를 사용하기 위해선 Node.js가 필수로 설치 되어 있어야 하며, 필요한 Package 설치 및 Build, 배포에 사용된다.
아래 사이트를 방문하여 OS에 맞는 버전으로 설치한다. 설치 후 Console(CMD)에서 커맨드를 입력한다.

Node.js 소개 - http://d2.naver.com/helloworld/4994500

Node.js 설치 - https://nodejs.org/ko/

2. 프로젝트 생성

프로젝트 폴더로 이동해서 Node.js 프로젝트를 생성한다.
$ npm init
package.json 파일이 생성된다.

React 설치 가이드

3. Javascript Moduler Webpack 설치

Javascript 모듈화 도구 - http://d2.naver.com/helloworld/0239818

npm(node pacakge manager)으로 패키지 설치

$ npm install --save-dev webpack

설치가 완료된 후 프로젝트 폴더에 webpack.config.js 파일 생성

module.exports = {
    entry: './src/app.js',
 
    output: {
        path: __dirname + '/build',
        filename: 'bundle.js'
    },
 
    module: {
        loaders: [
            { 
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015'],
                    cacheDirectory: true
                }
            }
        ]
    }
}

React 설치 가이드

4. Build Tool Gulp 설치

Gulp - http://programmingsummaries.tistory.com/356

$ npm install --global gulp-cli

$ npm install --save-dev gulp

$ npm install --save-dev gulp-webpack

설치가 완료된 후 프로젝트 폴더에 gulpfile.js 파일 생성

var gulp = require('gulp');
var webpack = require('gulp-webpack');
var webpackConfig = require('./webpack.config.js');
 
gulp.task('build', function() {
  return gulp.src('./src/app.js')
      .pipe(webpack(webpackConfig))
      .pipe(gulp.dest('build/'));
});
 
gulp.task('default', ['build']);

React 설치 가이드

5. React 설치

React 소개 - http://d2.naver.com/news/7030975

React 튜토리얼 - https://facebook.github.io/react/docs/tutorial-ko-KR.html

Javascript와 Babel - http://nodejs.github.io/nodejs-ko/articles/2015/05/11/story-about-js-and-babel/

$ npm install --save-dev react

$ npm install --save-dev react-dom

$ npm install --save-dev babel-preset-react

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

$ npm install --save-dev babel-loader

$ npm install --save-dev babel-core

-- 한줄요약
$ npm install --save-dev react react-dom babel-preset-react babel-preset-es2015 babel-loader babel-core

설치가 완료되면 package.json에 설치된 목록을 확인할 수 있고, node_modules 디렉토리에서도 설치된 패키지를 확인 할 수 있다.

 

React 설치 가이드

6. 테스트 코드 작성

React 테스트 코드를 작성한 다음 Gulp로 Build를 수행하고 테스트 페이지를 확인한다.

React 설치에 대한 테스트 코드이므로, 숙련자의 경우 다음 단계로 넘어가셔도 됩니다.

프로젝트 폴더에 최상위에 index.html 파일과 src/app.js 파일을 생성하고 아래의 코드를 작성한다.

-- src/app.js 파일
var React = require('react');
var ReactDom = require('react-dom');
 
var Main = React.createClass({
    render: function() {
        return (
            <div>Hello World</div>
        )
    }
});
ReactDom.render(<Main />, document.getElementById('app'));

-- index.html 파일
<body>
<div id="app"></div>
<script type="text/javascript" src="build/bundle.js"></script>
</body>

$ gulp

정상적으로 build가 되면 index.html 페이지를 Browser에서 확인(Hello World)한다.

여기 까지가 기본 가이드 이며, 뒤에 내용은 확장된 라이브러리 설치나 빌드 방법등에 대해 다루고 있다.

React 설치 가이드

7. Gulp Watch

파일을 수정하고 gulp 명령어를 통해 빌드를 수행하지만, 매번 번거롭고 하기 때문에 gulp watch를 통해 감지하여

auto build가 되게 해주는 기능.

gulpfile.js 에 아래 내용을 추가한 다음, $ gulp watch 명령어로 확인(파일 수정 - Auto Build)한다.

gulp.task('watch', ['build'], function () {
    gulp.watch('./src/**/*.js', ['build']);
});

React 설치 가이드

8. React Bootstrap 설치

React-bootstrap 소개 - https://react-bootstrap.github.io/

매우 대중화 된(?) 반응형 CSS 프레임워크로 React 버전으로 제공되고 있으며,

아래의 명령어로 설치하거나, 사이트에 설치 가이드를 참고해도 된다.

$ npm install --save-dev react-bootstrap

React 설치 가이드

9. Node 서버 설치

Node서버로 기동하여 웹 어플리케이션을 볼 수 있다.

$ npm install --save-dev http-server concurrently

package.json에 아래의 http-server, ws, start 구문을 기술

$ npm start

브라우저에서 http://localhost:8080 으로 확인해본다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "http-server": "http-server ./ -p 8080 -o /index.html",
    "ws": "ws -d ./ -p 8080",
    "start": "concurrent \"npm run gulp\" \"npm run demo\" \"npm run http-server\" "
  }

React 설치 가이드

10. React Router 설치

React Route는 UI와 URL을 동기화 하여, 사용자가 URL을 변경하면 컴포넌트가 자동으로 언마운트 및 마운트 되는 역할을 한다. - History 관리

$ npm install --save-dev react-router

React Route에 관한 설명은 React 기초 가이드를 참고한다.

React 설치 가이드

11. React Hot Loader

webpack-dev-server와 react-hot-loader를 이용하여 코딩 후 바로 변경되는 Hot Module Reload를 사용할 수 있다.

$ npm install --save--dev react-hot-loader webpack-dev-server

webpack.config.js 파일에 서버환경 설정 추가

devServer: {
    hot: true,
    inline: true,
    host: '0.0.0.0',
    port: 4000,
    contentBase: __dirname + '/public/',
},

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

package.json 파일에 webpack-dev-server 기동 스크립트 추가

"scripts": {
    "hot-server": "webpack-dev-server"
  }

커맨드창에 기동 명령어 입력 후 http://localhost:4000 으로 확인

$ npm run hot-server

React Foundation - Install Guide

By jungyoungtai

Made with Slides.com

React Foundation - Install Guide

React Foundation 문서

  • 861

More from jungyoungtai