구구단 웹팩 적용
- npm init
- npm install react react-dom
- npm install -D webpack webpack-cli
- dist디렉토리 생성
- index.html파일 생성
<html>
<head>
<meta charset="utf-8">
<title>구구단-웹팩</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script> <!--웹팩이 압축한 파일 로드-->
</body>
</html>- client.jsx파일 생성
const React = require('react');
const ReactDom = require('react-dom');
const Gugudan = require('./Gugudan'); //불러올 컴포넌트
ReactDom.render(<Gugudan />, document.getElementById('root')); //렌더링- Gugudan.jsx파일 생성
const React = require('react');
const GuGuDan = () => {
const [firstNumber, setFirstNumber] = React.useState(Math.ceil(Math.random() * 9));
const [secondNumber, setSecondNumber] = React.useState(Math.ceil(Math.random() * 9));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputRef = React.useRef(null);
const changeText = (e) => {
setValue(e.target.value);
}
const submit = (e) => {//onSubmit 핸들링 콜백 함수
e.preventDefault();
if (firstNumber * secondNumber === parseInt(value)) {
setFirstNumber(Math.ceil(Math.random() * 9));
setSecondNumber(Math.ceil(Math.random() * 9));
setValue('');
setResult(value + ' 정답!');
} else {
setValue('');
setResult(value + ' 땡!');
}
inputRef.current.focus();
// this.input.focus();//커서를 인풋 엘리먼트로 설정
}
return (
<React.Fragment>
<h3>구구단 게임</h3>
<div>{firstNumber}곱하기 {secondNumber}</div>
<form onSubmit={submit}>
<input type="number"
value={value}
ref={inputRef}
onChange={changeText}/>
<button>입력</button>
</form>
<div>{result}</div>
</React.Fragment>
);
}
module.exports = GuGuDan;- webpack.config.js파일 생성
const path = require('path');
module.exports = {
name : 'Gugudan-webpack-setting', //웹팩 이름
mode : 'development', //실서비스는 production
devtool : 'eval',
resolve : { //확장자를 생략하기 위한 설정
extensions : ['.js', '.jsx'] //여기에 확장자를 적어줌
},
module : {
rules : [
{
test: /\.jsx?/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: ['@babel/plugin-proposal-class-properties'],
},
},
],
},
entry : {
app : ['./client'] //client.jsx에서 불러오는 모듈은 안적어줘도 자동으로 같이 패킹함
}, //입력 파일 설정
output : {
path : path.join(__dirname,'dist'), //현재디렉토리 + dist
filename : 'app.js'
}, //출력 파일 설정
};- npx webpack
테스트 성공!
국물을 달라