React 기초 학습 4.파일 수정 후 자동으로 빌드되게하자! (Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

 

 

---

여기서 필요한건 react-hot-loader, webpack-dev-server 모듈이다.

webpack-dev-server 모듈은 webpack.config.json을 읽어 빌드하고 서버로 유지해주는 역할이라고 한다.

로컬에서 서버를 돌릴 수 있다.

 

react-hot-loader는 실시간으로 변경된 것을 확인할 수 있게 해준다.

 

모듈 install

// cmd

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

 

제로초님 강의에 서버가 공포감을 줄 수 있다고 한다.

나역시도 그랬던 것 같다 ㅎㅎㅎ.

 

package.json에 script 부분을 수정해준다.

// package.json

  // ..
  "scripts": {
  	"dev": "webpack-dev-server --hot"
  },
  // ..

npm run dev하면 webpack-dev-server와 react-hot-loader가 실행되게 해준다.

 

그리고 webpack.config.json으로 가서 plaugins를 작성해준다.

// webpack.config.json

  module : {
    rules : [{
      test : /\.jsx/,
      loader : 'babel-loader',
      options : {
        presets : ['@babel/preset-env', '@babel/preset-react'],               
        plugins : [
          '@babel/plugin-proposal-class-properties',
          
          // 이 부분!!
          'react-hot-loader/babel',
        ]
      }
    }]
  },

output의 publicPath도 수정해준다.

// webpack.config.json

output : {
  path : path.join(__dirname, 'dist'),
  filename : 'app.js',
  
  // 이부분!
  publicPath : '/dist'
}

 

app.js (entry에서 최초로 실행되는)에 react-hot-loader를 require해서 사용한다.

// app.js 

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

// react-hot-loader/root 로 입력해야한다. root를 입력하는건 그렇게 만들어졌기 때문이라고..ㅎ
import { hot } from 'react-hot-loader/root';
import Example from './Example';

// hot메서드에 Example 컴포넌트를 파라미터로 넘긴다.
const Hot = hot(Example);

// <Hot />을 컴포넌트 넣던 부분에 넣어준다.
ReactDOM.render(<Hot />, document.querySelector('#root'));

 

index.html에 app.js를 output한 파일을 볼 수 있도록 수정해준다.

path는 실제경로, publicPath는 대충 가상경로라고 생각하면된다고한다. // express.static과 비슷한기능이라고하는데?

  // index.html
 
  - <script src="./dist/app.js"></script>
  + <script src="./dist/app.js"></script>

 

그리고 아까 저장한 dev가 실행될 수 있도록 또는 npx webpack하면 실행된다.

// cmd

npm run dev

// 또는
npx webpack

 

 

자동으로 반영이 되는 것을 확인해보자.

.js를 수정하고 수정된 것을 확인해보자.

하지만.!

ReactDOM.render하는 js는 캐치하지 못하니 주의하자. 이곳에서 require하는 부분들만 캐치가 가능하다.

그래서 ReactDOM을 작성하는 entry부분은 서버를 내렸다가 올려야한다.