React.js 시작하기 (on AWS EC2)

“프로 리액트”라는 책을 사서 React.js 배우기를 시작했습니다.

우선 셋팅을 해야 하는데, 웹서버로 webpack을 사용하고 있기 때문에
아무것도 없어도 작동이 가능합니다. (설치과정에서 자동 다운로드)

윈도우 환경에서 잘 작동되고, AWS EC2에서도 잘 작동됩니다.
* EC2의 Security Groups에서 inbound Rule에 사용할 포트를 열어야 함

캡처-ReactJS-샘플01

샘플을 실행하면 무조건 ‘localhost:8080’에서만 작동되는데
public access가 가능하게 하려면, webpack의 host를 ‘0.0.0.0’로 설정해야 합니다.
* 참고문서
http://stackoverflow.com/questions/33272967/how-to-make-the-webpack-dev-server-run-on-port-80-and-on-0-0-0-0-to-make-it-publ/33273459#33273459

[ 설정파일들 ]

  • package.json
    {
      "name": "react-app-boilerplate",
      "version": "0.1.4",
      "description": "React application boilerplate",
      "author": "Cássio Zen",
      "license": "ISC",
      "scripts": {
        "start": "webpack-dev-server --progress --host 0.0.0.0 --port 8088",
        "build": "NODE_ENV=production node_modules/.bin/webpack -p --progress --colors"
      },
      "devDependencies": {
        "babel-core": "~6.7.*",
        "babel-loader": "~6.2.*",
        "babel-preset-es2015": "~6.6.*",
        "babel-preset-react": "~6.5.*",
        "webpack": "~1.12.*",
        "webpack-dev-server": "~1.14.*"
      },
      "dependencies": {
        "react": "^15.0.0",
        "react-dom": "^15.0.0"
      }
    }
    
  • webpack.config.js
    var webpack = require('webpack');
    
    /*
     * Default webpack configuration for development
     */
    var config = {
      devtool: 'eval-source-map',
      entry:  [
         'webpack-dev-server/client?http://0.0.0.0:8088',
          __dirname + "/app/App.js"
        ],
      output: {
        path: __dirname + "/public",
        filename: "bundle.js"
      },
      module: {
        loaders: [{
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: ['es2015','react']
          }
        }]
      },
      devServer: {
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true,
        port: 8088
      },
    }
    
    /*
     * If bundling for production, optimize output
     */
    if (process.env.NODE_ENV === 'production') {
      config.devtool = false;
      config.plugins = [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({comments: false}),
        new webpack.DefinePlugin({
          'process.env': {NODE_ENV: JSON.stringify('production')}
        })
      ];
    };
    
    module.exports = config;
    
    

[ 소스파일들 ]

  • App.js
    import React, { Component } from 'react';
    import {render} from 'react-dom';
    
    import GroceryList from './GroceryList.js';
    
    
    class App extends Component {
    
    	render(){
    		var place = "World!!";
    		return (
    			<h1>Hello {place}</h1>
    		);
    	}
    }
    
    render(<App />, document.getElementById('root'));
    
  • GroceryList.js
    import React, { Component } from 'react';
    import {render} from 'react-dom';
    
    class GroceryList extends Component {
    
    	render(){
    		return (
    			<ul>
    				<ListItem quantity="1" name="Bread" />
    				<ListItem quantity="5" name="Eggs" />
    				<ListItem quantity="6" name="Cheases" />
    				<ListItem quantity="2" name="Milk" />
    			</ul>
    		);
    	}
    }
    
    class ListItem extends Component {
    
    	render(){
    		return(
    			<li>
    				{this.props.quantity} x {this.props.name}
    			</li>
    		);
    	}
    }
    
    render(<GroceryList />, document.getElementById('GroceryList'));
    
    
  • index.html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
        <div id='root'></div>
        <div id='GroceryList'></div>
    
        <script src="bundle.js"></script>
      </body>
    </html>
    
    

 

작동해 보니 js 파일을 변경할 때마다, 브라우져단도 알아서 휙휙 변경이 되더군요.
확실히 (모던 스타일의 프론트 개발을 위해서) 사용해볼한 호기심을 주네요.
좀더 공부해 보겠습니다.

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: