Polyfill이란?

최근에 신규 기능 개발을 진행하면서, EyeDropper API를 사용이 필요했다. 사용자가 화면에 표시된 색상을 선택하고 그 정보를 자바스크립트로 가져올 수 있는 Web API 이였는데,  아직 대부분의 브라우저에서 해당 API를 공식 지원하지 않거나, 지원 범위가 제한적이라 프로젝트에 바로 적용하는 데에는 무리가 있었다. 🥲💦

이때 팀원분이 EyeDropper Polyfill 이 있다는 것을 알려주셨는데, Polyfill이 무엇인지, 그리고 EyeDropper Polyfill은 어떻게 구현되어 있는지 정리하고자 한다.

Polyfill이란?

Polyfill은 쉽게 말해 최신 브라우저 기능을 지원하지 않는 구형 브라우저를 위해 그 기능을 대신 구현해 주는 ‘코드’이다.
예를 들어, ES6에서 새롭게 도입된 메서드나 API들이 IE나 오래된 브라우저에는 없는 경우가 많은데, 이때 ‘이미 구형 환경에서도 동작하도록’ JS 라이브러리나 코드로 직접 재현해 내는 것이 Polyfill이라고 한다.

즉, 특정 기능을 수행하지 못하는 브라우저에서도 그 기능이 가능한 것처럼 동작하게 만들어준다.

 

✅ 정리하자면

• 지원하지 않는 기능을 에뮬레이션 한다.
• 최신 사양을 오래된 브라우저에서도 사용 가능하게 해 준다.

EyeDropper Polyfill 코드 구현 방식 살펴보기

eyedropper-polyfill는 EyeDropper API를 정식 지원하지 않는 브라우저에서 동일한 사용자 경험을 제공하도록 해주는 역할을 한다.

코드를 살펴보면 1. 브라우저 환경에서 EyeDropper API 지원 여부를 점검한 뒤, 지원하지 않을 경우 2. Polyfill을 동적으로 주입하는 로직이다.

import { isEyeDropperSupported } from './support';
import { attachPolyfill } from './attach';

if (!isEyeDropperSupported()) {
  attachPolyfill();
}

1. isEyeDropperSupported() 함수 호출
이 함수는 현재 실행되는 환경(브라우저)에서 EyeDropper API를 지원하는지 판별한다.

export function isEyeDropperSupported(): boolean {
  return 'EyeDropper' in window;
}

if (! isEyeDropperSupported()) {... }을 통해 브라우저가 EyeDropper를 지원하지 않는 경우에만 attachPolyfill(); 이 실행된다.

 

2. attachPolyfill 함수 호출

import { EyeDropperPolyfill } from './eyedropper';

export function attachPolyfill() {
  if (!Reflect.defineProperty(window, 'EyeDropper', { value: EyeDropperPolyfill })) {
    throw Error("Error attaching `EyeDropper` polyfill: couldn't attach `EyeDropper` to `window`");
  }
}

• EyeDropperPolyfill 클래스를 불러온다. 이 클래스는 실제 브라우저가 제공하는 EyeDropper API를 흉내 내어 구현한 폴리필이다
• Reflect.defineProperty 사용
  • Reflect.defineProperty는 Object.defineProperty와 거의 유사하게 동작하지만, writable, enumerable, configurable 등의 특성을 조금 더 세밀하게 조정할 수 있다고 한다.

간단하게 정리를 하자면

• 우선 현재 브라우저가 EyeDropper API를 지원하는지 확인한다. (지원한다면,  추가 작업 없이 네이티브 API를 사용!)
• 지원하지 않는다면 attachPolyfill()을 통해 EyeDropper 클래스를 정의하고, 기존 코드에서 EyeDropper API를 사용하는 부분이 문제없이 동작하게 만든다.

🤔  Polyfill에 대해 알아가다 보면 “지원하지 않는 API는 그냥 모두 폴리필로 해결하면 되지 않을까?”라는 생각이 들기가 쉬운 것 같다. 결론부터 말하자면 무분별하게 폴리필을 도입하는 것은 지양해야 하는데, 왜냐면 폴리필도 결국 JS 코드이기 때문에 무분별하게 사용하면 결국 로딩해야 하는 스크립트 양이 늘어나고, 실행해야 할 코드도 많아지고 결국 앱의 성능 저하로 이어질 수 있다고 한다. 따라서 폴리필은 반드시 필요한 부분에만, 가능한 한 가볍게 적용하도록 하자. 

 

https://developer.mozilla.org/ko/docs/Glossary/Polyfill

https://toss.tech/article/smart-polyfills