[개발/자바스크립트] 폴리필(polyfill)과 바벨(Babel)이란(정의 및 구분/차이점)

반응형

SI 개발을 하다보면 아직까지도 IE(Internet Explorer/22.6.14 서비스 종료)를 지원해야하는 프로젝트를 하기도 합니다.

이런 경우, 제공받은 프레임워크에 자바스크립트 일부 문법을 지원하지 않아 큰 이슈가 되기도 합니다.

이슈를 해결하기 위해 위해 폴리필(polyfill))과 바벨(Babel)을 적용하는데요. 막연하게 폴리필과 바벨을 구분하지 못한 채, 자바스크립트 버전 이슈를 해결하기 위해 사용하는구나 정도만 알고 있습니다.

 

오늘은 폴리필과 바벨이 무엇이고 어떻게 다르고 왜 필요한지에 대해 공부하는 글을 적어보도록 하겠습니다.

우선 폴리필과 바벨의 단어 정의는 아래와 같습니다.

 

폴리필
브라우저에서 지원하지 않는 코드에 대해 사용 가능하게 구현하는 코드(일반적으로 웹의 JavaScript)입니다.

바벨
ECMAScript 2015+(ES6+) 코드를 이전 JavaScript 엔진에서 실행할 수 있는 JavaScript로 변환하는데 사용되는 JavaScript *트랜스컴파일러입니다.
(차세대 문법(*ES Next)을 ES5 문법으로 번역해주는 역할)

 

정의를 읽어보지만 이 글을 적고 있는 저 조차도 결국 브라우저가 지원하지 않는 코드를 직접 바꾸거나 또는 알아서 변환해주는 정도 인건가. 그렇다면 알아서 해주는 바벨만 사용하지 폴리필은 왜 사용하는걸까 라는 의문점이 드네요.

 

조금 더 공부해보니, 모든 자바스크립트 코드가 바벨에 의해 컴파일이 되지 못한다고 합니다.어떤 코드는 바벨에 의해 컴파일이 되고, 어떤 코드는 컴파일을 못한다고 해요.

 

우선 바벨에 의해 컴파일이 되는 예시를 가져와 봤습니다.

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

이렇게 Bable을 이용해 ES6문법을 ES5 문법으로 바꿔주었지만 새롭게 등장한 Promise와 같이 ES5 문법으로 변환할 수 있는 문법이 없는 경우에는 폴리필(Polyfill)을 사용해야 합니다.

다시 한번 폴리필에 대해 정리해 보자면 최신 문법을 하위 브라우저에서 문제없이 동작하기 위해 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 코드를 뜻합니다.

 

FIND WORDS

#ES Next
ESNext는 작성 시점에 다음 버전을 가리키는 역동적인 이름
#트랜스컴파일러
Source-to-source compile을 transpile라고 부른다. 그렇기 때문에 트랜스파일을 컴파일이라고 부르기도 합니다.

REFERENCE URL

바벨 공식 사이트

What is Babel? · Babel

ES Next 정의

JavaScript 기술 개요 - JavaScript | MDN