자바스크립트 폴리필과 트랜스파일

폴리필(Polyfill)이란?

 

폴리필은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드를 의미합니다. 웹 환경을 빠르게 변화하고 있습니다. ES6 문법이 나오고 TypeScript가 나오고 계속해서 다양한 기술들이 나오겠죠. 이 기술들은 각각의 디바이스와 브라우저를 통해 클라이언트에 전달이 됩니다. 그렇지만 과연 브라우저에 내장된 자바스크립트 엔진이 항상 최신화된 코드를 읽을 수 있을까요?? 실제로 지원이 중단된 internet explorer의 경우 최신 코드를 읽지 못합니다. 이러한 문제를 해결하기 위해 폴리필이 사용됩니다. 폴리필을 사용하면 제가 사용하려는 기능을 지원하지 않는 브라우저에서도 그 기능을 쓸 수 있게 됩니다.

 

트랜스파일(Transpile)이란?

 

트랜스파일은 한 프로그래밍 언어로 작성된 소스코드를 읽어서 동일하거나 다른 프로그래밍 언어로 동일한 결과를 도출하는 소스코드를 생성하는 과정을 의미합니다. 자바스크립트에서는 주로 최신 버전의 언어로 작성된 코드를 이전 버전의 언어로 변환할때 사용됩니다.

 

예를 들어서 ES6+로 작성된 JavaScript 코드를 ES5로 간단히 트랜스파일할 수 있다고 합니다. 

 

폴리필과 트랜스파일의 관계

 

폴리필과 트랜스파일은 자바스크립트에서 서로 보완적인 역할을 하빈다. 트랜스파일이 최신 자바스크립트 문법을 이전 버전의 자바스크립트로 변환을 해준다면, 폴리필은 옛날 브라우저에서도 최신 자바스크립트 기능을 사용할 수 있게 하죠. 이 둘을 함께 사용해서 최신 자바스크립트 기능을 자유롭게 사용하면서도, 다양한 브라우저와 환경에서 원활하게 동작할 수 있도록 유도가 가능합니다.

 

대표적인 폴리필과 트랜스파일

대표적인 폴리필 라이브러리로는 core.js와 polyfill.io가 있습니다. 

 

트랜스파일의 가장 대표적인 예시는 Babel입니다. 

 

리액트에서 자주 문법 오류를 보여주던 바로 그 라이브러리입니다. 그동안 Babel이 대체 뭔데 날 이렇게 귀찮게 만드나 했는데 트랜스파일이라는 것을 오늘 처음 알게 되었네요.

 

 

Babel은 .babelrc 파일을 통해서 코드를 어떻게 변환할건지 세팅을 해줘야 하구요. npx bable <파일명/디렉터리명> 을 입력하면 터미널에 변환 결과가 출력된다고 합니다.