리액트 #02 - 개발환경 구축

React JS #01

---

2014년에 핫하게 나와서 최근까지도 많은 사랑을 받고 있는 리액트.

리액트의 시작부터 리액트 네이티브의 끝까지 공부하는 시간을 가져보겠다.

개발환경 구축 - 모듈 설치

---

이번에는 리액트를 시작하기에 앞서, 무엇보다 중요한 개발환경을 구축해보자.

Babel

babel은 최신의 Javascript 문법을 사용하게 해주는 툴입니다.

설치

npm install babel

npm install babel-core

npm install babel-loader

npm install babel-preset-react

npm install babel-preset-es2015

Webpack

webpack은 모듈 번들러입니다. 웹팩은 클라이언트 사이드에서 사용되는 Javascript 파일들을 묶는 목적으로 사용되고,

다른 리소스들이나 애셋들을 트랜스포밍하고 번들링하고 패키징할 수 있습니다.

설치

npm install -g webpack

nodemon

nodemon은 nodejs 기반 어플리케이션 개발에 사용됩니다.

nodemon이 시작되면 파일이 수정되는 것을 감지하고 자동으로 어플리케이션을 재시작합니다.

다른 모듈들이 많지만 nodemon은 개인적으로 많이 사용하기에 같이 넣어봤습니다.

설치

npm install -g nodemon

React

우리가 사용할 모듈인 React도 설치해줍니다.

설치

npm install react

npm install react-dom

개발환경 구축 - 초기 프로젝트 환경 구축

---

다음으로는 초기 프로젝트 환경을 구축해봅니다.

제가 만들어놓은 초기 프로젝트 환경 소스를 첨부합니다.

깃헙 : https://github.com/pfldy2850/react-exercise01

webpack.config.js

module.exports = {

  entry: './client/index.js',

  output: {

    path: __dirname + '/public/javascripts/',

    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']

        }

      }

    ]

  }

};

client/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.js

var express = require('express');

var path = require('path');

var app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function (req, res) {

  res.sendFile(path.join(__dirname, '/public/views/index.html'));

});

app.listen(3000, function () {

  console.log('Example app listening on port 3000!');

});

다음과 같이 초기 프로젝트 환경을 구축하면 수월하게 프로젝트를 진행할 수 있습니다.

실행화면