react refresh 너무 안됩니다. 도와주세요

Question

1.8버전은 hot-reloader가 호환안되고 react-refresh설정을 해야 한다고 하는데...검색해봐도 자료가 많지 않고...그러다보니아무리 해봐도 잘 안되네요 ㅠㅠ 설정은 할만큼 했다고 생각하는데 코드를 수정해도 화면 리랜더링이 전혀 안되네요 ㅠㅠ코드 한번 봐주시면 감사하겠고..그나마 검색해서 나온것들 copy&paste한건데...일주일넘게 해보는데도 ㅠㅠ심픟한 index.js파일부터요import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));root.render( );reportWebVitals();-App.js-import React from 'react';function App() { return (

Edit src/App.js and save to reload2222

);}export default App;-webpack.config.js-const path = require('path');const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { mode: 'development', devtool: 'eval-source-map', entry: './src/index.js', // 프로젝트 진입점 파일 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.css$/, // CSS 파일을 처리하는 로더 use: ['style-loader', 'css-loader'] }, { test: /\.(png|jpe?g|gif|svg)$/, // 이미지 파일을 처리하는 로더 use: [ { loader: 'file-loader', options: { name: '[name].[hash].[ext]', outputPath: 'assets/images', } } ] } ] }, plugins: [ new ReactRefreshWebpackPlugin(), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'public', 'index.html'), favicon: path.resolve(__dirname, 'public', 'favicon.ico'), }), ], devServer: { hot: true, open: true, port: 5000, static: path.resolve(__dirname, 'public'), historyApiFallback: true, }, resolve: { extensions: ['.js', '.jsx'] },};-babel.config.js-// babel.config.jsmodule.exports = { presets: [ '@babel/preset-env', '@babel/preset-react' ]};이렇게 말고는 package.json파일에서는 "scripts": { "start": "webpack-dev-server --mode=development --hot",이렇게 해줬고.설치한 모듈들은 npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @pmmmwh/react-refresh-webpack-plugin npm install --save-dev @babel/core @babel/preset-react @babel/preset-env react-refresh/babel package.json에서 보면 "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-refresh": "^0.14.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "devDependencies": { "@babel/core": "^7.24.7", "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15", "babel-loader": "^9.1.3", "css-loader": "^7.1.2", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.6.0", "style-loader": "^4.0.0", "webpack": "^5.93.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4" } 이렇게 있습니다. 아무리 해도 hot reload안됩니다. ㅠㅠ 도와주세요 이게 안되니 공부를 하고 연습을 할려고 해도 매번 재기동 해야하고 재기동할때마다 서버 올라오는데 너무 오래걸리고...요아 그리고 기동 로그입니다.❯ npm start> sample2@0.1.0 start> webpack-dev-server --mode=development --hot [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:5000/ [webpack-dev-server] On Your Network (IPv4): http://172.18.42.184:5000/ [webpack-dev-server] Content not from webpack is served from '/mnt/d/Study/React/sample2/public' directory [webpack-dev-server] 404s will fallback to '/index.html' [webpack-dev-middleware] wait until bundle finished: /assets by path *.js 4.2 MiB asset bundle.js 4.19 MiB [emitted] (name: main) asset node_modules_web-vitals_dist_web-vitals_js.bundle.js 13.1 KiB [emitted]asset favicon.ico 3.78 KiB [emitted]asset index.html 1.71 KiB [emitted]runtime modules 31.7 KiB 17 modulesmodules by path ./node_modules/core-js-pure/ 128 KiB 126 modulesmodules by path ./node_modules/@pmmmwh/react-refresh-webpack-plugin/ 53.2 KiB 23 modulesmodules by path ./node_modules/webpack-dev-server/client/ 69.7 KiB 16 modulesmodules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 modulesmodules by path ./src/ 7.68 KiB 5 modulesmodules by path ./node_modules/webpack/hot/*.js 5.18 KiB 4 modulesmodules by path ./node_modules/html-entities/lib/*.js 78.9 KiB 4 modulesmodules by path ./node_modules/react-dom/ 1010 KiB 3 modulesmodules by path ./node_modules/react-refresh/ 20.2 KiB 2 modulesmodules by path ./node_modules/react/ 85.7 KiB 2 modulesmodules by path ./node_modules/css-loader/dist/runtime/*.js 2.74 KiB 2 modulesmodules by path ./node_modules/scheduler/ 17.3 KiB 2 modules+ 6 moduleswebpack 5.93.0 compiled successfully in 70537 ms

kenu,전독시 · Answer

cra 로 생성하셨다면 vite 강추입니다.vite.dev

react refresh 너무 안됩니다. 도와주세요

1개의 답변

Q&A 목록