[JavaScript] 폴리필(Polyfill)과 바벨(Babel)이란?

폴리필(Polyfill)이란 무엇인지 알아보겠습니다.

 

 

[ 폴리필 Polyfill ] 

브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환환 코드를 의미합니다.

즉, 최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드를 말합니다.

 

아래는 pollyfill.io의 공식 레퍼런스입니다. 해당 사이트에선 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주고 있습니다. 

아래 글은 해당 사이트에서 Pollyfill에 대해서 말해주고 있습니다. 

 

 

📌 세계적으로 다양한 브라우저와 브라우저 버전을 사용하고 있으며, 각 브라우저에는 나머지 기능 집합이 약간씩 다릅니다. 이것은 브라우저용 개발을 어려운 작업으로 만들 수 있습니다. 인기 있는 브라우저의 최신 버전은 이전 브라우저에서 할 수 없는 많은 작업을 수행할 수 있지만 여전히 이전 브라우저를 지원해야 할 수도 있습니다. Polyfill.io를 사용하면 누락된 기능을 polifill로 다시 생성하여 다양한 브라우저를 더 쉽게 지원할 수 있습니다. 지원하는 브라우저와 지원하지 않는 브라우저에서 최신 기능을 사용할 수 있습니다. 

 

 

즉, 정리하자면 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수할 수 있게 작업할 수 있습니다. 이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 "폴리필(Polyfill)"이라 부릅니다. 

 

 

 

[ 바벨 Babel ]

Babel은 트랜스파일러입니다. ES6에서 쓰이는 최신 문법을 쓸 수 없기 때문에 ES5로 문법을 바꿔주는 역할을 합니다. 

Polyfill과의 차이점은 Polyfill은 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나 새롭게 구현을 해서 누락된 새로운 기능을 메꿔주는 역할을 한다는 것입니다.

 

예를 들어 ES6에서 새롭게 등장한 Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우엔 에러가 발생하기 때문에 이 경우엔 Polyfill이 사용됩니다.