HHyo814
발행일

[ZBF] 트랜스파일러와 번들러, 폴리필에 대한 이해

기술노트인프라

[ZBF] 트랜스파일러와 번들러, 폴리필에 대한 이해

이 글은 네이버 블로그에 2024년 6월 18일에 올렸던 것을 그대로 옮겨온 것입니다.

트랜스파일러 (Transpiler): 모든 브라우저에서 최신 기능을 지원하기 위한 도구

정의

트랜스파일러는 고수준 프로그래밍 언어로 작성된 코드를 다른 고수준 언어로 변환해주는 도구입니다. 예를 들어, 최신 자바스크립트(ES6+) 코드를 구형 자바스크립트(ES5) 코드로 변환할 때 사용됩니다. 이 과정은 최신 기능을 사용할 수 있도록 해주며, 다양한 브라우저 환경에서 코드가 정상적으로 동작할 수 있게 합니다.

왜 필요한가?

최신 자바스크립트 문법을 사용하면 코드가 간결해지고 유지보수가 쉬워집니다. 그러나 일부 오래된 브라우저는 최신 문법을 지원하지 않습니다. 트랜스파일러는 이러한 문제를 해결하여 다양한 브라우저에서 코드를 실행할 수 있게 해줍니다.

예시

가장 널리 사용되는 트랜스파일러로는 Babel이 있습니다. Babel을 사용하면 최신 자바스크립트 기능을 사용하면서도 모든 브라우저에서 코드를 실행할 수 있습니다.

const greet = () => {
  console.log("Hello, World!");
};

var greet = function() {
  console.log("Hello, World!");
};

실전 문제 해결

트랜스파일러는 다음과 같은 문제를 해결하는 데 매우 유용합니다:

구버전 브라우저에서 지원되지 않는 Array#findLast 메서드를 넓은 범위의 브라우저에서 지원하는 문제

최신 배열 메서드는 구형 브라우저에서 지원되지 않을 수 있습니다. 트랜스파일러는 이러한 메서드를 변환하여 모든 브라우저에서 사용할 수 있게 합니다.

새로운 ECMAScript 문법인 using 문을 넓은 범위의 브라우저에서 지원하는 문제

최신 ECMAScript 기능은 브라우저 호환성을 위해 트랜스파일러를 통해 변환됩니다.

새로운 CSS 함수인 clamp를 넓은 범위의 브라우저에서 지원하는 문제

CSS-in-JS 솔루션을 사용하여 최신 CSS 기능을 변환하고, 빌드 타임에 추출된 CSS를 모든 브라우저에서 사용할 수 있게 합니다.

TypeScript를 브라우저가 이해할 수 있는 JavaScript로 변환하는 문제

TypeScript는 정적 타입을 지원하는 상위 집합 언어로, 트랜스파일러를 사용하여 순수 JavaScript로 변환됩니다.

CSS-in-JS에서 사용하는 CSS를 빌드타임에 추출하는 문제

CSS-in-JS를 사용하는 경우, 빌드 타임에 CSS를 추출하여 브라우저 호환성을 높이는 것이 중요합니다.

트랜스파일러를 사용함으로써 최신 웹 기술을 자유롭게 사용할 수 있고, 코드의 유지보수성을 높이면서도 모든 브라우저에서 일관된 사용자 경험을 제공할 수 있습니다. Babel과 같은 도구는 이를 가능하게 해주는 핵심 요소입니다.

트랜스파일러를 사용하여 코드를 변환하면, 최신 기능을 지원하지 않는 구형 브라우저에서도 최신 자바스크립트 문법을 사용할 수 있습니다. 이를 통해 개발자는 최신 기술을 활용하여 더 나은 성능과 유연성을 가진 웹 애플리케이션을 개발할 수 있습니다.

번들러 (Bundler): 모듈화된 코드를 효율적으로 관리하는 도구

정의

번들러는 여러 파일로 나뉘어 있는 소스 코드를 하나의 파일로 묶어주는 도구입니다. 일반적으로 자바스크립트 모듈, CSS 파일, 이미지 등을 포함합니다. 번들러를 사용하면 개발자가 모듈 시스템을 이용해 작성한 코드를 적은 수자의 출력 JavaScript 파일로 합쳐, 성능을 최적화할 수 있습니다.

왜 필요한가?

모듈화된 코드는 유지보수와 확장이 용이하지만, 브라우저는 여러 파일을 일일이 로드해야 하므로 성능에 부정적인 영향을 미칠 수 있습니다. 번들러는 이러한 문제를 해결하여 로드 시간을 단축하고 효율성을 높입니다. 또한, 번들러는 의존성을 관리하고, 트리 쉐이킹(tree shaking)과 미니파잉(minifying) 같은 최적화 기법을 적용하여 출력 파일의 크기를 줄여줍니다.

번들러의 역할

의존성 해결 (Resolve)

번들러가 의존성을 해결한다는 것은 import나 require로 가져오는 의존성을 분석하고, 해당 모듈들을 찾아내는 작업을 말합니다. 이는 의존성 설치와는 다릅니다.

의존성 로드 (Load)

번들러가 의존성을 로드한다는 것은 import나 require로 가져오는 의존성을 출력 형식의 JavaScript로 변환하는 작업을 말합니다.

트리 쉐이킹 (Tree Shaking)

트리 쉐이킹을 적용하면 하나의 파일 안에 있는 코드 중에서 쓰이지 않는 코드는 삭제되고, 쓰이는 코드만 결과물에 남게 됩니다.

미니파잉 (Minifying)

미니파잉을 적용하면 공백이 삭제되거나, 변수나 함수의 이름이 짧은 형태로 바뀌어, 출력 파일의 크기가 감소합니다.

대표적인 번들러

Webpack

가장 널리 사용되는 번들러로, 다양한 플러그인과 설정 옵션을 제공하여 복잡한 프로젝트에서도 유연하게 사용될 수 있습니다.

Rollup

주로 라이브러리 번들링에 사용되며, 효율적인 트리 쉐이킹을 지원하여 작은 번들 크기를 유지합니다.

Parcel

설정이 거의 필요 없는 번들러로, 빠른 번들링 속도를 자랑하며, 자동으로 트리 쉐이킹과 미니파잉을 처리합니다.

// 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'
      }
    ]
  }
};

폴리필 (Polyfill)

정의

폴리필은 최신 기능을 지원하지 않는 브라우저에서 해당 기능을 사용할 수 있게 해주는 코드입니다. 특정 기능이 없을 경우 이를 대체하여 동일한 기능을 제공하는 역할을 합니다.

왜 필요한가?

최신 웹 표준을 사용하는 것이 이상적이지만, 모든 사용자가 최신 브라우저를 사용하지 않습니다. 폴리필을 사용하면 구형 브라우저 사용자도 최신 기능을 사용할 수 있게 되어 사용자 경험을 향상시킵니다.

예시

대표적인 폴리필 라이브러리로는 Core-js가 있습니다.

// Array.prototype.includes 폴리필
if (!Array.prototype.includes) {
  Array.prototype.includes = function(valueToFind, fromIndex) {
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }
    var o = Object(this);
    var len = o.length >>> 0;
    if (len === 0) {
      return false;
    }
    var n = fromIndex | 0;
    var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
    while (k < len) {
      if (o[k] === valueToFind) {
        return true;
      }
      k++;
    }
    return false;
  };
}
← 글 목록으로