Matching42 · deathnet · May 7, 2021
diff --git a/FRONT/jognkim/README.md b/FRONT/jognkim/README.md
@@ -0,0 +1,17 @@
+## 설치 모듈
+- @babel/core
+- @babel/preset-env
+- @babel-loader
+
+- webpack
+- webpack-cli
+- webpack-dev-server
+- html-webpack-plugin
+
+- style-loader
+- css-loader
+- file-loader
+- url-loader
+
+- react
+- react-dom
diff --git a/FRONT/jognkim/babel.config.js b/FRONT/jognkim/babel.config.js
@@ -0,0 +1,12 @@
+module.exports = function(api) {
+	api.cache(true);
+
+	const presets = ["@babel/preset-env", "@babel/preset-react"];
+
+	const plugins = [];
+
+	return {
+		presets,
+		plugins
+	};
+};
diff --git a/FRONT/jognkim/dist/bundle.js b/FRONT/jognkim/dist/bundle.js
diff --git a/FRONT/jognkim/dist/index.html b/FRONT/jognkim/dist/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+<script defer src="bundle.js"></script></head>
+<body>
+	<div id="root"></div>
+</body>
+</html>
diff --git a/FRONT/jognkim/package.json b/FRONT/jognkim/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "jognkim",
+  "version": "1.0.0",
+  "description": "Matching42_practice_FRONT",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack serve",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Matching42/Matching42_practice.git"
+  },
+  "keywords": [
+    "front",
+    "practice",
+    "react",
+    "no",
+    "cra"
+  ],
+  "author": "jongkim",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Matching42/Matching42_practice/issues"
+  },
+  "homepage": "https://github.com/Matching42/Matching42_practice#readme",
+  "dependencies": {
+    "@babel/core": "^7.14.0",
+    "@babel/preset-env": "^7.14.1",
+    "@babel/preset-react": "^7.13.13",
+    "babel-loader": "^8.2.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "css-loader": "^5.2.4",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.36.2",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
+  }
+}
diff --git a/FRONT/jognkim/public/index.html b/FRONT/jognkim/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Document</title>
+	<link rel="stylesheet" href="../src/css/index.css">
+</head>
+<body>
+	<div id="root"></div>
+</body>
+</html>
diff --git a/FRONT/jognkim/src/components/App.js b/FRONT/jognkim/src/components/App.js
@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+
+const App = () => {
+	const [count, setCount] = useState(0);
+
+	const increase = () => {
+		setCount(count => count + 1);
+	}
+
+	const decrease = () => {
+		setCount(count => count - 1);
+	}
+
+	return (
+		<div>
+			<h2>{count}</h2>
+			<button onClick={decrease}>-1</button>
+			<button onClick={increase}>+1</button>
+		</div>
+	);
+}
+
+export default App;
diff --git a/FRONT/jognkim/src/css/index.css b/FRONT/jognkim/src/css/index.css
@@ -0,0 +1,8 @@
+* {
+	margin: 0;
+	box-sizing: border-box;
+}
+
+h2 {
+	margin-left: 30px;
+}
diff --git a/FRONT/jognkim/src/index.js b/FRONT/jognkim/src/index.js
@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+import "./css/index.css";
+
+ReactDOM.render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+	document.getElementById("root")
+);
diff --git a/FRONT/jognkim/webpack.config.js b/FRONT/jognkim/webpack.config.js
@@ -0,0 +1,48 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = {
+	mode: "development",
+
+	entry: "./src/index",
+
+	resolve: {
+		extensions: [".js", ".jsx"]
+	},
+
+	module: {
+		rules: [
+			{
+				test: /\.js?$/,
+				loader: "babel-loader",
+				exclude: /node_modules/
+			}, {
+				test: /\.css$/,
+				use: ["style-loader", "css-loader"]
+			}, {
+				test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+				loader: "url-loader",
+				options: {
+					name: "[hash].[ext]",
+					limit: 10000
+				}
+			}]
+	},
+
+	output: {
+		path: path.resolve(__dirname, "dist"),
+		filename: "bundle.js"
+	},
+
+	plugins: [
+		new HtmlWebpackPlugin({
+			template: `./public/index.html`
+		})
+	],
+
+	devServer: {
+		contentBase: path.join(__dirname, "dist"),
+		compress: true,
+		port: 5500
+	},
+};