<script type="text/babel">
'use strict';
const GuGuDan = () => {
const [first, setFirst] = React.useState()
return (
<div>hello, Hooks</div>
)
}
</script>
<script type="text/babel">
ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
</script>=> 지금처럼 하나의 component를 만들려면 script가 굉장히 많이 만들어져야한다.
=> 몇년전 강의라서 강의 안에서 facebook의 컴포넌트 개수가 2만개 이상이라고 표현 됐는데 지금 검색해보니
2022/12/25 기준으로 5만개 이상의 컴포넌트가 존재한다고 한다.
이 수많은 컴포넌트들을 위해 script가 존재하면 유지보수 및 효율성 관리가 불가능해짐...
이 안에서 똑같은 코드들(중복) 역시 반복됨.
이것들을 하나의 js 파일로 합쳐주는게 바로 webpack
========
아래의 작업은 CRA를 할 경우 볼 수 없는 코드들이다.
(뒤져보면 어딘가에 있겠지만)
아무튼,
webpack 실습을 시작해보자
npm initnpm i -D webpack webpack-cli=> -D는 개발할때만 쓰겠다.
=> 실제 서비스에서는 webpack이 필요없다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>끝말잇기</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}=> 팁으로
내부에 명령을 찾을 수 없습니다.
에러를 해결하는 방법으로
1. 전체 컴퓨터 설정(shell script) 작성하는 것
2. 위의 코드 처럼 scripts에 명령어를 작성해주는 것
"scripts": {
"dev": "webpack"
},- 그리고 마법의 단어 npx
npx webpack 하면 명령어 먹음
webpack.config.js
const path = require('path');
module.exports = {
name: 'wordrelay-setting',
mode: 'development',
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx']
},
entry: {
app: ['./client'],
}, // 입력
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js',
} // 출력
}=> entry가 묶어줄 파일들을 작성해주는 것
jsx, js 파일을 타입까지 써주긴 하는데 추후 html 등등 많아질 예정이니 위에 resolve>extensions 로 파일 형식을 나열해 처리해준다.
=> output은 dist 폴더에 app.js 파일로 모아서 만들어줌 그걸 index.html에서 사용한다.
=> 여기에 사용된 path는 node 에 함께 있는 pakage로 node.js 백엔드를 구성할때도 파일 형식이나 위치를 이용할때 많이 사용되는 패키지임.
그러면 이제 이런 에러가 뜰텐데
client.jsx
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay');
ReactDom.render(<WordRelay />, document.querySelector('#root'))=> 이 에러는 jsx 파일에서 < 태그 형식의 코드를 이해 못해서 발생하는 에러임.
=> 이걸 해결해주는게 babel이고 이제 babel을 설정하러 갈 것.
npm i -D @babel/core @babel/preset-env babel-loader @babel/preset-react{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.20.7",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}@babel/core
=> babel의 기본적인거 들어있는것
@babel/preset-env
=> 최신 문법을 옛날 문법만을 지원하는 환경에서도 적용가능하게끔 바꿔주는 것
그래서 옵션을 상세히 추가할수도 있음
module: {
rules: [{
test: /\.jsx?/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: {
browsers: ['> 5% in KR', 'last 2 chrome versions'],
}
}
], '@babel/preset-react'],
},
}],
},'> 5% in KR'
=> 한국에서 5%이상 점유 브라우저에서 적용
@babel/preset-react
babel-loader
=> babel이랑 webpack을 연결
이제 webpack.config.js 에서 entry와 output을 연결해주는 babel의 module을 추가해줌
=> options는 babel-loader의 옵션
const path = require('path');
module.exports = {
name: 'wordrelay-setting',
mode: 'development',
devtool: 'eval',
resolve: {
extensions: ['.js', '.jsx']
},
entry: {
app: ['./client'],
}, // 입력
module: {
rules: [{
test: /\.jsx?/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
}],
},
plugin: [],
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js',
} // 출력
}=> plugin 은 기타 추가되는 애들인데
=> 실무 코드를 보면 10개 넘게 있기도 하다
=> 각각 공부해보는 방법은 하나씩 빼보고 무슨 문제가 발생하는지 체크하는 것.
=> ㅋㅋ ;; 어쩔수 없음 rules도 역시.
