REACT에서 파일을 수정시 브라우저가 새로고침되는 것이 아니라, 변경사항만 바뀌는 hot-reloading 을 설정하기 위한 방법이다.
소스코드는 제로초님의 리액트로 웹 게임 만들기 강좌를 기반으로 한다.
필자는 구름ide에서 개발을 하고 있는데, 제로초님의 소스코드를 기반으로 하니 여러가지 오류가 발생했으며, 그 오류들을 해결하는 방법을 기술하겠다.
1. Invalid host header
devServer 옵션에 `allowHosts : "all"`을 추가해주면 된다.
2. WDS webSocket connection failed
파일을 수정했음에도 불구하고, 브라우저에서 아무런 동작이 일어나지 않고, 브라우저를 수동으로 새로고침해야 변경사항이 반영되는 오류가 나타났다.
devServer 옵션에 client :{webSocketURL : "ws://0.0.0.0:443/ws"}
을 추가해주었더니, webSocket이 정상적으로 동작하기 시작했다.
웹소켓 포트를 80으로 설정하여도 된다.
WDS는 webSocket을 기반으로, 파일에 변경사항이 생겼을때 브라우저에게 변경사항을 알려주고, 이를 기반으로 브라우저가 변경사항을 반영한 렌더링을 진행하는 것 같다.
3. hot-reloading does not work
그런데, WebSocket이 작동하기 시작하니 변경사항이 생겼을때 hot-reloading이 되는 것이 아니라 브라우저가 새로고침 되는 현상이 나타났다.
이는 devServer 옵션의 liveReload가 자동적으로 true가 되어있기 때문이었으며,
liveReload : false를 추가해주면, 드디어 hot-reloading이 정상적으로 작동하기 시작한다!!!
4. @emotion/react
css-in-js를 위해 @emotin/react를 사용하고 싶은 경우
npm i @emotion/babel-plugin을 설치하고,
webpack.config.js에서
babel-loader의 plugin으로 @emotion/babel-plugin을 추가해주고,
preset의 importsource에 @emotion/react를 추가해주면 된다.
최종적인 webpack.config.js파일은 다음과 같다.
const path = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
name: 'word-relay-dev',
mode: 'development',
devtool: 'inline-source-map',
resolve: {
extensions: ['.js', '.jsx'],
},
entry: {
app: './client',
},
module: {
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {browsers: ['last 2 chrome versions']},
debug: true,
}],
["@babel/preset-react", { "runtime": "automatic", "importSource": "@emotion/react" }],
],
plugins: ['react-refresh/babel', "@emotion/babel-plugin"],
},
exclude: path.join(__dirname, 'node_modules'),
}],
},
plugins: [
new ReactRefreshWebpackPlugin(),
],
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/dist',
},
devServer: {
devMiddleware: { publicPath: '/dist' },
static: { directory: path.resolve(__dirname) },
port: 3000,
host: "0.0.0.0",
liveReload : false,
allowedHosts: "all",
client: {
webSocketURL: "ws://0.0.0.0:443/ws",
},
}
};