As i wish

[React 끝말잇기] webpack-dev-server 및 react-hot-loader 본문

React JS

[React 끝말잇기] webpack-dev-server 및 react-hot-loader

어면태 2019. 6. 13. 16:06

안녕하세요. 엄티 입니다.

오늘은 리액트 프로젝트를 만들 시에 코드 수정과 함께 자동으로 결과창이 변할 수 있도록 세팅을 한번 해보겠습니다.

사실 앞선 포스팅에서는 계속해서 코드를 바꾸고, webpack 빌드를 하고, index.html을 열거나 새로고침을 하는 식으로 코드를 고쳐나갔는데요.

사실 실제로 업무를 하다 보면 이런 시간이 상당히 아까워집니다. 따라서 코드를 수정하고 저장만 하면 바로 결과창에 나와서 실시간으로 코드를 고쳐나가게 하는 것이 이번 포스팅에 목표입니다.

 

예를 들어 ionic 일 때는 ionic cordova run android -lcs와 같이 livereload 기능이 있는데 이와 비슷하다고 보시면 됩니다.

없어서는 안 될 기능이죠!!!

 

먼저 필요한 플러그인을 설치해 줍니다.

 

$ npm i -D webpack-dev-server react-hot-loader

webpack-dev-server: webpack.config.js를 읽어서 빌드를 해주고 그것을 항상 뒤쪽 서버로 유지시켜줍니다.

react-hot-loader: 코드가 변경되었을 때 페이지를 새로고침 하지 않고 바뀐 부분만 빠르게 교체해주는 라이브러리입니다.

 

이를 사용하려면 몇 가지 코드를 수정해야 하는데요.

 

 

client.jsx

import React from 'react';
import ReactDOM from 'react-dom';

// import hot from 'react-hot-loader/root';
const { hot } = require('react-hot-loader/root');

import ClassApp from './word-relay'; // Class 사용
import HooksApp from './word-relay-hook'; // Hooks 사용

const Hot = hot(ClassApp);
// const Hot = hot(HooksApp);

ReactDOM.render(<Hot />, document.getElementById('root')); // Class 사용

const { hot } = require('react-hot-loader/root')를 해줘서 hot을 불러오고 

const Hot = hot(ClassApp) 필요한 App을 감싸면 됩니다.

ReactDOM.render(<Hot/>, document.getElementById('root')); 그다음 Hot을 부르면 됩니다.

 

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development', // 배포시: production
  devtool: 'eval', // (빠르게 하겠다) 배포시: hidden-source-map
  resolve: {
    extensions: ['.js', '.jsx'] // .js 또는 .jsx 파일을 찾는다 (entry 안에 app에 있는 파일에 확장자를 붙여서 찾는다)
  },

  entry: {
    app: ['./client']
  }, // 입력
  module: { // Loaders
    rules: [{
      test: /\.jsx?$/, // .js 파일과 .jsx 파일에 rules (loader)를 적용
      loader: 'babel-loader', // babel 적용: 최신문법을 옛날 브라우저에서도 돌아갈 수 있게 변경하겠다.
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {
              // https://github.com/browserslist/browserslist
              // KR에서 점유율 5% 이상인 브라우저만 지원
              // chrome last 2 버전만 지원(즉, 특정 브라우저 버전만 지원, 만약 안넣으면 모든 브라우저를 지원해야 하기 때문에 babel이 하는일이 많아짐)
              browsers: ['> 5% in KR', 'last 2 chrome versions'],
            }
          }], // preset-env 에 대한 설정을 적용 하고 싶을 때에
          '@babel/preset-react'
        ],
        plugins: [
            '@babel/plugin-proposal-class-properties',
            'react-hot-loader/babel' // webpack-dev-server hot 사용시!!!
          ] // Error fix
      },
    }]
  }, // entry에 파일을 읽고 거기에 module를 적용한 후 output에 뺸다.
  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: true
    }) // Loader(module) 의 options에 다 {debug: true} 를 넣어줘라
  ], // webpack에서 기본적으로 합쳐주는애(module, rules 등) 말고 추가적으로 뭔가 더 하고 싶은것들
  output: {
    filename: 'app.js',
    path: path.join(__dirname, 'dist'), // 현재 폴더 루트(__dirname) 에 'dist' 폴더 생성

    // webpack-dev-server 사용 시 <script src="./dist/app.js"></script> /dist 경로 추가
    // 추가 없을 시에 html 에서 <script src="./dist/app.js"></script> 가 아닌 <script src="./app.js"></script> 로 해줘야 동작
    publicPath: '/dist/'
  }, // 출력

};

// entry에 있는 파일에 module 적용 하고 plugins 까지 더 추가하고 output으로 나온다.

module의 rules의 plugins에 'react-hot-loader/babel'를 추가해줍니다.

output의 publicPath를 추가해 줍니다. 이는 index.html 에서 <script src="./dist/app.js"></script>로 쓰기 위함인데요. 

이를 추가해 주지 않으면 index.html 에서 <script src="./dist/app.js"></script>가 아닌 <script src="./app.js"></script>로 변경해 주어도 똑같이 동작합니다. 이는 webpack-dev-server가 app.js 파일을 읽어와서 그러는데 publicPath로 경로를 지정해 주면 그 경로가 바뀌게 되는 것이죠.

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WordRelay</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- 웹팩으로 빌드한 ./dist/app.js 파일 -->
    <script src="./dist/app.js"></script>

    <!-- webpack-dev-server 사용시 dist 폴더 사용 안함 -->
    <!-- but webpack.config.js 에서 publicPath 사용시 dist 폴더 사용 가능 -->
    <!-- <script src="./app.js"></script> -->
  </body>
</html>

 

마지막으로 package.json을 수정해 줍니다.

package.json

{
  "name": "word-relay",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "webpack",
    "dev": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "react-hot-loader": "^4.11.0",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.1"
  }
}

 

저는 일부러 scripts의 test는 남겨두고 dev를 하나 더 추가했는데 test를 수정하셔도 무관 합니다.

위와 같이 dev: webpack-dev-server --hot을 하면 됩니다.

 

$ npm run dev

이렇게 콘솔 창에 입력을 하면

http://localhost:8080/

세 번째 줄에 http://localhost:8080/이라고 쓰여있는 것을 확인하실 수 있습니다.

뭐 이것을 인터넷이나 크롬 창에 열면 끝입니다.

 

그다음 코드를 수정 한 뒤 저장을 해보세요. 그럼 결과창이 자동으로 변경되시는 것을 확인해 보실 수 있습니다!!!

 

끝말잇기 코드 확인

 

[React 끝말잇기] React 끝말잇기

안녕하세요. 엄티 입니다. 오늘은 React 구구단에 이어서 '끝말잇기'를 만들어 보겠습니다. 잘 아시다시피 저의 포스팅은 '제로초' 님의 유투브 강좌를 기준으로 합니다. '제로초' 님의 리액트 무료 강좌(웹게임)..

eomtttttt-develop.tistory.com

 

저작자표시

'React JS' 카테고리의 다른 글

[React 반응속도 체크] 조건문 및 타이머  (0) 2019.07.04
[React 숫자 야구] props 와 component 분리  (0) 2019.06.21
[React 끝말잇기] React 끝말잇기  (0) 2019.06.13
[React 구구단] React 구구단 웹 게임  (0) 2019.06.13
[React 구구단] React 프로젝트 셋팅  (0) 2019.06.13
'React JS' Related Articles more
Comments