Frontend에서의 Bundler

 번들러는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 도구이다. 개발자들이 코드를 나누어 작성할 때, 여러 파일로 나누어도 결국 실행 환경에서는 단일 파일로 실행해야 하는데, 이때 여러 파일을 묶어 하나의 파일로 만들어주는 역할을 한다. 예를 들어, 브라우저와 리액트 네이티브와 같은 환경에서는 여러 파일을 동시에 처리할 수 없기 때문에 하나의 파일로 번들링하여 실행해야 한다.

번들러의 역할

 번들러의 주요 역할은 세 가지로 나뉜다: 레졸루션(Resolution), 로드(Load), 옵티마이제이션(Optimization)이다. 각각의 역할을 하나씩 살펴보자.

Resolution

레졸루션은 파일 간의 참조를 올바르게 해석하는 과정이다. 자바스크립트 코드에서 import나 require를 사용할 때, 해당 경로에 어떤 파일이 존재하는지를 찾아주는 역할을 한다. 예를 들어, ./app이라는 경로가 주어지면 이 경로에 있는 app.js, app.ts, 혹은 index.js 등의 파일을 자동으로 찾아주는 과정을 거친다.

Load

로드는 자바스크립트 외의 언어를 자바스크립트로 변환하는 과정이다. 일반적으로는 자바스크립트를 작성하지만, 타입스크립트나 플로우 같은 자바스크립트 확장 언어를 사용하면 브라우저나 런타임에서 바로 실행할 수 없기 때문에 번들러는 이 파일들을 자바스크립트로 변환하는 로드 작업을 수행해야 한다.

Optimization

번들링된 파일은 단순히 합쳐지기만 하면 크기가 매우 커질 수 있다. 이때, 번들러는 최적화 작업을 통해 파일 크기를 줄인다. 대표적인 최적화 기법으로는 미니피케이션(Minification)과 트리 셰이킹(Tree Shaking)이 있다.

• Minification

 미니피케이션은 코드의 크기를 줄이기 위한 작업이다. 예를 들어, 변수 이름을 짧게 바꾸거나, 필요 없는 공백과 주석을 제거하여 코드의 크기를 줄인다. 이 작업은 코드의 동작에는 영향을 주지 않으면서도 파일 크기를 크게 줄일 수 있다.

• Tree Shaking

 트리 셰이킹은 사용하지 않는 코드를 제거하는 기법이다. 예를 들어, 여러 유틸리티 함수가 포함된 라이브러리를 가져왔지만, 그중 일부 함수만 사용된다면 나머지 함수는 번들에서 제외할 수 있다. 이로 인해 코드의 크기를 더욱 줄일 수 있지만, 구현하는 데에는 상당한 복잡성이 따른다.

번들러 사용법 예시

 번들러 사용의 대표적인 예로 웹팩(Webpack)과 메트로(Metro)를 들 수 있다. 웹팩은 주로 웹 애플리케이션에서 사용되며, 메트로는 리액트 네이티브에서 자주 사용된다.

Webpack

// webpack.config.js
module.exports = {
  entry: './src/index.js', // 번들링 시작점
  output: {
    filename: 'bundle.js', // 출력될 파일 이름
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 자바스크립트 파일을 처리
        exclude: /node_modules/,
        use: 'babel-loader' // ES6 코드를 ES5로 변환
      }
    ]
  }
};

Metro

 리액트 네이티브에서 메트로를 사용할 때, 메트로는 별도의 설정 없이 기본적으로 자바스크립트 파일을 번들링해준다. 하지만 필요에 따라 설정 파일에서 커스터마이징이 가능하다.

// metro.config.js
module.exports = {
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'], // 다양한 파일 확장자 처리
  },
};