트랜스파일러와 폴리필

목차

1. 트랜스파일러와 폴리필의 필요성

2. 트랜스파일러 (Transpiler)

3. 폴리필 (Polyfill)

4. 사실 모든 브라우저를 전부 지원하지 못할 수도 있음

---

1. 트랜스파일러와 폴리필의 필요성

자바스크립트는 정기적으로 새로운 제안(proposal)이 등록되고, 분석되고, 추가된다.

추가된 제안은 명세서에 등록되며, JS엔진을 만드는 각 조직이 구현한다.

• 추가된 제안 : https://tc39.es/ecma262/
• 명세서 : https://ecma-international.org/publications-and-standards/standards/ecma-262/
• 엔진별 지원 기능 : https://compat-table.github.io/compat-table/es6/

 

부분별로 차근차근 업데이트되다보니, 명세서에 등록된 지 얼마 안 된 기능으로 코드를 작성하다보면

작성한 코드를 특정 엔진에서 지원하지 않는 상황이 생길 수도 있다.

 

이 때 사용하는 것이 트랜스파일러와 폴리필이다.

명세서에 새로운 문법이나 기존에 없던 새로운 내장 함수에 대한 정의가 추가되는데

 

새로운 문법으로 코드를 작성했을 때는 트랜스파일러가,

새로운 내장 함수를 사용했을 때는 폴리필을 작성하여 

 

새로운 기능으로 코드를 작성해서 엔진 지원이 되지 않더라도 구버전으로 변환하여 동작시킬 수 있다.

---

2. 트랜스파일러 (Transpiler)

코드 문법을 변환하는 프로그램으로, 자바스크립트에서는 최신 JS 문법을 구버전 JS 문법으로 바꿔준다.

자바스크립트의 대표적인 트랜스파일러 도구로 바벨(Babel)이 있다.

 

바벨(Babel)

최신 JS 문법을 구버전 JS 문법으로 재작성해주는 트랜스파일러 프로그램이다.

바벨은 개발자의 컴퓨터에서 돌아가며, 바벨을 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경된다.

 

웹팩(webpack)같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜준다.

---

2. 폴리필 (Polyfill)

트랜스파일러로 해결 못하는 기능(API/메서드의 부재)을 직접 구현해서 메꿔주는 보조 스크립트이다.

오래된 버전의 브라우저에서 바로 사용할 수 없는, 표준에 새롭게 추가된 함수는 명세서 정의를 읽고 개발자가 직접 함수를 구현해야한다.

 

변경된 표준을 준수할 수 있도록 기존 함수를 수정하거나 새로 구현한 함수 스크립트를 폴리필이라고 한다.

 

폴리필 모음이 몇 개 있다.

• core js : 표준적으로 사용되는 Polyfill들이 모여있음 (import 'core-js/acture';)
• polyfill.io : 유명했는데 2024년에 중국 기업이 인수한 뒤 공격이 발생해서 이제 못 쓴다
• Fastly Polyfill
• cdnjs

폴리필을 사용하면 폭넓은 브라우저를 지원할 수 있다는 장점이 있지만, 불러와야 하는 JS 코드가 많아진다는 단점이 있다.

실행해야하는 Polyfill 스크립트가 많아질수록 웹 서비스 성능이 나빠진다는 것이다.

필요한 폴리필 스크립트만 선택적으로 불러올 수 있는 방법들이 있다.

• @babel/preset-env 사용하기
• User-agent에 따라 동적으로 스크립트 생성하기

1. @babel/preset-env

preset이 브라우저 목록에 따라 자동으로 필요없는 폴리필을 제거해준다.

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { ie: 11 }],
  ],
  /* 기타 설정 */
};

웹 페이지가 Internet Explorer 11을 지원한다면 위와같이 babel.config.js를 설정할 수 있다.

Babel playground

 

target을 defaults로 변경하면 훨씬 적은 25개의 폴리필이 포함된다.

 

2. User-agent

Babel을 설정해도 불필요한 스크립트를 내려받는 것은 마찬가지다.

User-agent에 따라서 동적으로 폴리필 스크립트를 생성할 수 있다.

Fastly Polyfill과 같은 서비스를 통해 동적 폴리필을 적용할 수 있다.

 

---

4. 사실 모든 브라우저를 전부 지원하지 못할 수도 있음 

transpiler와 polyfill이 뭔지 열심히 봤지만, 개발자가 사용자가 사용할 모든 브라우저를 예측하여 코드를 작성하기는 어렵다.

그래서 많은 서비스들이 최소 브라우저 버전을 정해두고, 그 안에서 서비스를 제공하는 편이다.

 

 

 

 

 

참고

https://ko.javascript.info/polyfills

폴리필

https://toss.tech/article/smart-polyfills

똑똑하게 브라우저 Polyfill 관리하기