[React] 2-6 구구단 웹팩으로 빌드하기

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

https://somang-dev.tistory.com/67 

[React] 1-7 (클래스 메서드 )구구단 리액트로 만들기(2)

리액트로 만들었던 구구단을 이번엔 웹팩을 이용해 만들어본다.

 

먼저 웹팩을 사용할 수 있는 환경으로 만들어주자

1. npm init

2. npm i react react-dom 

3. npm i -D webpack-cli

4. npm i babel-loder (나는 이상하게 같이 설치하려면 오타때문에 잘 안되서 따로 하는편..)

5. npm i -D @babel/core @babel/preset-env @babel/preset-react

 

이렇게 세팅을 해주었다면 모든 설정은 끝났다! 

숙제 안한사람의 깨끗한 폴더

webpack.config.js파일을 만들어주자 

다른이름으로 할때는 다른 설정을 붙여줘야하기에 기본적으로는 webpack.config라는 이름을 사용해야한다고 한다.

 

webpack.config의 기본형태 

module.exports={ 
    entry:{

    },
    module : {
        rules: [{

        }],
    },
    output :{

    },
}

 

webpack.config에서 셋팅을 해주고

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/env',
                    '@babel/react'
                ],
            },
        }],
    },
    output :{
        filename : 'app.js',
        path : path.join(__dirname,'dist'),
    },
} // 예전에 했던 세팅들이 재탕되는즁 ))

 

client.js

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

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

 

저번에 만들어둔 구구단 코드를 복붙해준다.

GuGuDan.jsx 

 

const React = require('react');
const ReactDOM = require('react-dom');
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 inputRef = useRef(null); // ref

    const onChangeInput =(e) => {
        setValue(e.target.value); 
    };

    const onSubmitForm = (e) => {
        e.preventDefault();
        if (parseInt(this.state.value) === this.state.first * this.state.second) {
            setReault('정답: ' + value);
            setFirst(Math.ceil(Math.random() * 9));
            setSecond(Math.ceil(Math.random() * 9));
            setValue('');
            inputRef.current.focus();
        }else {
            setResult('땡');
            setVlaue('');
            inputRef.current.focus();
        }
    }

    return (
        <>  {/* <- fragment 대신 사용할 수있음 */}
            <div>{first} 곱하기 {second} </div>
            <form onSubmit={onSubmitForm}>
                <input ref={inputRef} onChange={onChangeInput} value={value}/>
                <button> 입력! </button> 
            </form>
            <div id="result">{result}</div>
        </>
    );
}

module.exports= GuGuDan;

 

그러곤서 npx webpack(or npm run dev)를 해주면

dist폴더안에 app.js가 생겨있는 것을 볼 수 있다.

이 두개의 파일을 이용해서 app.js를 만들어냈다는 뜻! 

 

** 여기서 만약 npx webpack실행시 오류가 난다면 ? 

https://somang-dev.tistory.com/72

[React 오류 ] npx webpack이 안되는데요?