[Webpack]

웹팩이란?

웹팩은 모듈 번들러(Module Bundler)라고 불리는 도구이다. 쉽게 말해, 여러 개의 파일(JS, CSS, Image 등)을 하나의 파일 또는 몇 개의 파일로 묶어주는 역할을 한다. 이렇게 하면 애플리케이션을 더 효율적으로 로드할 수 있게 된다.

* 모듈 번들러에 대해 조금 더 상세히 설명해줄래?

모듈 번들러는 여러 개의 파일(모듈)을 하나의 파일 또는 몇 개의 파일로 묶어주는 도구이다. 웹 개발에서는 보통 자바스크립트, CSS, 이미지 파일 등을 포함한 다양한 파일들을 다루게 되는데, 이 파일들을 효율적으로 관리하고 최적화하기 위해 모듈 번들러를 사용한다.

* 왜 모듈 번들러가 필요할까?

1. 파일 관리

웹 애플리케이션이 커지면 코드가 여러 파일로 나뉘게 된다. 모듈 번들러는 이런 파일들을 하나로 묶어서 관리하기 쉽게 해준다.

2. 의존성 해결

각 파일(모듈)들이 서로 의존하고 있는 경우, 이를 자동으로 해결해준다. 예를 들어, A 파일이 B 파일을 필요로 한다면, 모듈 번들러가 이를 알아서 처리해준다.

3. 최적화

코드 압축, 트리 쉐이킹(Tree Shaking, 사용되지 않는 코드를 제거) 등의 최적화 작업을 통해 파일 크기를 줄여준다. 이는 웹 애플리케이션의 로딩 속도를 개선하는 데 도움이 된다.

예를 들어볼까?

* index.js

* math.js

* style.css

index.js파일에서는 math.js의 함수를 사용하고, style.css는 스타일을 정의한다. 모듈 번들러를 사용하지 않는다면, 각 파일을 HTML에서 개별적으로 불러와야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="math.js"></script>
    <script src="index.js"></script>
</body>
</html>

이렇게 하면 파일이 많아질수록 관리가 어려워지고, 네트워크 요청도 많아져서 성능이 저하될 수 있다.

모듈 번들러를 사용하면, 모든 파일을 하나의 번들로 묶어서 하나의 파일로 로드할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

이제 bundle.js 파일만 로드하면 된다. 이 파일 안에는 index.js, math.js, style.css의 모든 코드가 포함되어 있다.

웹팩의 주요 개념만 살짝 이해해보자.

1.Entry

엔트리 포인트는 webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 모듈이다. webapck은 엔트리 포인트가 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 찾아낸다.

기본값은 ./src/index.js이지만, webpack 설정에서 entry 속성을 설정하여 다른 또는 여러 엔트리 포인트를 지정할 수 있다.

디펜던시 그래프란?
디펜던시 그래프를 요리 레시피에 비유해서 이해해보자. 한 가지 요리를 만들기 위해 여러 단계가 필요할 때, 각 단계는 특정 순서로 진행되어야 한다.

예시 - 스파게뤼 요리
1. 재료 준비
- 토마토 소스 만들기
- 면 삶기
- 고기 볶기

2. 요리 단계
- 토마소 소스를 만들기 위해 토마토를 자르고 끓이기
- 면을 삶기 위해 물을 끓이고 면을 넣기
- 고기를 볶기 위해 팬을 예열하고 고기를 넣기
- 토마토 소스가 완성되면 볶은 고기와 섞기
- 면이 다 삶아지면 소스와 섞기

위의 단계들을 디펜던시 그래프로 표현하면 :
- 노드(Node) : 각 요리 단계 (토마토 자르기, 물 끓이기, 고기 볶기 등)
- 엣지(Edge) : 각 단계의 의존 관계 (예 : 토마토 소스를 만들기 위해 토마토를 자르는 단계가 먼저 필요)

예시 : 소프트웨어 개발
소프트웨어 프로젝트에서의 디펜던시 그래프 예시를 들어보자..
1. 데이터베이스 설계
- 테이블 구조 설계
- 데이터베이스 구축
2. 백엔드 개발
- API 설계
- 비즈니스 로직 구현
- 데이터베이스 연결
3. 프론트엔드 개발
- UI 디자인
- API 호출 기능 구현
- 사용자 입력 처리
4. 통합 테스트 및 배포
- 백엔드와 프론트엔드 통합 테스트
- 버그 수정
- 최종 배포

디펜더시 그래프로 표현하면 :
- 노드(Node) : 각 개발 단계 (데이터베이스 설계, API 설계, UI 디자인 등)
- 엣지(Edge) : 각 단계의 의존 관계 (예: API 설계는 데이터베이스 설계가 완료된 후 가능)

이러한 디펜던시 그래프를 통해 개발자들은 어떤 작업이 선행되어야 하고, 어떤 작업이 후속 작업인지 명확히 파악할 수 있다.

2. Output

output 속성은 번들을 내보낼 위치와 파일 이름을 지정한다. 기본 출력 파일은 ./dist/main.js로 설정되며, 추가 파일은 ./dist폴더로 설정된다. output 필드를 사용하여 번들의 이름과 경로를 지정할 수 있다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

3. Loaders

웹팩은 기본적으로 JS와 JSON 파일만 이해한다. 로더는 다른 유형의 파일을 처리하거나 변환하여 유요한 모듈로 만들 수 있도록 도와준다. 로더는 test 속성과 use 속성을 사용하여 설정한다.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

4. Plugins

플러그인은 번들을 최적화하거나 에셋을 관리하고, 환경 변수를 주입하는 등의 광범위한 작업을 수행할 수 있다. 플러그인을 사용하려면 require()로 플러그인을 가져와 plugins 배열에 추가해야 한다.

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

5. Mode

Mode 파라미터는 development, production, none 중 하나로 설정할 수 있으며, 환결별 최적화를 활성화한다. 기본값은 production이다.

module.exports = {
  mode: 'production',
};

'React' 카테고리의 다른 글

[Webpack]를 수동으로 설정해보기 (2) (1)	2024.06.15
[Webpack]를 수동으로 설정해보기 (1) (1)	2024.06.14
useState는 동기적일까? 비동기적일까? (0)	2024.06.13
[React Project] ⚡Youtube App 만들기 (0)	2024.06.09
Tanstack Query 옵션에 대한 (0)	2024.05.17