230227 - Webpack ( 웹팩 )

오늘 내가 배운 것

1. Webpack

2. Webpack 모듈 번들러

• 모듈
• 번들러
• 로딩속도 개선
• 주의

3. Webpack 주요 속성

4. Step 1. Webpack 기본 실행

5. Step 1-1. React를 npm install 하여 require로 사용하기

6. Step 2. Webpack Loaders - CSS파일 번들링 하기

7. Step 3. Webpack Plugins - HTML template(React)을 import 하고 Babel을 이용하여 JSX문법 이용하기. 

 

1. Webpack

javascript를 이용하여 개발을 하면서 유지보수성과 확장성을 고려하는 상황이 생기는데, 이를 해결하기 위해서 코드를 작은 단위로 쪼개서 파일 분리를 하던가, 재사용 가능한 단위로 만드는 모듈화를 했는데, 브라우저는 기본적으로 모듈이라는 개념을 적용시킬 수 없었다.
그래서 이 모듈들을 하나로 합쳐주는 번들링이 필요했는데, 이때 모듈과 번들링을 위한 도구로 webpack이 개발되었다.

webpack은 웹 애플리케이션을 구성하는 다양한 자원들을 하나의 파일로 번들링 하고 이를 이용하여 웹페이지를 로딩하는데 필요한 최소한의 파일을 제공해서 로딩속도를 개선하였다.

 

 

2. Webpack 모듈  번들러

2-1. 모듈

모듈이란 프로그램을 구성하는 구성요소로, 서로 관련된 데이터와 함수를 하나로 묶은 단위, 하나의 파일이 하나의 모듈이라고 할 수 있다. 모듈화를 통해서 코드의 재사용성과 유지보수성을 향상할 수 있다.

 

 

2-2. 번들러

번들러는 의존성 있는 모듈코드를 하나의 파일로 만들어주는 도구(여러 파일도 가능)이다. 브라우저에서 모듈이라는 개념을 지원하지 않아도 모듈화 된 코드를 사용할 수 있다. 이전에 작성한 코드 중에 `back server`에서 MVC패턴을 할 때 module.js를 이용해서 의존성 주입을 했었다. 비슷한 개념으로 확인할 수 있다.

 

 

2-3. 로딩속도 개선

로딩속도를 개선했다는 의미는 일반적으로 HTML을 작성하면서 image 파일, script 파일, css 파일과 같은 다른 파일들을 로드하기 위해서 많은 응답-요청이 필요했다.
한 번의 응답-요청에서는 3-way-handshake를 이용해서 연결 후 HTTP통신을 한 후 4-way-handshake를 통한 비연결성 상태를 유지했었다. 이로 인해 많은 파일이 연결되어 있는 경우 많은 과정의 요청과 응답으로 인해 자원이 많이 소모된다.

그러므로 webpack을 이용하여 번들링이 된 파일을 이용하면 1개의 파일로 요청-응답을 할 수 있으므로 로딩속도가 개선될 수 있다.

<!-- 일반적인 연결 -->
<script scr="./js1.js"></script>
<script scr="./js2.js"></script>
<script scr="./js3.js"></script>
<script scr="./js4.js"></script>

<!-- 웹팩을 이용한 번들링된 파일 연결 -->
<script src="./bundle.js"></script>

 

2-4. 중요

https://baekspace.tistory.com/129

230222 - React Comment 만들기

Comment 기능 같은 경우
App, Comment, CommentList, CommentForm, CommentItem으로 컴포넌트를 나눴었다. 이를 이용해서 5개의 파일로 만들어서 작업하는 방법이 있는데, 이렇게 개발 과정에서 유지보수성 및 재사용성을 위해서 파일을 분리해서 작업하는 것은 중요하지만 실행을 시킬 때는 한 개의 번들 파일로 실행을 시키는 것이 좋다. 로딩속도 개선을 하기 위해서 작업조차 1가지 파일로 몰아서 할 필요는 없고, 모듈화를 잘 시키고 이를 번들링 하는 것이 중요하다.

 

 

3. Webpack 주요 속성

Babel의 주요 속성으로 `presets`과 `plugins`로 두 가지였지만, Webpack의 경우 중요한 속성으로 4가지가 있다.

 

• entry : 웹팩에서 번들링을 시작하는 모듈 파일의 경로를 지정한다. 이 속성을 이용하여 웹팩이 해당 파일에서 시작해서 의존하는 다른 모듈들을 모두 찾아서 번들 파일로 만든다.
• loaders (module): JS파일 외에, Image, CSS파일도 모듈로 만들 수 있다.
  • roules 속성
    • test : 변환해야 하는 파일을 식별하는 역할
    • use : 어떤 로더를 이용하는지 설정한다.

// exam... css 파일을 번들링
const path = require("path")

module.exports = {
    entry: "./src/index.js",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist"),
    },
}

 

• plugins : 번들 파일 크기를 줄이기 위한 압축, 코드 최적화, 환경 변수 주입 등의 작업을 수 행할 수 있다.

// exam... html template를 이용
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.html",
            filename: "index.html",
        }),
    ],
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist"),
    },
}

• output : 웹팩이 생성한 번들파일의 경로와 이름을 원하는 대로 지정한다.

loaders는 번들링 되기 전의 파일들을 해석하고 변환하는 과정을 관여하고, plugins는 번들링 된 결과물의 형태를 바꾸는 역할을 한다.

 

 

 

4. Step 1. Webpack 기본 실행

 

1. 관련 패키지 설치

$ npm init -y
$ npm install webpack webpack-cli

 

2. 프로젝트 구성

src 디렉토리 안에 있는 파일을 번들링

// src/index.js
const home = require("./pages/home.js")
console.log(home.name)


// src/pages/home.js
module.exports = {
    name: "web7722",
}

 

3. Webpack 설정파일 - webpack.config.js

프로젝트의 최상위 디렉토리에 생성

const path = require("path")

module.exports = {
    //번들링을 시작하는 파일 이름
    entry: "./src/index.js",
    output: {
        // 번들링 완료 후 생성되는 파일 이름
        filename: "bundle.js",

        //절대경로를 써야하지만, 작업자마다 경로가 다르기 때문에 path를 이용한다.
        path: path.join(__dirname, "dist"),
    },
}

 

 

4. 웹팩 실행시키기

# 최상위 디렉토리에서
$ npx webpack

 

번들링 된 파일

 

 

5. Step 1-1. React를 npm install 하여 require로 사용하기

4번과 동일하고 4-2의 프로젝트 구성만 추가된다.

 

2. 프로젝트 구성

// src/index.js
const React = require("react")
const ReactDOM = require("react-dom")
const home = require("./pages/home.js")

console.log(React)
console.log(ReactDOM)
console.log(home.name)

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(React.createElement("div", null, "hello World!"))

 

React를 사용할 때 CDN을 쓰지 않고 npm install을 하여서 사용할 수 있다. 하지만 이 코드는 webpack을 이용하여 번들링을 하지 않으면 사용할 수 없다. 브라우저에서 require라는 함수를 인식하지 못하기 때문에 코드 실행 시 오류가 발생할 수 있다.

번들.js 파일이 생성된 후에 확인할 수 있는 방법은 html 파일을 이용하여 script 연결을 한 후 실행해 보면 확인할 수 있다.

<!-- 바디 영역만 적었다. -->
<body>
    <div id="root"></div>
    <script type="text/javascript" src="./bundle.js"></script>
</body>

 

기존 파일에 내용이 바뀌게 되면 번들링을 다시 해서 새로운 번들파일을 만들어야 한다.(혹은 덮어쓰기) 
4번 과정도 다시 실행해줘야 한다.

 

 

 

 

6. Step 2. Webpack Loaders - CSS파일 번들링 하기

 

1. 관련 패키지 설치

$ npm init -y
$ npm install webpack webpack-cli
$ npm install css-loader style-loader

2. 프로젝트 구성

src 안에 있는 css파일 번들링하기

// src/index.js
import "./index.css"

console.log("hello world")

 

/* src/index.css */
* {
    margin: 0;
    padding: 0;
    background: red;
}

 

 

3. Webpack 설정파일 - webpack.config.js

const path = require("path")

module.exports = {
    entry: "./src/index.js",
    // loaders 속성은 module로 작성한다.
    module: {
        rules: [
            {
                // 정규식을 이용한 파일식별
                test: /\.css$/,
                // 사용할 로더 설정
                use: ["css-loader"],
            },
        ],
    },
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist"),
    },
}

 

4. 웹팩 실행시키기

# 최상위 디렉토리에서
$ npx webpack

 

 

 

 

7. Step 3. Webpack Plugins - HTML template(React)을 import 하고 Babel을 이용하여 JSX문법 이용하기 

 

1. 관련 패키지 설치

npm init -y
npm install webpack webpack-cli
npm install html-webpack-plugin

2. 프로젝트 구성

<!-- src/index.html -->
<body>
    <div id="root"></div>
</body>

 

// src/index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./app.js"
// 브라우저에서 쓰는 것이기 때문에 require가 아니라 import임.....

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(<App />)

 

 

3. Webpack 설정파일 - webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/, //하지 않음.
                use: ["babel-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.html",
            filename: "index.html",
        }),
    ],
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, "dist"),
    },
}

 

 

4. 웹팩 실행시키기

# 최상위 디렉토리에서
$ npx webpack

 

 

 

 

---