폴리필 (polyfill)이 뭘까

폴리필 - Polyfill

폴리필(polyfill)이란?

폴리필은 웹 개발에서 사용하는 용어로, 브라우저가 원래 지원하지 않는 기능을 스크립트를 통해 구현하여 해당 기능을 사용할 수 있도록 만드는 기술을 말한다.

웹 표준이나 ECMAScript(자바스크립트 표준) 같은 표준은 시간이 지남에 따라 새로운 기능이 추가되고 기존의 기능이 개선된다. 하지만 모든 브라우저가 새로운 표준을 바로바로 지원하지 않으며 추후 지원이 가능한 시점을 예상하기도 어렵다. 또한 이런 브라우저의 지원 여부와 상관없이 사용자가 오래된 브라우저를 사용하고 있다면 새롭게 지원하는 기능을 적용하여 사용할 수 없게 된다. 이런 경우, 웹 개발자는 폴리필을 사용하여 해당 기능을 이전 버전의 브라우저에서도 사용할 수 있게 할 수 있다.

가장 흔한 예로 ES6에 도입된 Promise 객체는 IE에서는 지원되지 않는다. 하지만 Promise 기능을 폴리필로 구현하면, IE에서도 Promise를 사용할 수 있게 된다.

폴리필 동작

폴리필은 웹 페이지가 로드되는 과정에서 동작한다.

사용자가 웹 페이지를 요청하면 서버는 해당 페이지와 함께 폴리필을 포함한 자바스크립트 파일들을 클라이언트에게 전달하게 된다. 웹 브라우저는 전달받은 파일들을 로드하고 실행하는 과정에서 폴리필이 동작하게 된다

기능 감지: 폴리필은 보통 '기능 감지(feature detection)' 방식을 사용한다. 이는 웹 브라우저가 특정 기능을 지원하는지를 확인하는 방법이다. 예를 들어, 웹 브라우저가 Promise 객체를 지원하는지 확인하려면 다음과 같이 코드를 작성할 수 있다.

if (typeof Promise === 'undefined') {
    // Promise를 지원하지 않는 경우...
}

1. 기능 감지를 통해 웹 브라우저가 특정 기능을 지원하지 않음을 확인하면, 폴리필은 그 기능을 자바스크립트로 구현한다.
2. 이렇게 구현된 코드가 웹 페이지에 로드되면서 해당 기능을 브라우저에 추가하게 된다.
3. 위의 코드에서는 Promise를 지원하지 않는 경우에 해당하는 코드 부분에 Promise를 구현한 코드를 추가하게 된다.
4. 폴리필이 적용된 이후에는, 웹 페이지에서는 해당 기능을 웹 브라우저가 지원하는 것처럼 사용할 수 있다.

기능 감지?

기능 감지는 주로 웹 페이지가 로딩될 때, 브라우저에서 자바스크립트 코드를 해석하고 실행하는 과정에서 이루어진다. 실행하는 주체는 웹 브라우저이며, 웹 브라우저는 제공받은 자바스크립트 코드를 해석하고 실행하는 역할을 하게 된다.

기능 감지 코드는 보통 스크립트 로딩의 초기 단계, 즉 스크립트가 로드되자마자 실행되도록 작성된다. 왜냐하면 가장 먼저 실행이 되어야 웹 페이지가 정상적으로 렌더링되고, 기능이 활성화될 때 필요한 폴리필이 누락되지 않기 때문이다.

실제 구동 방식

1. 폴리필 로드: 웹 브라우저는 웹 페이지와 함께 전달받은 자바스크립트 파일들을 로드한다.
2. 폴리필 실행: 로드된 자바스크립트 파일들은 웹 브라우저에 의해 실행되는데, 폴리필은 이 때 기능 감지를 통해 웹 브라우저가 특정 기능을 지원하는지 확인하고, 지원하지 않는다면 해당 기능을 자바스크립트로 구현하여 웹 브라우저에 추가한다.
3. 폴리필 사용: 폴리필이 적용된 이후에는 웹 페이지의 다른 자바스크립트 코드들이 폴리필이 제공하는 기능을 마치 웹 브라우저의 기본 기능처럼 사용할 수 있게 된다.