리액트 샘플 실습용

Author: jeonghwan-kim

react-sample/babel.config.js

@@ -1,10 +1,8 @@
 module.exports = {
   presets: [
     // TODO: 리액트 프리셋을 추가하세요.
-    "@babel/preset-react"
   ],
   plugins: [
     // TODO: 리액트 핫로더 플러그인을 추가하세요.
-    "react-hot-loader/babel"
   ]
 };

react-sample/package.json

@@ -11,17 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/preset-react": "^7.7.4",
-    "css-loader": "^3.4.2",
-    "html-webpack-plugin": "^3.2.0",
-    "react-hot-loader": "^4.12.18",
-    "style-loader": "^1.1.2",
-    "webpack": "^4.41.5",
-    "webpack-dev-server": "^3.10.1"
   }
 }

react-sample/src/Hello.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { hot } from 'react-hot-loader';
 import Name from './Name';
 
 class Hello extends React.Component {
@@ -8,4 +7,5 @@ class Hello extends React.Component {
   }
 }
 
-export default hot(module)(Hello);
+// TODO: 핫로더를 지원하는 컴퍼넌트로 변환하세요
+export default Hello

react-sample/webpack.config.js

@@ -1,6 +1,4 @@
 const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 module.exports = {
   mode: "development",
@@ -15,26 +13,10 @@ module.exports = {
     overlay: true,
     stats: "errors-only",
     // TODO: react-hot-loader를 사용하도록 구성하세요.
-    hot: true
   },
   module: {
     rules: [
-      // TODO: 리액트 프리셋후에 바벨 로더를 설정하세요.
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        loader: "babel-loader" // 바벨 로더를 추가한다
-      },
-      {
-        test: /\.css$/,
-        use: ["style-loader", "css-loader"]
-      }
+      // TODO: js(리액트 코드 포함)와 css 파일 변환을 위한 로더를 구성하세요 
     ]
   },
-  plugins: [
-    new CleanWebpackPlugin(),
-    new HtmlWebpackPlugin({
-      template: "./src/index.html"
-    })
-  ]
 };