[WEB] Polyfill 이란?

Posted by 대혀니_
2020. 11. 9. 17:01 IT/Web

Polyfill은 특정 웹브라우저 (구버전 브라우저 IE10, 9 같은)에서 지원되지 않는 javascript 같은 기능이 있을 때 그걸 매워준다.

 

최신 버전의 웹브라우저는 ajax의 fetch와 같은 기능을 기본 제공하나 예전 웹브라우저가 개발될 당시에는 이런 기술이 만들어진 적이 없으므로 같은 코드라도 제대로 작동하지 않는다.

polyfill 이란 단어 자체가 보충솜이라는 뜻인데 이때 이러한 차이를 메워주는 것이다.

 

기본으로 제공하는 기능을 js의 형태로 배포하여 구버전 브라우저로 접속했을 때 최신 버전에서 당연히 작동하는 최신 기능이 구 웹 브라우저에서 그대로 작동할 수 있게 돕는다.

 

아래에 보이는 ajax 의 fetch 라든가 아니면 input 태그에서 많이 쓰이는 placeholder같은 기능은 매우 유용한 기능인데 구버전 브라우저에서는 제대로 작동하지 않으므로 해당 polyfill js를 넣으면 구버전에서도 사용할 수 있다.

 

그리고 최신 웹 브라우저에서는 로드가 되어도 어차피 무시된다.

 

github.com/github/fetch

 

github/fetch

A window.fetch JavaScript polyfill. Contribute to github/fetch development by creating an account on GitHub.

github.com

github.com/ginader/HTML5-placeholder-polyfill

 

ginader/HTML5-placeholder-polyfill

Small and robust polyfill for the HTML5 placeholder attribut. - ginader/HTML5-placeholder-polyfill

github.com