예제코드 웹펙으로 빌드(구구단)

npm 명령어를 통해서 웹펙으로 빌드해준다.

npm i react react-dom

npm i -D webpack webpack-cli

npm i -babel-loader @babel/core

npm i -D @babel/preset-env

npm i -D @babel/preset-react

webpack.config.js 작성해준다.

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: 'eval', // hidden-source-map
    resolve: {
        extensions: ['.jsx', '.js']
    },

    entry: {
        app: './client',
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
            },
        }],
    },
    output: {
        filename: 'app.js',
        path: path.join(__dirname, 'dist'),
    },
};

 

package.json 파일에서 script부분 dev webpack로 변경

"scripts": {
    "dev": "webpack"
  },

 

앞전에 gugudan.html에서 만든 const 부분을 가져와서 gugudan.jsx에 붙여넣어준다.

그리고 require코드 추가.

// gugudan.jsx

const React = require('react');

 

client.jsx파일에 코드 추가

const React = require('react');
const ReactDOM = require('react-dom');

const GuGuDan = require('./GuGuDan');

ReactDOM.render(<GuGuDan />, document.querySelector('#root'));

파일을 쪼갰으므로  gugudan.jsx에 module.export를 추가

그리고 useState, useRef를 넣어서 반복되는 React문구 삭제

// gugudan.jsx

const React = require('react');
const { useState, useRef } = React;

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 inputEl = useRef(null);

    const onSubmitForm = (e) => {
        e.preventDefault();
        if (parseInt(value) === first * second) {
            setResult('정답');
            setFirst(Math.ceil(Math.random() * 9));
            setSecond(Math.ceil(Math.random() * 9));
            setValue('');
            inputEl.current.focus();
        } else {
            setResult('땡');
            setValue('');
            inputEl.current.focus();
        }
    };
    return (
        <>
            <div>{first} 곱하기 {second}는?</div>
            <form onSubmit={onSubmitForm}>
                <input
                    ref={inputEl}
                    type="number"
                    value={value}
                    onChange={(e) => setValue(e.target.value)}
                />
                <button>입력!</button>
            </form>
            <div id="result">{result}</div>
        </>
    );
};

module.exports = GuGuDan;

 

명령어 실행하면 dist 폴더에 app.js파일이 생성

npm run dev

index.html 파일 생성후 구구단 프로젝트 생성

 

 

 

 

 

 

 

 

 

<출처 조현영: 웹 게임을 만들며 배우는 React>

https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의