Babel & Polyfill

남자김용준·2021년 8월 25일
0

자바스크립트는 계속해서 변화하고 있는 언어이다. 새로운 기능들이 추가되고 명세서에 등록된다. 자바스크립트 엔진을 만드는 조직은 우선순위를 매겨 명세서 내 어떤 기능을 먼저 구현할 지 결정한다. 엔진이 자바스크립트 표준 명세서 전체를 지원하지 않고 일부만 지원하는 경우가 허다하다. 이런 상황을 극복하기 위해서 바벨과 폴리필이 존재한다.

바벨이란?

명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하다보면 특정 엔진에서 작성한 코드를 지원하지 않는 경우가 있다. 명세서 내의 모든 기능을 모든 엔진이 구현하고 있지는 않기 때문이다. 이럴 때 바벨을 사용하여 해결할 수 있다. 바벨은 트랜스파일러로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다.

바벨은 코드를 재작성해주는 트랜스파일러 프로그램이다. 바벨은 개발자의 컴퓨터에서 돌아가는데, 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경한다. 변경된 코드는 웹사이트 형태로 사용자에게 전달된다. 웹팩과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜준다.

폴리필이란?

명세서엔 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가 추가되곤 한다. 새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경해준다. babel은 문법을 변환해주는 역할만 한다. 반면, 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있다. 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수할 수 있게 작업할 수 있다.

이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 폴리필이라 부른다. 폴리필은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는 역할을 한다. 폴리필은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다.

core.js나 polyfill.io의 예시가 존재한다.

profile
frontend-react

0개의 댓글