<div id="readability-page-1" class="page"><div><h2 id="웹-게임을-만들며-배우는-react-2강">웹 게임을 만들며 배우는 React 2강</h2>
강의 내용을 정리한 포스팅입니다.
<h2 id="-웹팩">📌 웹팩</h2>
<hr>
<ul>
<li>
웹팩을 왜 사용할까요?
<ul>
<li>2만개의 컴포넌트 자바스크립트 파일을 하나로 합치고 바벨까지 적용하는 것</li>
<li>스크립트의 중복성을 제거할 수 있다.</li>
</ul>
</li>
<li>
웹팩을 하기 위해서는 Node를 사용해야한다.
터미널에서 <code>하이픈(-D)</code> 개발에서만 사용한다.
</li>
</ul>
<h3 id="웹팩-설치세팅">웹팩 설치(세팅)</h3>
<ul>
<li>
리액트 설치
<pre><code>npm i react react-dom</code></pre>
</li>
<li>
웹팩 설치
<pre><code>npm i -D webpack webpack-cli	</code></pre>
<blockquote>
터미널에서 <code>하이픈(-D)</code> 개발에서만 사용한다. 실제 서비스에서는 웹팩을 사용하지 않는다.
</blockquote>
</li>
</ul>
<hr>
<h3 id="웹팩-설정">웹팩 설정</h3>
<pre><code>// 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' // 우리가 원하는 아웃풋 할 파일
	}, // 출력
};
</code></pre>
<blockquote>
웹팩은 다른 파일이 불러오는 파일은 따로 적어 줄 필요가 없다. 웹팩이 알아서 추적해서 같이 불러온다. 
확장자 또한 작성을 하지 않아도 된다.
</blockquote>
<blockquote>
entry에 module을 적용해서 output으로 뺀다.
</blockquote>
<blockquote>
rules는 규칙을 나열하기 때문에 배열로 작성한다.
</blockquote>
<h2 id="-웹팩으로-빌드하기">📌 웹팩으로 빌드하기</h2>
<pre><code>// package.json

script:{
	dev: webpack
} // 스크립트를 사용해서 npm run dev식으로 실행 할 수 있다. 또는 npx webpack 식으로도 가능하다.</code></pre>
<ul>
<li>jsx는 자바스크립트 문법이 아니다.</li>
<li>그렇기 때문에 웹팩을 통한 빌드를 하기 위해서는 jsx 처리해야하고 jsx를 처리하기 위해서는 <code>babel</code> 설정을 해야한다.</li>
</ul>
바벨 설정
<pre><code>npm i @babel/core</code></pre>
<blockquote>
바벨의 코어
</blockquote>
<pre><code>npm i @babel/preset-env</code></pre>
<blockquote>
최신 문법을 브라우저에 맞게 맞춰준다.
</blockquote>
<pre><code>npm i @babel/preset-react</code></pre>
<blockquote>
JSX를 지원한다.
</blockquote>
<pre><code>npm i babel-loader</code></pre>
<blockquote>
바벨이랑 웹팩을 연결 해준다.
</blockquote>
<pre><code>npm i -D @babel/plugin-proposal-class-properties</code></pre>
<h2 id="babelpreset-env와-plugins">@Babel/preset-env와 plugins</h2>
<code>preset</code>은 플러그인들의 모음이다.
<pre><code>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'],
			} // 바벨의 옵션 적용
		}],
	},</code></pre>
<a href="https://github.com/browserslist/browserslist">https://github.com/browserslist/browserslist</a>
브라우저List 옵션으로 통해 크로스 브라우저 인터넷 문제를 해결할 수 있다.
실무에서 웹팩을 마주했을 때 플러그인과, rules를 빼고 디버깅해서 추적해 나간다.
<blockquote>
react jsx에서의 form 태그에서는 <code>value</code>와 <code>onChange</code>가 세트이다.
</blockquote>
<h2 id="-웹팩-데브서버와-핫-리로딩">📌 웹팩 데브서버와 핫 리로딩</h2>
<pre><code>npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D</code></pre>
<ul>
<li>개발용 서버</li>
</ul>
<pre><code>npm i -D webpack-dev-server</code></pre>
<ul>
<li>
패키지 json
<pre><code>{
 "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"
 }
}</code></pre>
<blockquote>
"dev": "webpack serve --env development"
</blockquote>
</li>
<li>
핫 리로딩 웹팩 설정
<pre><code>// 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
 }
};</code></pre>
</li>
<li>
<code>리로딩과 핫리로딩의</code> 차이점: 리로딩은 말 그대로 새로고침이다. 새로고침을 하면 기존의 데이터가 모두 날라간다. 핫 리로딩은 기존 데이터를 유지하면서 화면을 바꾸어준다.
</li>
</ul></div></div>

TheJang story

웹 게임을 만들며 배우는 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
    }
  };
리로딩과 핫리로딩의 차이점: 리로딩은 말 그대로 새로고침이다. 새로고침을 하면 기존의 데이터가 모두 날라간다. 핫 리로딩은 기존 데이터를 유지하면서 화면을 바꾸어준다.

[React] 바벨과 웹팩을 통한 설정

댓글