[웹 게임을 만들며 배우는 React] 2장

className

리액트를 사용하면서 <div className=""></div> 처럼 className 으로 css class이름을 정해주곤 했다.

왜 그런지 이유를 알게 되어 기록한다.

className 인 이유는 class 로 할경우 자바스크립트 class 와 중복되기 때문에 className 으로 정해진 것이고,

비슷하게 for 속성도 htmlFor 로 정해졌다.

웹팩 설정

npm init

npm i react react-dom

npm i -D webpack webpack-cli

우선 WordRelay.jsx 파일을 만들어주었다.

const React = require("react");
const { Component } = React;
class WordRelay extends Compnent {
  state = {};

  render() {}
}

module.exports = WordRelay;

module.exports 가 있어야 외부에서 import 할 수 있다.

client.jsx

아까 만든 WordRelay를 import 해준다.

const React = require("react");
const ReactDom = require("react-dom");

const WordRelay = require("./WordRelay");

ReactDom.render(<WordRelay />, document.querySelector("#root"));

Babel.config

const path = require("path"); // path는 node 에서 기본적으로 제공하는 모듈

module.exports = {
  name: "wordRelay-setting",
  mode: "development", // 실서비스: production
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"], // resolve 를 적어줌으로써 entry에서 확장자명 생략 가능
  },
  entry: {
    app: ["./client"],
  }, // 입력
  output: {
    path: path.join(__dirname, "dist"), // /Volumes/T7/DongYoung/Interactive_front/zerocho_webgame/ch2/dist
    filename: "app.js",
  }, // 출력
};

package.json

webpack script를 추가해준다.

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack"
  },
  ...
}

이제 실행하면 다음과 같은 오류가 발생하는데 이는 웹팩에 바벨설정을 하지 않아서이다.

자바스크립트는 바벨 설정을 해주지 않으면 JSX 를 해석할 수 없다.

@babel/core

바벨의 기본적인 모듈 , 최신문법을 바꿔준다.

@babel/preset-env

자신의 브라우저에 맞게 js 문법을 바꿔준다.

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

@babel/preset-react

JSX 문법을 지원할 수 있도록 하는 바벨

npm i -D @babel/preset-react

babel-loader

바벨과 웹팩을 연결한다.

npm i -D babel-loader

Babel.config 에 module을 추가해준다.

module: {
    rules: [
      {
        test: /\.jsx?/, //js와 jsx 에 babel-loader가 적용된다.
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    ],
  },

넣어준 Babel.config

const path = require("path"); // path는 node 에서 기본적으로 제공하는 모듈

module.exports = {
  name: "wordRelay-setting",
  mode: "development", // 실서비스: production
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"], // resolve 를 적어줌으로써 entry에서 확장자명 생략 가능
  },
  entry: {
    app: ["./client"],
  }, // 입력

  module: {
    rules: [
      {
        test: /\.jsx?/, //js와 jsx 에 babel-loader가 적용된다.
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
        },
      },
    ],
  },
  output: {
    path: path.join(__dirname, "dist"), // /Volumes/T7/DongYoung/Interactive_front/zerocho_webgame/ch2/dist
    filename: "app.js",
  }, // 출력
};

Babel 실행

스크립트에 추가하는 방법도 있지만, npx babel 로 가능하다.

Bebel을 사용하는 이유

많은 파일을 하나의 파일로 합쳐주고 html 이 실행할 수 있도록 해준다.
최신문법들을 옛날 브라우저에서도 돌아가도록 만들어준다.

babel/preset-env 옵션 주기

다음처럼 preset-env 의 옵션으로 한국에서 5% 이상되는 브라우저와 같은 옵션을 넣을 수 있다.

  module: {
    rules: [
      {
        test: /\.jsx?/, //js와 jsx 에 babel-loader가 적용된다.
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["> 5% in KR", "last 2 chrome versions"],
                },
              },
            ],
            "@babel/preset-react",
          ],
        },
      },
    ],
  },

https://github.com/browserslist/browserslist

GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint a

🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env - GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-en...

github.com

Babel.config 중간 업데이트

const path = require("path"); // path는 node 에서 기본적으로 제공하는 모듈
const webpack = require("webpack");

module.exports = {
  name: "wordRelay-setting",
  mode: "development", // 실서비스: production
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"], // resolve 를 적어줌으로써 entry에서 확장자명 생략 가능
  },
  entry: {
    app: ["./client"],
  }, // 입력

  module: {
    rules: [
      {
        test: /\.jsx?/, //js와 jsx 에 babel-loader가 적용된다.
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["> 1% in KR"],
                },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
        },
      },
    ],
  },
  plugins: [new webpack.LoaderOptionsPlugin({ debug: true })], // 바로 위 rules의 loader의 option에 debug를 true 로 넣어준다. 28번줄 코드처럼 말이다.
  output: {
    path: path.join(__dirname, "dist"), // /Volumes/T7/DongYoung/Interactive_front/zerocho_webgame/ch2/dist
    filename: "app.js",
  }, // 출력
};

리액트 핫 리로딩

핫 리로딩에 사용되는 모듈 2개

npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D

프론트 개발용 서버

npm i -D webpack-dev-server

package.json 에 스크립트 추가

dev 스크립트를 추가하였다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack",
    "dev": "webpack serve --env development"
  },

webpack.config 에 적용

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

...

  module: {
    rules: [
      {
        ...
          plugins: ["react-refresh/babel"],
        },
      },
    ],
  },
  plugins: [
    ...
    new RefreshWebpackPlugin(),
  ], 
...
  devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    // 만약 index.html 이 다른 src 폴더 안에 있다면
    // static: { directory: path.resolve(__dirname), 'src' },
    hot: true,
  },
};

전체코드

const path = require("path"); // path는 node 에서 기본적으로 제공하는 모듈
const webpack = require("webpack");
const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
module.exports = {
  name: "wordRelay-setting",
  mode: "development", // 실서비스: production
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"], // resolve 를 적어줌으로써 entry에서 확장자명 생략 가능
  },
  entry: {
    app: ["./client"],
  }, // 입력

  module: {
    rules: [
      {
        test: /\.jsx?/, //js와 jsx 에 babel-loader가 적용된다.
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["> 1% in KR"],
                },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: ["react-refresh/babel"],
        },
      },
    ],
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({ debug: true }),
    new RefreshWebpackPlugin(),
  ], // 바로 위 rules의 loader의 option에 debug를 true 로 넣어준다. 28번줄 코드처럼 말이다.
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
    publicPath: "/dist",
  },
  devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    // 만약 index.html 이 다른 src 폴더 안에 있다면
    // static: { directory: path.resolve(__dirname), 'src' },
    hot: true,
  },
};

웹팩 설정하다 생긴 오류

https://www.inflearn.com/questions/294452

webpack server(localhost:8080)에서 Cannot Get / 만 나옵니다. - 인프런 | 질문 & 답변

안녕하세요 제로초님, 이 문제를 해결하기 위해서 공식 문서도 찾아보고 하루종일 고민했지만 , 도저히 해결하기 어려워 문의 남깁니다. 2강 '웹팩 데브 서버와 핫 리로딩' 부분을 보고 따라하

www.inflearn.com

저작자표시

'공부기록 > 웹 개발' 카테고리의 다른 글

[웹 게임을 만들며 배우는 React] 3장 (0)	2022.08.25
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. (0)	2022.08.25
[웹 게임을 만들며 배우는 React] 1장 (0)	2022.08.24
javascript super (0)	2022.08.24
ios 스크롤 바운스 (0)	2022.08.16