'bundling' 태그의 글 목록

bundling

03. 번들링 (Bundling) 2025.11.24

03. 번들링 (Bundling)

2025. 11. 24. 09:56

자바스크립트의 약진

자바스크립트는 원래 네스케이프가 브라우저 시장을 지배하고 있을 무렵 정적인 웹 페이지에 약간의 동적인 상호작용을 추가하기 위해 고안했던 프로그래밍 언어입니다. 초기에는 사용자의 동작에 반응하여 짧은 메시지를 표시한다던가 화면의 입력 값을 검증하기 위한 용도로 사용해왔었지만 이제는 독립적으로 하나의 애플리케이션을 구성할 수 있을만큼 눈부신 발전을 이루었습니다.

PYPL(PopularitY of Programming Language) 순위를 보아도 이제는 자바스크립트는 늘 상위권에 랭크되어 있는 인기 프로그래밍 언어입니다.

프로그래밍 언어 선호도 [출처: https://pypl.github.io]

이런 눈부신 발전으로 자바스크립트의 애플리케이션 규모는 점점 커지게 되었고, 기존의 방법으로는 코드의 관리와 유지보수가 쉽지 않은 과제가 되었습니다. 이런 성장에 따른 문제를 해결하기 위해 모듈 시스템이 등장했고, 모던 자바스크립트 라이브러리를 사용하여 개발하는 자바스크립트 프로젝트에서는 모듈 시스템이 필수적인 요소가 되었습니다.

모듈 시스템

자바스크립트에서는 크게 ES6 모듈과 CommonJS 모듈 시스템으로 나누어 사용합니다. 프론트엔드 애플리케이션을 구축할 때는 일반적으로 ECMAScript 2015에서 공식적으로 도입한 ES6 모듈 시스템을 사용합니다. React, Vue 등 점유율이 높은 라이브러리, 프레임워크를 지원하는 모듈들이 대부분 ES6 모듈을 지원하고 있습니다.

ES6 모듈 시스템은 아래 코드와 같이 import, export 문을 사용하여 모듈의 관계를 설정합니다.

util.js

export const sum = (a, b) => a + b;
export const multiple = (a, b) => a * b;
export const power = (a, b) => a ** b;

app.js

import { sum, multiple, power } from './util.js';
console.log(sum(2, 3)); //5
console.log(multiple(2, 3)); //6
console.log(power(2, 3)); //8

CommonJS 모듈은 전통적으로 사용하던 방식으로 require() 함수와 module.exports 구문을 사용하여 모듈 간의 관계를 정의합니다. 현재는 Node.js 에서 주로 사용하는 방식이지만 현재는 Node.js 의 전통적인 모듈들도 ES6 모듈을 지원하도록 변경되고 있는 추세입니다.

util.js

module.exports = {
    sum: (a, b) => a + b,
    multiple: (a, b) => a * b,
    power: (a, b) => a ** b
};

app.js

var cal = require('./util.js');

console.log(cal.sum(2, 3)); //5
console.log(cal.multiple(2, 3)); //6
console.log(cal.power(2, 3)); //8

번들러(Bundler)의 탄생

위와 같은 자바스크립트 모듈 시스템을 먼저 활발하게 사용한 쪽은 Node.js 진영이었습니다. 하지만 Node.js로 작성한 모듈을 브라우저에서도 실행해보려고 하니 require() 함수로 정의한 의존성은 브라우저가 해석할 수 없었고, 브라우저에서 실행되도록 하려면 프로그램을 많이 변경해야 했습니다.

이런 필요로 해서 번들러의 초기 버전이 등장하는데 이름도 Browserify 입니다. 말 그대로 CommonJS 모듈 명세로 작성한 Node.js 기반의 애플리케이션도 브라우저에서 실행 가능하도록 하겠다는 컨셉이었습니다.

Browserify 는 개발자가 모듈이나 파일을 require() 함수로 참조하면 그 의존성 트리를 크롤링하여 하나의 번들로 만들어서 브라우저에서도 Node.js 기반의 애플리케이션을 동작하게 해주었습니다. 그래서 번들러로써의 장점보다는 아래의 문구에 조금 더 힘을 주지 않았나 싶습니다.

Browserify lets you requires('modules') in the browser

이렇게 Browserify 가 수행한 작업이 번들링의 시초입니다.

웹팩 (Webpack)

모던 자바스크립트 프로젝트가 늘어나면서 Rollup, Vite, Parcel 등의 다양한 자바스크립트 번들러들이 출시되어 많은 장점을 어필하고 있지만 자바스크립트의 대표적인 번들러라고 하면 Webpack 을 꼽을 수 있습니다.

Webpack 홈페이지에 있는 번들링에 대한 개념 설명입니다. 의존성을 가진 모듈들을 묶어서 하나의 정적 리소스로 변경해주는 작업을 한다는 것을 알 수 있습니다. 아래 내용 역시 Webpack 홈페이지 첫 화면에 나와 있는 내용으로 번들링의 기본 개념을 나타냅니다.

번들링 확인

간단한 샘플 프로그램을 작성하여 Webpack으로 번들링을 되는 모습을 확인해 볼 수 있습니다. ES6 모듈 시스템을 사용하는 간단한 자바스크립트 프로젝트를 하나 만들어서 번들링을 하지 않은 채로 브라우저에서의 실행 결과를 확인해 보고, 번들링 후 실행하여 결과를 다시 확인해 보겠습니다.

먼저 아래 명령어로 프로젝트 루트로 사용할 경로를 생성한 후 package.json 파일을 생성합니다.

/project_root> mkdir bundleit
/project_root> cd bundleit
/project_root/bundleit> yarn init -y

생성한 경로를 VSCode로 열면 아래와 같은 모양입니다.

/js 경로를 하나 생성하고 util.js 파일을 아래와 같이 생성합니다.

export const sum = (a, b) => a + b;
export const multiple = (a, b) => a * b;
export const power = (a, b) => a ** b;

동일한 경로에 app.js 파일도 아래와 같이 생성합니다.

import { sum, multiple, power } from './util.js';

document.querySelector('#sum').textContent = 'sum : ' + sum(2, 3);
document.querySelector('#multiple').textContent = 'multiple : ' + multiple(2, 3);
document.querySelector('#power').textContent = 'power : ' + power(2, 3);

자바스크립트 파일을 모두 생성했으니 이제 해당 스크립트를 사용하는 HTML 페이지를 아래와 같이 생성합니다. 프로젝트 루트 경로에 index.html 로 명명하여 생성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p id="sum"></p>
    <p id="multiple"></p>
    <p id="power"></p>
    <script type="text/javascript" src="./js/util.js"></script>
    <script type="text/javascript" src="./js/app.js"></script>
  </body>
</html>

모두 작성하고 브라우저에서 index.html을 실행하면 아래와 같은 오류를 만날 수 있습니다.

브라우저가 해당 자바스크립트를 ES6 모듈로 인식하지 못해 발생하는 오류이므로 <script> 구문에 type=module 설정을 추가하여 사용할 수도 있습니다. 하지만 대부분의 경우 type=module 설정을 추가하기 보다는 번들링하여 사용합니다. 많은 경우 애플리케이션은 파일 몇 개로 이루어진 프로젝트가 아니라 수 많은 파일들로 관리하고 있기 때문입니다.

오류를 확인했으니 몇 줄 안되는 프로그램이긴 하지만 Webpack으로 번들링하여 동작을 확인해 보겠습니다. 아래 순서대로 진행해 보겠습니다.

1. Webpack 설치

webpack, webpack-cli를 설치합니다.
런타임이 필요한 모듈은 아니므로 개발 의존성으로 설치합니다.

/project_root/bundleit> yarn add --dev webpack
/project_root/bundleit> yarn add --dev webpack-cli

2. build script 추가

package.json 파일 하단에 build script를 추가합니다.

{
  "name": "bundleit",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1"
  },
  "scripts": {
    "build": "webpack"
  }
}

3. webpack.config.js 파일 생성

번들링 설정 파일인 webpack.config.js 파일을 프로젝트 루트에 아래와 같이 생성합니다.

const path = require('path');

module.exports = {
    entry: {
        main: ['./js/app.js']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [
                    path.resolve(__dirname, './js')
                ]
            }
        ]
    }
};

위 설정 파일에 대한 간략한 설명은 아래 내용을 참고합니다.
- entry : 번들링 진입점을 의미합니다. 샘플 애플리케이션은 app.js → util.js로 진행하는 구조이므로 진입점은 app.js가 됩니다.
- output : 번들링한 파일을 어느 경로에 어떤 이름으로 생성할 지 정의합니다. ./dist/bundle.js 파일로 생성하겠습니다.
- module/rules : 번들링할 때 참고할 규칙을 정의합니다. *.js 파일만 대상으로 번들링 해보겠습니다.

4. 번들링 및 실행

아래 명령어를 입력하여 번들링을 진행합니다.

/project_root/bundleit> npm run build

번들링이 정상적으로 이루어졌다면 ./dist/bundle.js 파일이 생성됩니다.

생성된 bundle.js 파일의 내용은 app.js와 util.js 파일을 결합한 형태 정도로 생성됩니다.

(()=>{"use strict";document.querySelector("#sum").textContent="sum : 5",document.querySelector("#multiple").textContent="multiple : 6",document.querySelector("#power").textContent="power : 8"})();

번들링한 파일을 브라우저에서 실행해 보기 위해 index.html 파일에서 참조하는 파일을 아래와 같이 변경합니다

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <p id="sum"></p>
    <p id="multiple"></p>
    <p id="power"></p>
    <script type="text/javascript" src="./dist/bundle.js"></script>
  </body>
</html>

변경 후 브라우저에서 실행하면 아래와 같이 정상 동작하는 것을 확인할 수 있습니다.

'01. IT > 01. 용어 정리' 카테고리의 다른 글

01. 도메인 (Domain) (0)	2025.11.20

PREV 1 NEXT

즐거운인생