강의 유튜브 주소 :
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부분은 서버를 내렸다가 올려야한다.
'~2022 > FE-React' 카테고리의 다른 글
| React 기초 학습 8.배열에 push할때 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
|---|---|
| React 기초 학습 7.자식 컴포넌트로 props 전달 / 주석 (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 6.반복문에서 key (Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 5.클래스를 Hooks로 바꿔보자 (Zerocho님 강의 학습 후기) (0) | 2020.04.21 |
| React 기초 학습 3. 필요한 파일들에 대해 알아보자(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.21 |
| React 기초 학습 2. node환경에서 해보자! 필요한 패키지 다운로드.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.18 |
| React 기초 학습 1. HTML에서 React를 사용해보자.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리) (0) | 2020.04.10 |
| ReactJS로 웹 서비스 만들기 학습 정리 (0) | 2018.08.12 |
