Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

[웹 게임을 만들며 배우는 React] - 웹팩 데브 서버, 핫 리로딩 본문

과거 프로그래밍 자료들/React

[웹 게임을 만들며 배우는 React] - 웹팩 데브 서버, 핫 리로딩

평부 2022. 9. 27. 13:39

 

출처: https://www.inflearn.com/course/web-game-react/dashboard

 

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의

웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React Router, 웹팩, 바벨까지 추가로 배웁니다., - 강의 소개 | 인프런...

www.inflearn.com

 

출처 : https://github.com/ZeroCho/react-webgame/tree/master/2.%EB%81%9D%EB%A7%90%EC%9E%87%EA%B8%B0

 

GitHub - ZeroCho/react-webgame

Contribute to ZeroCho/react-webgame development by creating an account on GitHub.

github.com

 

 

* 핫 리로딩이 필요한 이유

▶ 수정할 때마다 웹팩을 빌드해야 함

▶ 번거로움 늘어남

▶ 수정할 때마다 바로바로 확인이 되고 싶음 = 핫 리로딩 사용

 

 

* 새로고침과 핫 리로딩의 차이

- 새로고침 : 화면을 바꿀 때마다 기존 데이터가 날라감

- 핫 리로딩 : 화면을 바꿀 때마다 기존 데이터는 유지됨

 

 

https://ba-gotocode131.tistory.com/233

 

[웹 게임을 만들며 배우는 React] - Hoonks, 웹팩

출처: https://www.inflearn.com/course/web-game-react/dashboard [무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의 웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React..

ba-gotocode131.tistory.com

▶ 이 프로젝트에서 핫 리로딩 추가됨

 

 

1.터미널에 설치할 것들 

 npm i -D webpack-dev-server
 npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh
 npm i react-refresh

 

 

2. webpack.config.js에서 설치한 내용 추가

- path : 실제 경로
- publicPath : 가상의 경로(node의 express.static과 비슷함)

const path = require("path");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); //추가

module.exports = {
  name: "gugudan-setting",
  mode: "development",
  devtool: "eval",
  entry: {
    app: "./client",
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: { browsers: ["last 2 chrome versions"] },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: ["react-refresh/babel"],
        },
        exclude: path.join(__dirname, "node_modules"),
      },
    ],
  },
  plugins: [new ReactRefreshWebpackPlugin()], //추가
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
  },
  	//추가
	devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },
};

 

 

3. package.json 내 scripts 부분 수정

{
  "name": "webpack_gugudan",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  	//이 부분 수정함
    "dev": "webpack serve --env development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "babel-loader": "^8.2.5",
    "react-refresh": "^0.14.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  }
}

 

4. 터미널 창에서 npm run dev를 치고 결과 확인

 

저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > React' 카테고리의 다른 글

(컴포넌트 분리 및 props) es modules may not assign module.exports or exports.*, use esm export syntax, instead: ./numberbaseball.jsx 문제 해결  (0) 2022.09.27
[웹 게임을 만들며 배우는 React] - 끝말잇기(class와 hooks 사용, controlled & uncontrolled)  (0) 2022.09.27
[웹 게임을 만들며 배우는 React] - Hoonks, 웹팩  (0) 2022.09.27
[웹 게임을 만들며 배우는 React] - 구구단  (0) 2022.09.02
kakao login notnull violation: user.email cannot be null 해결법  (0) 2022.08.26
'과거 프로그래밍 자료들/React' Related Articles more