하루하루 꾸준히, 인생은 되는대로

카테고리 없음

자바스크립트 폴리필과 바벨

긤효중 2022. 5. 13. 16:16

자바스크립트는 끊임없이 변하는 언어이다. 새로운 제안(proposal)이 정기적으로 등록, 분석되고, 가치가 있다고 판단되는 제안은 추가된다.

그리고 궁극적으로 명세서에 등록된다.

https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

 

ECMA-262 - Ecma International

ECMAScript® 2020 language specification, 11th edition - ECMAScript is a programming language based on several technologies like JavaScript and JScript.

www.ecma-international.org


자바스크립트 엔진을 만드는 각 조직은 나름대로 우선순위를 매겨서 명세서 내 어떤 기능을 먼저 구현할지 결정한다.

명세서에 등록된 초안(draft)에 있는 제안을 먼저 구현하는 결정도 있다. 


바벨

명세서에 등록된 지 얼마 안된 기능을 사용해 코드를 작성하다 보면 특정 엔진에서 우리가 사용한 코드를 지원하지 않는 경우가 있다.

 

이럴떄 바벨을 사용한다. 바벨은 트랜스파일러(transpiler)로 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다. 

바벨의 주요 역할은 다음과 같다.

 

1 트랜스 파일러 - 

바벨은 코드를 재작성해주는 트랜스파일러 프로그램이다. 바벨은 개발자의 컴퓨터에서 돌아가며 이를 실행하면 기존코드가 구 표준을 준수하는 코드로 바뀐다. 변경된 코드는 웹 사이트 형태로 사용자에게 전달된다.

웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 실행될떄마다 자동으로 트랜스파일러를 동작시킨다.


2 폴리필 -

 

명세서에는 새로운 문법이나 기존에 없던 내장함수의 정의가 추가되곤 한다. 새로운 문법을 사용해 코드를 작성하면 트랜스 파일러가 구 표준을 준수하는 코드로 바꿔준다. 

반면, 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 함수를 구현해야 사용가능하다.

 

이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 

"폴리필"이라고 부른다.