모던 JavaScript 튜토리얼을 읽고 정리하였습니다.

폴리필

새로운 제안(proposal)이 정기적으로 등록, 분석되고, 가치가 있다고 판단되는 제안은 https://tc39.github.io/ecma262/에 추가되고 궁극적으로 명세서(specification)에 등록된다.

자바스크립트 엔진을 만드는 각 조직은 나름대로 우선순위를 매겨 명세서 내 어떤 기능을 먼저 구현할 지 결정한다. 명세서에 등록된 기능보다 초안에 있는 제안을 먼저 구현하기로 결정하는 경우도 있다.

엔진이 표준 전체를 지원하지 않고, 일부만 지원하는 것은 흔한 일이다.

엔진별로 어떤 기능을 지원하는지는 https://kangax.github.io/compat-table/es6/에서 확인할 수 있다.

바벨

명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하다 보면 특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 것을 알게 될 때가 있다. 명세서 내 모든 기능을 모든 엔진이 구현하고 있지 않기 때문이다.

바벨(Babel)은 트랜스파일러(transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다.

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

• 트랜스 파일러 바벨은 코드를 재작성해주는 트랜스파일러 프로그램이다. 바벨은 개발자의 컴퓨터에서 돌아가는데, 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경되고, 이 코드는 웹사이트 형태로 사용자에게 전달된다. 웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 떄마다 자동으로 트랜스파일러를 동작시킨다.
• 폴리필 새롭게 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있다. 자바스크립트는 매우 동적인 언어이므로 어떤 함수라도 스크립트에 추가할 수 있다. 기존 함수의 수정도 가능하다. 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수할 수 있도록 작업할 수 있다. 이렇게 변경된 표준을 준수할 수 있도록 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 “폴리필(polyfill)”이라 부른다. 폴리필은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fiill in) 역할을 한다. 주목할 만한 폴리필 두 가지는 아래와 같다.
  • core js - 다양한 폴리필을 제공한다. 특정 기능의 폴리필만 사용하는 것도 가능하다.
  • polyfill.io - 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스이다.

튜토리얼에서 예시 실행하기

튜토리얼 내 예시 대부분은 아래와 같이 클릭 한번으로 바로 실행 할 수 있다.

alert('ㄱㄴㄷ')

모던 자바스크립트를 사용하여 작성한 예시는 해당 기능을 지워하는 브라우저에서만 작동한다. Google Chrome은 모든 브라우저 중 대개 가장 먼저 최신 기능을 지원한다. 트랜스파일러 없이 최신 기능을 사용할 수 있기 때문에 Chrome은 데모용으로 사용하기 좋다.