폴리필(polyfill)

*polyfill : 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드

쉽게 말해서 구식 브라우저에서 업데이트된 코드를 사용할 수 있게 해주는 것

 

• 자바스크립트는 정기적으로 등록, 분석하여 가치가 있다고 판단되는 제안 - 새로운 문법 또는 기존에 없던 내장 함수의 정의 - 은 https://tc39.github.io/ecma262/ 에 추가되므로 정기적으로 들어가 파악해보자(혹은 소개해주는 유튜브 참고…)
• 명세서(specification)에 등록된다

 

바벨(Babel) #필수

 

왜 사용하는 가?

명세서에 등록된 지 얼마 안된 기능을 사용해 작성한 코드를 특정 엔진에서 지원하지 않을 수도 있다 ➡️ 명세서 내 모든 기능을 모든 엔진이 구현하고 있지 않기 때문

 

이럴 때 바벨을 사용하는 것은 필수다

 

• transpiler로 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줌
• 주요 역할

(1)트랜스파일러(transpiler)

기존 코드 ➡️ 구 표준을 준수하는 코드로 변경

변경된 코드는 웹사이트 형태로 사용자에게 전달

 

(2)폴리필(polyfill) : 구현이 누락된 새로운 기능을 매꿔주는 “fill in” 역할

새로운 문법을 사용한 코드 ➡️ 구 표준을 준수하는 코드로 변경(transpiler)

그러나 새롭게 표준에 추가된 함수는 명세서 내의 정의를 읽고 이에 맞게 직접 함수 구현하여 사용

 

특히 자바스크립트는 매우 동적인 언어라 새로운 함수를 추가하거나 수정해서 최신 표준을 준수 할 수 있게 작업할 수 있다

 

이렇게 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정, 새롭게 구현한 함수의 스크립트 = 폴리필(polyfill)

 

• core js : 다양한 폴리필을 제공, 특정 기능의 폴리필만 사용도 가능
• polypill.io : 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공

 

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

• 모던 자바스크립트를 사용해 작성한 에시는 해당 기능을 지원하는 브라우저에서만 작동
• Google Chrome은 모든 브라우저 중 대개 가장 먼저 최신 기능을 지원한다
• transpiler 없이도 최신 기능을 사용할 수 있기 때문에 데모용을 많이 사용

 

웹팩(web pack)

• 모던 프로젝트 빌드 시스템
• 코드 수정이 일어날 때 마다 자동으로 transpiler 동작
• 자바스크립트 런타임인 node.js에서 동작