웹 게임을 만들며 배우는 React 2강

강의 내용을 정리한 포스팅입니다.

📌 웹팩

---

• 웹팩을 왜 사용할까요?

  • 2만개의 컴포넌트 자바스크립트 파일을 하나로 합치고 바벨까지 적용하는 것
  • 스크립트의 중복성을 제거할 수 있다.

• 웹팩을 하기 위해서는 Node를 사용해야한다.

  터미널에서 하이픈(-D) 개발에서만 사용한다.

웹팩 설치(세팅)

• 리액트 설치

  npm i react react-dom

• 웹팩 설치

  npm i -D webpack webpack-cli	

  터미널에서 하이픈(-D) 개발에서만 사용한다. 실제 서비스에서는 웹팩을 사용하지 않는다.

---

웹팩 설정

// webpack.config.js
const path = require('path');

module.exports = {
	name: 'wordrelay-setting',
	mode: 'development', // 실서비스: production
	devtool: 'eval', // 개발인 경우 eval, 프로던션인 경우 hidden-source-map
	resolve: {
		extensions, ['.js', '.jsx'], // js, jsx 파일이 있는지 알아서 찾아주는 옵션
	},

	entry: {
		app: ['./cleint'],
	}, // 입력

	module: {
		rules: [{
			test: /\.jsx?/,
			loader: 'babel-loader',
			options: { 
				presets: ['@babel/preset-env', '@babel/preset-react'],
				plugins: ['@babel/plugin-proposal-class-properties'],
			} // 바벨의 옵션 적용
		}],
	},
	ouput: {
		path: path.join(__dirname, 'dist'), // path.join()을 하면 앞의 절대경로를 맞춰준다. 현재 폴더에 
		filename: 'app.js' // 우리가 원하는 아웃풋 할 파일
	}, // 출력
};

웹팩은 다른 파일이 불러오는 파일은 따로 적어 줄 필요가 없다. 웹팩이 알아서 추적해서 같이 불러온다.
확장자 또한 작성을 하지 않아도 된다.

entry에 module을 적용해서 output으로 뺀다.

rules는 규칙을 나열하기 때문에 배열로 작성한다.

📌 웹팩으로 빌드하기

// package.json

script:{
	dev: webpack
} // 스크립트를 사용해서 npm run dev식으로 실행 할 수 있다. 또는 npx webpack 식으로도 가능하다.

• jsx는 자바스크립트 문법이 아니다.
• 그렇기 때문에 웹팩을 통한 빌드를 하기 위해서는 jsx 처리해야하고 jsx를 처리하기 위해서는 babel 설정을 해야한다.

바벨 설정

npm i @babel/core

바벨의 코어

npm i @babel/preset-env

최신 문법을 브라우저에 맞게 맞춰준다.

npm i @babel/preset-react

JSX를 지원한다.

npm i babel-loader

바벨이랑 웹팩을 연결 해준다.

npm i -D @babel/plugin-proposal-class-properties

@Babel/preset-env와 plugins

preset은 플러그인들의 모음이다.

module: {
		rules: [{
			test: /\.jsx?/,
			loader: 'babel-loader',
			options: { 
				presets: [
					['@babel/preset-env', {
							targets: {
								browsers: ['last 2 chrome versions'], // 크롬 버전 호환
							},
					}],
					'@babel/preset-react'
					],
				plugins: ['@babel/plugin-proposal-class-properties'],
			} // 바벨의 옵션 적용
		}],
	},

https://github.com/browserslist/browserslist

브라우저List 옵션으로 통해 크로스 브라우저 인터넷 문제를 해결할 수 있다.

실무에서 웹팩을 마주했을 때 플러그인과, rules를 빼고 디버깅해서 추적해 나간다.

react jsx에서의 form 태그에서는 value와 onChange가 세트이다.

📌 웹팩 데브서버와 핫 리로딩

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

• 개발용 서버

npm i -D webpack-dev-server

• 패키지 json

  {
    "name": "word-relay",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "dev": "webpack serve --env development"
    },
    "author": "jangwonyoon",
    "license": "ISC",
    "dependencies": {
      "react": "^17.0.1",
      "react-dom": "^17.0.1"
    },
    "devDependencies": {
      "@babel/core": "^7.12.3",
      "@babel/preset-env": "^7.12.1",
      "@babel/preset-react": "^7.12.1",
      "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
      "babel-loader": "^8.1.0",
      "react-refresh": "^0.10.0",
      "webpack": "^5.3.2",
      "webpack-cli": "^4.1.0",
      "webpack-dev-server": "^3.11.0"
    }
  }

  "dev": "webpack serve --env development"

• 핫 리로딩 웹팩 설정

  // webpack.config.js
  
  const path = require('path');
  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
  
  module.exports = {
    name: 'word-relay-dev',
    mode: 'development',
    devtool: 'inline-source-map',
    resolve: {
      extensions: ['.js', '.jsx'],
    },
    entry: {
      app: './client',
    },
    module: {
      rules: [{
        test: /\.jsx?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', {
              targets: {browsers: ['last 2 chrome versions']},
              debug: true,
            }],
            '@babel/preset-react',
          ],
          plugins: ['react-refresh/babel'],
        },
        exclude: path.join(__dirname, 'node_modules'),
      }],
    },
    plugins: [
      new ReactRefreshWebpackPlugin(),
    ],
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'app.js',
      publicPath: '/dist',
    },
    devServer: {
      publicPath: '/dist',
      hot: true
    }
  };

• 리로딩과 핫리로딩의 차이점: 리로딩은 말 그대로 새로고침이다. 새로고침을 하면 기존의 데이터가 모두 날라간다. 핫 리로딩은 기존 데이터를 유지하면서 화면을 바꾸어준다.