hot reload , dev server

react_webgame/main/WordRelay.jsx

@@ -3,12 +3,51 @@ const { Component } = React;
 
 class WordRelay extends Component {
     state = {
-        text: 'Hello, webpack',
+        word: '리액트',
+        value: '',
+        result: '',
+        words: '리액트',
     };
 
+    onSubmitForm = (e) => {
+        e.preventDefault();
+        if (this.state.word[this.state.word.length - 1] === this.state.value[0]) {
+            this.setState( {
+                result: '딩동댕',
+                word: this.state.value,
+                words: this.state.words + ' => ' + this.state.value ,
+                value: '', 
+            })
+            this.input.focus();
+        } else {
+            this.setState({
+                result: '땡',
+                value: '',
+            })
+            this.input.focus();
+        }
+    }
+
+    onChangeInput = (e) => {
+        this.setState({ value: e.target.value })
+    }
+
+    input;
+    onRefInput = (c) => {
+        this.input = c;
+    }
+
     render() {
         return (
-            <h1>{this.state.text}</h1>
+            <>
+                <div>{this.state.word}</div>
+                <form onSubmit={this.onSubmitForm}>
+                    <input ref={this.onRefInput} value={this.state.value} onChange={this.onChangeInput} />
+                    <button>입력!</button>
+                </form>
+                <div>{this.state.result}</div>
+                <div>{this.state.words}</div>
+            </>
         )
     }
 }

react_webgame/main/package.json

@@ -4,8 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "webpack serve --env development"
   },
   "author": "kim",
   "license": "MIT",
@@ -18,8 +17,11 @@
     "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "babel-loader": "^8.2.2",
+    "react-refresh": "^0.9.0",
     "webpack": "^5.11.0",
-    "webpack-cli": "^4.2.0"
+    "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^3.11.0"
   }
 }

react_webgame/main/webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path'); // 경로 조작하는 모듈
-const { webpack } = require('webpack');
+const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
 
 module.exports = {
 	name: 'wordrelay-setting',
@@ -27,17 +28,26 @@ module.exports = {
 					}], 
 					'@babel/preset-react'
 				],
-				plugins: ['@babel/plugin-proposal-class-properties'],
+				plugins: [
+					'@babel/plugin-proposal-class-properties',
+					'react-refresh/babel',
+				],
 			},
-		}],
+		}], 
 	}, // 모듈적용
-
+	
 	plugins: [
-		new webpack.loaderOptionsPlugin({ debug: true}),
+		new RefreshWebpackPlugin()
 	],
-			
+
 	output: {
 		path: path.join(__dirname, 'dist'),
-		filename: 'app.js'
-	} // 출력
+		filename: 'app.js',
+		publicPath: './dist/',
+	}, // 출력
+
+	devServer: {
+		publicPath: './dist/',
+		hot: true,
+	},
 };