React 기본 학습 -2. Webpack 도입 및 설정 - 구구단 예제
리액트 강좌를 보면서 학습한 내용 정리용.
Webpack 도입 및 설정 - 구구단 예제
package.json
{
"name": "gugudan",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"dependencies": {
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"babel-loader": "^8.2.1",
"webpack": "^5.5.0",
"webpack-cli": "^4.2.0"
}
}
- @babel/core : 최신문법 바꿔주는거
- @babel/plugin-proposal-class-properties : babel 플러그인. class 문법 사용하기 위해 필요한거
- @babel/preset-env : 개인의 환경에 맞게 설정 바꿔주는거
- @babel/preset-react : jsx 변환해 주는거
- bable-loader : bable과 webpack 연결해주는거
webpack.config.js
webpack 설정
const path = require('path');
const webpack = require('webpack');
module.exports = {
name: 'gugudan-setting',
mode: 'development', // 실서비스: production
devtool: 'eval', // hidden-source-map
resolve: {
extensions: ['.js', '.jsx']
},
entry: {
app: ['./client'],
}, // 입력
module: {
rules: [{
test: /\.jsx?$/,
loader: 'babel-loader',
options: {
presets: [
// preset 에 상세 옵션 줄때 아래와 같이 설정 가능
['@babel/preset-env', {
targets: {
browsers: ['> 5% in KR'], // 한국에서 점유율 5% 이상 브라우저에 대응
},
debug: true,
}], '@babel/preset-react'], // plugin 들의 모음이 preset 임.
plugins: [], // babel-loder의 추가요소
},
}],
},
plugins: [
new webpack.LoaderOptionsPlugin({ debug: true }),
], // 추가적으로 붙이고 싶은 것들이 있으면 여기
output: {
path: path.join(__dirname, 'dist'), // path.join 은 현재폴더 경로 + dist 를 반환함
filename: 'app.js'
} // 출력
};
GuGuDan.jsx
const React = require('react');
const ReactDom = require('react-dom');
const { useState, useRef } = React;
// 이 선언으로 react.useState -> useState 로 사용 가능. 중복선언 생략가능.
const GuGuDan = () => {
// 변경이 발생하는 값의 선언
const [first, setFirst] = useState(Math.ceil(Math.random() * 9));
const [second, setSecond] = useState(Math.ceil(Math.random() * 9));
const [value, setValue] = useState('');
const [result, setResult] = useState('');
const inputRef = useRef(null); // ref
const onChangeInput = (e) => {
setValue(e.target.value);
};
const onSubmitForm = (e) => {
e.preventDefault();
if (parseInt(value) == first * second) {
setResult('정답 : ' + value);
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');
// inputRef
inputRef.current.focus();
} else {
setResult('땡');
setValue('');
inputRef.current.focus();
}
};
return (
<React.Fragment>
<div>{first} 곱하기 {second}는?</div>
<form onSubmit={onSubmitForm}>
<input ref={inputRef} onChange={onChangeInput} value={value}/>
<button>입력!</button>
</form>
<div id="result">{result}</div>
</React.Fragment>
);
}
// GuGuDan이 다른곳에서 쓰이려면 반드시 아래와 같이 선언해야함.
module.exports = GuGuDan;
주의!
- 리액트 안에서는 기존의 class -> className, for -> htmlFor 로 기입해야지 해당 속성대로 적용된다.
- 지금 높은 버전의 경우는 그냥 class, for 써도 되는 경우도 있다가 말다가 한다는듯. 그러므로 구분하도록 하는게 안전함.
client.jsx
const React = require('react');
const ReactDom = require('react-dom');
const GuGuDan = require('./GuGuDan');
ReactDom.render(<GuGuDan/>, document.querySelector('#root'));
index.html
<html>
<head>
<meta charset="UTF-8" />
<title>구구단</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>
GitHub : React-Study-1/1.구구단/
Pie's Tech Note
생계형 개발자의 메모장