웹팩을 왜 사용할까?
- 여러개의 자바스크립트 파일을 한번에 합쳐서 하나의 자바스크립트의 파일로 만들어줌.
- 하나로 합치면서 바벨도 적용할 수 있고 쓸데 없는 코드들 없앨 수 도 있다.
node: 자바스크립트 실행기
package.json이 생김
여기에다가 react 개발에 필요한 모든 패키지들을 넣어주면 됨!
npm으로 react, react-dom webpack, babel 설치하기
- babel 설치
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
+npm i -D @babel/plugin-proposal-class-properties
+webpack.config.js에 plugins: ['@babel/plugin-proposal-class-properties'] 추가
package.json 내용
쪼개서 코드 작성하기
const React = require('react');
const { Component } = React;
class WordRelay extends Component {
state = {
};
render() {
}
}
module.exports = WordRelay;- 쪼개서 코드를 작성하면 개발하기 편해짐
문제는 html에서 인식하는 거 src에는 딱 하나의 파일만 넣을 수 있음- 파일을 하나로 합쳐줘야하는데 여기서
webpack등장!
웹팩은 webpack.config.js에서 모든게 돌아감
webpack.config.js 설정
const path=require('path')//node에서 경로 조작하는 것
module.exports={
name:'wordrelay-setting',//끝말잇기 설정할래~
mode: 'development', //실서비스:production
devtool:'eval',
resolve: {
extension: ['.js','.jsx']
},
//entry와 output이 젤 중요!
entry:{
//입력
app:['./client'],
//client.jsx가 WordRelay.js 불러오기때문에 WordRelay.js 안 적어줘도 됨
//확장자도 안적어줘도 됨 => resolve 사용
},
module:{
rules: [{
test:/\.jsx?/,//정규표현식 js파일이랑jsx 파일을 이 rule을 적용하겠다.
loader: 'babel-loader',
options:{
presets:['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties']
}
}]
},
output:{
//출력
path: path.join(__dirname, 'dist'), //join: 경로를 알아서 합쳐줌 >현재 폴더안에 dist
filename: 'app.js'
},
};webpack 실행시켜주려고 입력하면 !
명령어로 등록이 안되어 있어 오류남..
1.package.json안의 script부분에 dev:"webpack" 추가 후
npm run dev로 실행시키기
"scripts": {
"test": "echo \"Error: ...",
"dev": "webpack"
},
2.npx webpack으로 실행 시키기
webpack이 실행되면dist파일안에app.js파일이 생겨져 있음!
+plugins
webpack에서 중요한 세가지라고 했던 것은
- entry
- module
- output
pugins:[] //확장 프로그램
추가적으로 무언가 하고 싶을 때 사용
ex) plugins: [ new webpack.LoaderOptionsPlugin({debug:true}) ]
webpack에서 알아야할 5 가지
- mode
- entry
- module
- output
- plugins
끝말잇기 게임 만들기
자동 빌드 하는 법
-
npm i -D webpack-dev-server와
npm i -D react-hot-loader설치 -
package.json에서"scripts": {"dev": "webpack-dev-server --hot"}추가 -
client.jsx에서const { hot } = require('react-hot-loader/root');불러와서const Hot = hot(WordRelay);한 후ReactDom.render(<Hot />, doc ..); -
webpack.config.js에서 babel-loader option의 plugins에 추가plugins: ['@babel/plugin-proposal-class-properties', 'react-hot-loader/babel',] -
index.html에서<script src="./app.js"></script>로 변경 (dist 빼기)
class로 만든 끝말잇기 게임
//WordRelay.jsx
const React = require('react');
const { Component } = React;
class WordRelay extends Component {
state = {
word:'김지원',
value:'',
result:'',
};
onSubmitForm =(e) => {
e.preventDefault();
if (this.state.word[this.state.word.length - 1] === this.state.value[0]) {
this.setState({
result: '딩동댕',
word: this.state.value,
value: '',
});
this.input.focus();
} else {
this.setState({
result: '땡',
value: '',
});
this.input.focus();
}
};
onChangeInput = (e) => {
this.setState({value: e.target.value});
};
input;
onRefInput = (c) => {
this.input = c;
};
render() {
return(
<>
<div>{this.state.word}</div>
<form onSubmit={this.onSubmitForm}>
<input ref={this.onRefInput} value={this.state.value} onChange={this.onChangeInput} />
<button>입력!</button>
</form>
<div>{this.state.result}</div>
</>
)
}
}
module.exports = WordRelay;//client.jsx
const React = require('react');
const ReactDom = require('react-dom');
const { hot } = require('react-hot-loader/root');
const WordRelay = require('./WordRelay');
const Hot = hot(WordRelay);
ReactDom.render(<Hot />, document.querySelector("#root"));//webpack.config.js
const path=require('path')//node에서 경로 조작하는 것
module.exports={
name:'wordrelay-setting',//끝말잇기 설정할래~
mode: 'development', //실서비스:production
devtool:'eval',
resolve: {
extensions: ['.js','.jsx']
},
//entry와 output이 젤 중요!
entry:{
//입력
app:['./client'],
//client.jsx가 WordRelay.jsx 불러오기때문에 WordRelay.jsx 안 적어줘도 됨
//확장자도 안적어줘도 됨 => resolve 사용
},
module:{
rules: [{
test:/\.jsx?/,//정규표현식 js파일이랑jsx 파일을 이 rule을 적용하겠다.
loader: 'babel-loader',
options:{
presets:[['@babel/preset-env', {
targets:{
browsers:['> 1% in KR'],//browserlist
},
debug:true,
}],
'@babel/preset-react',
],
plugins: ['@babel/plugin-proposal-class-properties',
'react-hot-loader/babel',
]
}
}]
},
output:{
//출력
path: path.join(__dirname, 'dist'), //join: 경로를 알아서 합쳐줌 >현재 폴더안에 dist
filename: 'app.js'
},
};hooks로 변경하기!
-
class ->
화살표 함수로 변경 -
state를
const{ useState, useRef } =React;와const[word, setWord] = useState('김지원');이렇게 변경 -
ref는
const inputRef = useRef(null);선언 후current항상 붙여서 사용inputRef.current.focus(); -
class 메소드에다가
const붙이기const onSubmitForm =(e) => {... -
render()지우기 //Q.왜징?? -
this.state.word를word로 변경 -
setState안쓰고setValue사용
hooks 끝말잇기 코드
const React = require('react');
const{ useState, useRef } = React;
const WordRelay = () => {
const[word, setWord] = useState('김지원');
const [value, setValue] = useState('');
const [result, setResult] = useState('');
const inputRef = useRef(null);
const onSubmitForm =(e) => {
e.preventDefault();
if (word[word.length - 1] === value[0]) {
setResult('딩동댕');
setWord(value);
setValue('');
inputRef.current.focus();
} else {
setResult('땡');
setValue('');
inputRef.current.focus();
}
};
const onChangeInput = (e) => {
setValue(e.target.value);
};
return(
<>
<div>{word}</div>
<form onSubmit={onSubmitForm}>
<input ref={inputRef} value={value} onChange={onChangeInput} />
<button>클릭!</button>
</form>
<div>{result}</div>
</>
);
}
module.exports = WordRelay;