JS ES6 - Polyfill

sanha_OvO·2021년 11월 18일
0

JavaScript

목록 보기
6/8

Polyfill : 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.


폴리필?

어떠한 언어든 메이저 업데이트가 발생하는 법이고, 업데이트에 따라 기능들이 추가된다.
그 과정에서 기존에 지원하던 표준들을 배제하는 경우는 흔히 있다.
자바스크립트 역시 ES6 이상 버전은 몇몇 오래된 브라우저(대표적으로 IE)에서 더 이상 동작하지 않는다.

여기서 현재 JS 엔진 별로 지원하는 브라우저를 확인 할 수 있다.

그럼에도 구버전의 브라우저를 사용하는 사용자를 위해 최신 엔진의 기능을 구현해야 할 경우, 브라우저에서 지원하지 않는 기능을 사용할 수 있게해주는 플러그인을 사용하는데 이를 폴리필이라고 한다.


Babel과 Polyfill

추후 바벨에 대해서 포스팅을 할 예정이지만 바벨은 트랜스파일러의 역할을 한다.
바벨은 ES6 이상(ESNext)에서 지원하는 문법을 ES5에서 사용가능 하도록 한다.

다만 ES6에서 새로 추가된 Map, Promise 등과 같은 전역객체와 메소드들은 ES5에서 존재하지 않으므로 알맞는 코드로의 변환이 힘들어진다.

이 때, 폴리필 모듈이 있다면 브라우저에서 런타임에 해당 문법들을 읽을 때 그에 맞는 코드들을 넣어줄 수 있게 된다.


대표적인 폴리필 모듈

1. core js

core js
폴리필을 위한 자바스크립트 표준 모듈.
다양한 폴리필을 제공하며 특정기능의 폴리필만 사용하는 것도 가능함

2. polyfill.io

polyfill.io
기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스

profile
Web Developer / Composer

0개의 댓글