webpack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>끝말잊기</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">

        const GUGU = () => {

            const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
            const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
            const [value, setValue] = React.useState('');
            const [result, setResult] = React.useState('');
            const inputRef = React.useRef(null);

           const onSubmitForm =  (e) => {

                e.preventDefault();
                if(parseInt(value) === first * second){
                    setResult((prevResult) => { 
                        return (`정답 ${value}`);
                    });
                    setFirst(Math.ceil(Math.random() * 9));
                    setSecond(Math.ceil(Math.random() * 9));
                    setValue('');
                    inputRef.current.focus();
                }else{
                    setResult(`오답 ${value}`);
                    setValue('');
                    inputRef.current.focus();
                }

            inputRef.current.focus();
            } 

         const  onChangeInput = (e) => {

                setValue(e.target.value);      
            }

            return( 
            <>  
                <div>{first} 곱하기 {second}  = ?</div>
                <form onSubmit={onSubmitForm}>
                <input ref={inputRef} onChange={onChangeInput} value={value} />
                <button>입력</button>
                </form>
                <div id="result">{result}</div>
            </>
            );
        }
    </script>

    <script type="text/babel">

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

    </script>
</body>
</html>

실제 배포할 때 react.production.js로 변경

1. npm init package.json 생성

2. npm i react react-dom 리액트 설치

3. npm i -D webpack webpack-cli (-D : 개발에서 사용되는 webpack으로 설치)

만약 우리가 만든 컴포넌트가 몇만 개라면 감당하지 못한다. 따라서 별도의 파일로 분리해주는데 이러한 분리된 파일을 마법처럼 합쳐주는 것이 웹팩이다.

파일을 쪼개는 경우

//필요한 라이브러리
const React = require('react');
const ReactDom = require('react-dom');

const {Component} = React;

class WordRelay extends Component{
    state = {

    }
}


// 외부에서 사용가능하게하는 노드모듈시스템
module.exports = WordRelay;

webpack을 터미널에서 사용하기 위한 3가지 방법

1. package.json dev설정

npm, yarn을 통해 scripts 설정된 값이 실행됨

"scripts": {
    "dev" : "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

2. npx 사용

npx webpack

설치 Babel

webpack은 jsx를 이해를 하지 못한다. 따라서 바벨이 필요

npm i -D @babel/core 기본 바벨 구성

@babel/preset-env 각 브라우저의 맞게 최신 문법을 옛날 문법으로 변경

@babel/preset-react jsx를 지원할 수 있다.

babel-loader 바벨이랑 웹팩을 연결해준다.

{
  "name": "lecture",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "YuSung",
  "license": "MIT",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}

만약 밑의 코드처럼 state를 작성할 것이면

class WordRelay extends Component{
    state = {

    }
}

@babel/plugin-proposal-class-properties 또한 추가해주어야 한다.

webpack.config.js파일에서 babel.cofig에서 plugins속성을 추가하라고 나옴. -> 추가

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

module:{
        rules : [{
            test: /\.jsx?/,
            loader : 'babel-loader',
            options : {
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: ['@babel/plugin-proposal-class-properties'],
            },//바벨옵션
        }]

웹펙실행하는것을 빌드라 한다.

'FrontEnd > React' 카테고리의 다른 글

require, import (0)	2020.07.18
babel preset env , plugins (0)	2020.07.16
AppBar의 검색기능 구현 (0)	2020.07.16
AppBar 와 웹 폰트 적용 (0)	2020.07.16
삭제기능 추가 (0)	2020.07.13