제로초 리액트 강의 2.2

웹팩

여러 개의 자바스크립트 파일을 하나의 자바스크립트 파일로 합할 수 있도록 하는 것!

쓸데 없는 코드도 없앨 수 있고, 바벨도 사용할 수 있음

 

html에서 scrpit src로 불러올 수 있는 파일은 하나 뿐인데 js파일이 여러개일때

웹팩을 써서 하나로 합쳐주는 것!

---

package.json 생성

여기에 리액트 개발에 필요한 모든 패키지를 넣을 것임

노드와 npm을 설치가 되어있어야함!

터미널에서 설치하려고 하는 폴더 위치로 들어가서 npm init

package name 아무거나

나머지는 넘기고

author는 자기 이름

license ISC 나 MIT 적당히 적용

마지막에 yes

그럼 생성 됨!

 

리액트와 리액트 돔 설치

npm i react react-dom

그럼 package.json에 추가 됨

 

개발할때만(-D) 사용할 웹팩과 웹팩cli 설치

npm i -D webpack webpack-cli

 

바벨 설치

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

바벨기본기능  나의 환경에 맞게 알아서 문법을 바꿔줌  JSX지원  바벨과 웹팩 연결

---

위에 설치 했던 폴더 위치에

webpack.config.js 파일 생성 후

module.exports = {
    
};

입력

 

같은 위치에

client.jsx 파일 생성 후

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

입력

 

index.html 준비

이전처럼 스크립트 태그로 안불러오고 노드의 모듈시스템으로 불러올 수 있음

스크립트 태그 필요X

 

위 과정들을 자동화해주는게 create-react-app

 

문법에 따라서 js와 jsx파일 확장자를 붙여줘서 파일명으로도 문법을 알 수 있도록 하는게 좋음

---

파일 분리를 할 때

리액트를 불러오는 코드를 꼭 써줘야함

const React = require('react');

class WordRelay extends React.Component {
    state = {

    };
    render() {
        return
    }
}

 

 

이렇게 간략하게 쓸 수도 있음

const React = require('react');
const { Component } = React;

class WordRelay extends Component {
    state = {

    };
    render() {
        return
    }
}

 

바깥에서 가져다 사용할 수 있게 마지막에 exports도 꼭 써주기

const React = require('react');
const { Component } = React;

class WordRelay extends Component {
    state = {

    };
    render() {
        return
    }
}

module.exports = WordRelay;

 

+

{ Component } 부분이 사용되는거에 맞춰 적는 듯..?

useState나 useRef가 있으면 { useState, useRef }가 되는 듯

 

---

webpack.config.js

웹팩 설정

const path = require('path');

module.exports = {
    name: 'word-relay-setting',
    mode: 'development', // 서비스시에는 production
    devtool: 'eval', // 서비스시에는 hidden-source-map
    resolve: {
        extensions: ['.js', '.jsx']
    }, // 이걸 사용하면 확장자를 적어주지 않아도 됨

    // 여기가 중요
    entry: {
        app: ['./client'] // 배열로, 이미 파일에서 불러오고 있으면 불러오고 있는 파일은 써주지 않아도 됨.
    }, // 입력

    modules: { // 순서에 맞춰서 적어주기(엔트리 모듈 아웃풋 순으로 실행되니까)
        rules:[{
            test: /\.jsx?/, // 정규 표현식
            loader: 'babel-loader', // js와 jsx파일에 바벨을 실행해서 호환되는 문법으로 바꿔주겠다
            options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
            }
        }],
    },

    output: {
        path: path.join(__dirname, 'dist'), // (현재폴더, 안에 폴더)
        filename: 'app.js'
    }, // 출력
};

 

웹팩 실행하기 > 터미널에 webpack 엔터 > 그럼 오류남 > 명령어가 등록이 안되어있기 때문에

해결방법1

package.json에 scripts에 "명령어":"webpack"라고 적고

npm run 명령어 실행

 

해결방법2

터미널에 npx webpack

---

에러메세지를 잘 확인하면 해결방법을 찾을 수 있음!

오타 확인 잘하기!

---

const path = require('path');

module.exports = {
    name: 'word-relay-setting',
    mode: 'development',
    devtool: 'eval',
    resolve: {
        extensions: ['.js', '.jsx']
    },

    entry: {
        app: ['./client']
    },

    module: {
        rules:[{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                        target: {
                            browsers:['> 5% in KR'],// browserslist
                         },
                        debug: true,
                    }], 
                    '@babel/preset-react',
                ],
                plugins: [],
            },
        }],
    },

    plugins:[],

    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    },
};

프리셋 상세한 설정도 할 수 있음

browserslist에 들어가면 지원하는 브라우저를 쉽게 설정할 수 있는 코드가 있음!

https://github.com/browserslist/browserslist

GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint a

---

웹팩 데브 서버와 핫 리로딩

npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D

npm i -D webpack-dev-server

 

package.json script에 추가

"dev": "webpack serve --env development"

 

... 더 추가해야하는데 영상도 여러번 덧붙여졌고 이해를 못해서 걍 불가능..