«

react로 webpack설정 및 로컬서버로 hello world 출력하기

서론

react는 MVC프레임워크 의 view 부분을 처리하기 위해서 만들어진 라이브러리 이다. 페이스북과 인스타그램에서 개발한 오픈소스이며 virtual dom 활용해 속도를 대폭 높였다.

Virtual DOM

기존 방식들은 순수 DOM을 비교하거나 DOM 자체만을 업데이트 하는 방식으로 이루어져서 업데이트가 빈번하게 이루어질수록 성능의 손실을 불러왔다. 하지만 Virtual DOM은 마지막으로 저장한 DOM을 Virtual DOM으로 저장해놓는다. 그리고 DOM에서 업데이트를 요청하면 저장되어 있는 Virtual DOM을 이용해 비교를 하는 방식으로 성능이 우수하다.

react를 이용해서 Hello World를 출력해보자

cmd창이나 에디터의 터미널에서 해당 코드를 입력하자

    $ npm init

해당 코드를 입력하면 이것저것 물어보는데 엔터를 여러번 누르다 보면 package.json파일이 생성이 되는데

    { 
        "name": "react_init", 
        "version": "1.0.0", 
        "description": "", 
        "main": "index.js", 
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
        }, 
        "author": "", 
        "license": "ISC" 
    }

package.js의 생성이 끝났습니다. 폴더구조는 아래처럼 진행하도록 하겠습니다.

    /output
        - index.html
    /src
        - App.js
        - index.js
    - .babelrc
    - package.json
    - webpack.config.js

하나의 폴더를 만들고 위의 구조처럼 파일을 생성해 주시고 가장 먼저 package.json 수정부터 하겠습니다. 처음에 만들어 놓은 package.json를 불러와서

//package.json

    {
      "name": "react_init",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot --host 0.0.0.0"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-core": "^6.7.0",
        "babel-loader": "^6.2.4",
        "babel-preset-es2015": "^6.6.0",
        "babel-preset-stage-0": "^6.5.0",
        "babel-preset-react": "^6.5.0",
        "react": "^15.3.2",
        "react-dom": "^15.3.2",
        "webpack": "^1.12.14",
        "webpack-dev-server": "^1.14.1"
      }
    }

위의 구조처럼 수정해주세요 수정이 끝났다면 devDependencies에 정의된 플러그인을 설치해봅시다. 플러그인 뿐만 아니라 react도 함께 설치가 됩니다.

    $ npm i

npm i 는 npm install과 같은 의미입니다. 여기까지 진행이 됐다면 필요한 플러그인들은 모두 설치가 끝났습니다. 이제 webpack.config.js와 .babelrc를 수정해 주세요

//webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/output', //번들 파일 폴더
        filename: 'bundle.js' //번들 파일 이름
    },
    devServer: {
        inline: true, //자동 리로드 여부를 선택합니다.
        port: 8080, //로컬 서버주소를 설정합니다.
        contentBase: __dirname + '/output'
    },
    module:
    {
        loaders: [
            {
                test: /\.js$/, //로더를 사용할 확장자를 추가합니다.
                loader: 'babel', //로더를 설정합니다.
                exclude: /node_modules/,  //로더 사용 제외한 대상을 추가합니다.
            }
        ]
    }
};
//.babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "react"
  ]
}

여기까지 진행이 됐다면 크로스브라우징을 위한 babel설정과 실시간 새로고침이 가능한 설정을 모두 마쳤습니다. 그럼 output폴더에 있는 index.html 문서를 열어주세요.

//index.html

    

위의 코드를 html5문서 body부분에 넣어주세요 수정이 끝났다면 이제 index.js와 app.js만 남았습니다. 아래 코드대로 차례대로 수정해 주세요

//index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    
    ReactDOM.render(
        <App />, document.getElementById('root')
    );
//App.js

    import React, { Component } from 'react';
    
    class App extends Component {
        render(){
            return (
                

hello world

); } } export default App;

여기까지 수정이 모두 끝났다면 파일 수정은 모두 끝났습니다. 이제 cmd나 터미널을 2개 실행해주세요

    $ npm start
    $ webpack -w

cmd나 터미널을 2개 실행하라고 한 이유는 두가지 기능을 동시에 수행하기 위해서 입니다. 먼저 npm start는 로컬서버를 생성해주고 webpack -w는 (webpack –watch와 같은 의미입니다.) es6로 생성된 bundle.js를 es3로 실시간 변환을 하기 위해서 입니다. -w의 명령어가 감시하다는 의미인데 이 명령어가 없을경우 1회성으로만 변환해줍니다.

웹페이지에서 localhost:8080를 입력해서 결과물을 보시면 hello world가 출력된 걸 확인 하실수가 있습니다. App.js에서 수정을 하면 새로고침없이 변경이 되는걸 확인할수가 있습니다.

https://github.com/radlohead/react.git

완성파일은 해당 링크에서 react_init폴더에서 확인하실수 있습니다.