Bundler

번들러(Bundler)란?

▶ 번들러(Bundler)는 여러 개의 파일과 모듈을 하나의 파일 또는 여러 개의 파일로 병합하여 웹 애플리케이션의 로드 시간을 최적화하고 관리 효율성을 높이는 도구입니다. 번들러는 주로 자바스크립트, CSS, 이미지 파일 등 다양한 자산을 포함한 웹 애플리케이션에서 사용되며, 가장 널리 사용되는 번들러로는 Webpack, Parcel, Rollup 등이 있습니다.

번들러의 필요성

1. 모듈화된 코드 관리

   현대적인 웹 개발에서는 모듈화된 코드가 중요합니다.
   각 기능을 독립된 모듈로 분리하여 개발하면 유지보수성과 확장성이 높아지지만, 많은 파일을 브라우저가 각각 요청하게 되면 네트워크 성능에 큰 영향을 미치게 됩니다. 번들러는 이러한 모듈들을 하나의 파일로 합쳐 브라우저의 요청 수를 줄여줍니다.

2. 의존성 관리

   웹 애플리케이션은 여러 외부 라이브러리와 모듈에 의존합니다.
   번들러는 이러한 의존성을 자동으로 해결하고, 필요한 파일들을 올바른 순서로 포함하여 번들링해줍니다.

3. 코드 최적화

   번들러는 코드 압축, 난독화, 중복 제거, 트리 쉐이킹(Tree Shaking) 등의 최적화 기능을 제공합니다. 이를 통해 번들 크기를 최소화하고 로딩 속도를 개선할 수 있습니다.

주요 번들러

01. Webpack

• Webpack은 가장 널리 사용되는 번들러 중 하나로, 높은 유연성과 다양한 플러그인을 지원합니다. 또한 Webpack은 자바스크립트뿐만 아니라 CSS, 이미지 파일 등도 처리할 수 있습니다.

// webpack.config.js 예시
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

• 위의 예시에서는 entry 속성으로 번들링의 시작점을 지정하고, output 속성으로 번들링된 파일의 출력을 설정했습니다.
• 여기에 module.rules를 통해 CSS 파일을 처리하도록 설정하고, HtmlWebpackPlugin을 사용하여 HTML 파일을 번들링 과정에 포함시킵니다.

02. Parcel

• Parcel은 설정이 거의 필요 없는 번들러로, 빠르고 간단하게 사용할 수 있는 것이 특징이며 Parcel은 파일 타입을 자동으로 감지하고 적절한 변환을 수행합니다.
  또한 자동으로 의존성을 처리하고, 코드 스플리팅, 핫 모듈 교체(HMR) 등의 기능을 제공하기 때문에 초보자나 간단한 프로젝트에 적합한 도구입니다.

// Parcel을 사용한 예시 (설정 파일 불필요)
// 명령어: parcel src/index.html

03. Rollup

• Rollup은 주로 라이브러리 번들링에 사용되며, ES 모듈을 기반으로 동작합니다. Rollup은 트리 쉐이킹을 통해 불필요한 코드를 제거하여 효율적인 번들을 생성합니다.

// rollup.config.js 예시
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs(),
    terser()
  ]
};

• 위의 예시에서는 resolve 플러그인을 통해 Node.js 모듈을 가져오고, commonjs 플러그인을 통해 CommonJS 모듈을 변환했으며, 이 때 terser 플러그인은 번들된 코드를 압축합니다.

번들러의 주요 기능

1. 코드 스플리팅(Code Splitting)

   코드 스플리팅은 애플리케이션의 각 부분을 별도의 파일로 분리하여 초기 로딩 시간을 줄이고, 필요한 시점에 필요한 부분만 로드할 수 있어 사용자 경험을 개선할 수 있습니다.

2. 트리 쉐이킹(Tree Shaking)

   트리 쉐이킹은 사용되지 않는 코드를 제거하여 번들 크기를 줄이는 기술입니다. Rollup이 이 기능으로 잘 알려져 있으며, Webpack도 이를 지원합니다.

3. 로더(Loaders)

   로더는 특정 파일 타입을 처리하여 번들에 포함시킬 수 있도록 도와줍니다. 예를 들어, CSS 파일을 처리하기 위해 css-loader와 style-loader를 사용할 수 있습니다.

4. 플러그인(Plugins)

   플러그인은 번들링 과정 중 특정 작업을 수행할 수 있도록 도와줍니다. 예를 들어, Webpack의 HtmlWebpackPlugin은 번들링된 자바스크립트를 HTML 파일에 자동으로 삽입합니다.

5. 개발 서버(Dev Server)

   번들러는 종종 개발 서버를 제공하여 로컬 환경에서 개발 중인 애플리케이션을 실시간으로 확인하고, 변경 사항을 자동으로 반영할 수 있게 합니다. Webpack Dev Server와 Parcel Dev Server가 그 예입니다.

번들러 사용의 장점

1. 성능 향상

   번들러는 코드 압축, 트리 쉐이킹, 코드 스플리팅 등을 통해 애플리케이션 성능을 향상시킵니다. 이는 최종 사용자의 로딩 시간을 줄이고, 애플리케이션 반응성을 높이는 데 기여합니다.

2. 유지보수 용이성

   모듈화된 코드와 의존성 관리를 통해 프로젝트 구조를 체계적으로 유지할 수 있습니다. 이는 코드의 가독성을 높이고, 유지보수를 용이하게 만듭니다.

3. 개발 효율성

   번들러는 개발 서버와 핫 모듈 교체(HMR)를 제공하여 개발자가 실시간으로 변경 사항을 확인할 수 있게 합니다. 이는 개발 속도를 높이고, 디버깅을 쉽게 만듭니다.

4. 다양한 파일 처리

   번들러는 자바스크립트 외에도 CSS, 이미지, 폰트 등 다양한 파일을 처리할 수 있습니다. 이를 통해 모든 자산을 일관된 방식으로 관리하고 최적화할 수 있습니다.

이렇게 오늘은 번들러(Bundler)에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문이기 때문에 미리 공부해두면 좋을 것 같네요!
그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!