끄적끄적 코딩
article thumbnail
Published 2020. 11. 5. 08:10
[React] 웹팩(webpack) React

웹팩이란?

여러개의 자바스크립트 파일을 하나로 합쳐서 하나의 파일로 만들어 주는 도구


웹팩 설치

*node가 설치되어 있어야함.


작업을 할 폴더에서 npm init 실행

npm init



react, react-dom 설치

npm i react react-dom



webpack, webpack-cli 설치

npm i -D webpack webpack-cli



plugin 설치 

npm i -D @babel/plugin-proposal-class-properties
npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D



babel 설치 (package.json에서 확인 가능)

babel/core - babel의 기본적인 것들, 최신문법을 옛날문법으로 변경
babel/preset-env - 코드를 사용중인 브라우저에 맞게 호환
babel/preset-react - jsx지원
babel-loader - babel과 webpack 연결

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

 

webpack-dev-server 설치 (package.json에서 확인 가능)

webpack-dev-server - 빠른 실시간 리로드 기능을 갖춘 개발 서버

npm i -D webpack-dev-server

 


package.json에 webpack 명령어 등록

{
  "name": "gugudan",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-loader": "^8.1.0",
    "react-refresh": "^0.9.0",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "description": ""
}

 

7. webpack.config.js 파일 생성

const path = require("path"); - node에서 제공하는 경로 관련 모듈
path.join(a, b) - 경로 a, b를 합쳐줌
__dirname - 현재 폴더 

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

module.exports = {
  mode: "development",
  devtool: "eval",
  resolve: {
    extensions: [".jsx", ".js"],
  },

  devServer: {
    historyApiFallback: true,
    publicPath: "/dist/",
    host: "127.0.0.1",
    contentBase: path.join(__dirname, "/"),
    compress: true,
    hot: true,
    port: 9000,
    open: true,
  },

  entry: {
    app: "./client",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["> 5% in KR", "last 2 chrome versions"],
                },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: [
            "@babel/plugin-proposal-class-properties",
            "react-refresh/babel",
          ],
        },
      },
    ],
  },
  plugins: [new RefreshWebpackPlugin()],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
    publicPath: "/dist/",
  },
};



8. client.jsx 파일 생성

// html에서 script로 불러오던 내용을 node의 모듈 시스템으로 불러옴
const React = require('react');
const ReactDOM = require('react-dom');

// 컴포넌트를 쪼개서 필요한것만 불러와서 사용
const GuGuDan = require('./GuGuDan');

ReactDOM.render(<GuGuDan />, document.querySelector('#root'));

 

 

9. index.html 파일 생성

<html>
  <head>
    <meta charset="UTF-8" />
    <title>구구단</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- webpack을 통해 만들어진 app.js를 호출 -->
    <script src="./dist/app.js"></script>
  </body>
</html>

 

 

10. 구구단 파일 생성

const React = require("react");
const { useState, useRef } = React;

const GuGuDan = () => {
  const [first, setFirst] = useState(Math.ceil(Math.random() * 9));
  const [second, setSecond] = useState(Math.ceil(Math.random() * 9));
  const [value, setValue] = useState("");
  const [result, setResult] = useState("");
  const inputRef = useRef(null);

  const onSubmitForm = (e) => {
    e.preventDefault();
    if (parseInt(value) === first * second) {
      setResult("정답: " + value);
      setFirst(Math.ceil(Math.random() * 9));
      setSecond(Math.ceil(Math.random() * 9));
      setValue("");
    } else {
      setResult("땡");
      setValue("");
    }
    inputRef.current.focus();
  };

  const onChangeInput = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <div>
        {first} 곱하기 {second}는?
      </div>
      <form onSubmit={onSubmitForm}>
        <input ref={inputRef} onChange={onChangeInput} value={value} />
        <button>입력!</button>
      </form>
      <div id="result">{result}</div>
    </>
  );
};

module.exports = GuGuDan;


11. 웹팩 실행

npm run dev

 

11. http://127.0.0.1:9000/ 실행 (default 주소 : localhost:8080 ) 

 

해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.

 

 

저작자표시

'React' 카테고리의 다른 글

[React] 배열값 변경, 렌더링  (0) 2020.11.05
[React] 반복문, map  (0) 2020.11.05
[React] Hooks, 코드 비교  (0) 2020.11.05
[React] 구구단, <React.Fragment>, e.preventDefault, prevState,  (0) 2020.11.04
[React] state 변경, babel로 jsx코드 실행  (0) 2020.11.04

검색 태그

티스토리툴바