폴리필(프로그래밍)

Polyfill (programming)
다른 용도는 폴리필(동음이의)을 참조하십시오.

웹 개발에서 폴리필은 기능을 기본적으로 지원하지 않는 웹 브라우저에 기능을 구현하는 코드입니다.대부분의 경우 HTML5 또는 CSS 웹 표준, 즉 오래된 브라우저에서는 확립된 표준(일부 브라우저에서는 지원됨) 또는 기존 브라우저에서는 제안된 표준(어느 브라우저에서도 지원되지 않음)을 구현하는 JavaScript 라이브러리를 말합니다.형식적으로는 "polyfill은 브라우저 [1]API를 위한 심입니다."

폴리필을 사용하면 웹 개발자는 API가 브라우저에 의해 지원되는지 여부에 관계없이 API를 사용할 수 있으며 일반적으로 최소한의 오버헤드로 사용할 수 있습니다.일반적으로 먼저 브라우저가 API를 지원하는지 여부를 확인하고 사용 가능한 경우 API를 사용하며, 그렇지 않은 경우 자체 [1][2]구현을 사용합니다.폴리필 자체는 지원되는 다른 기능을 사용하기 때문에 브라우저마다 다른 폴리필이 필요할 수 있습니다.이 용어는 동사로도 사용됩니다. 폴리필링은 피쳐에 대한 폴리필을 제공합니다.

정의.

이 용어는 Remy Sharp에 의해 만들어진 신조어로,[3][4] 그는 2009년 HTML5 소개라는 책을 공동 집필하면서 "JavaScript(또는 Flash 또는 기타)를 사용하여 API를 복제한다"는 의미의 단어를 필요로 했다.형식적으로 "shim은 오래된 환경에 새로운 API를 제공하는 라이브러리이며, 그 환경의 [1]수단만 사용합니다."폴리필은 이 정의에 정확히 부합하며, 초기 폴리필에 [5]대해서도 심이라는 용어가 사용되었습니다.단, Sharp에는 비투명 API 및 레이아웃용 스페이서 GIF 등의 회피책이 포함되어 있습니다.shim.gif, 그리고 점진적인 강화와 우아한 저하와 같은 유사한 용어가 적절하지 않아서, 그는 새로운 [4]용어를 발명했다.이 용어는 다목적 충전 페이스트 브랜드인 폴리필라(Polyfilla)와 벽의 균열과 구멍을 막는 데 사용되는 페이스트와 "다양한 방식으로 (기능적으로) 구멍을 메운다"는 의미에 바탕을 두고 있습니다.이 단어는 특히 폴 아이리쉬와 모더니즈르 [4][6]문서에서 사용되었기 때문에 그 이후로 인기를 얻었다.

Sharp의 차이점은 다음과 같습니다.[3]

Polyfill이 Shim과 같은 기존 기술과 다른 점은 Polyfill 스크립트를 삭제해도 코드는 계속 작동하며 Polyfill을 삭제해도 변경되지 않습니다.

이 구별은 다른 [1]저자들이 그린 것이 아니다.때때로 심, 폴리 매립 및 폴백 사이에 다양한 다른 구분이 생기기도 하지만 일반적으로 인정되는 구분이 없습니다. 대부분의 경우 폴리 매립을 [7]심의 한 형태로 간주합니다.폴리필러라는 용어도 가끔 있습니다.[8]

예

노심 매개체

core-js는[9] 가장 인기[10] 있는 강력한[11] JavaScript 표준 라이브러리 폴리필입니다.최대 2021년까지 ECMAScript용 폴리필 포함: 약속, 기호, 컬렉션, 반복기, 유형 어레이, 기타 많은 기능, ECMAScript 제안, 크로스 플랫폼 WHATWG/W3C 일부 기능 및 다음과 같은 제안URL. 필요한 기능만 로드하거나 글로벌 네임스페이스 오염 없이 사용할 수 있습니다.이것은 Babel과 통합되어 필요한 core-js 모듈을 코드에 자동으로 주입할 수 있습니다.

HTML5 Shiv

9 이전 버전의 IE에서는 다음과 같은 알 수 없는 HTML 요소가 있습니다.<section>그리고.<nav>는 빈 요소로 해석되어 페이지의 중첩 구조가 깨지고 CSS를 사용하여 이러한 요소를 스타일링할 수 없게 됩니다.가장 널리 사용되는 폴리필 중 하나인html5shiv는 [a]IE의 또 다른 기발한 기능을 이용하여 이 버그를 회피합니다.callingdocument.createElement("tagname")각 새로운 HTML5 요소에 대해 IE가 올바르게 해석하도록 합니다.또한 이러한 HTML5 요소에 대한 기본 스타일링도 포함되어 있습니다.

- 무광택시

대부분의 폴리필은 구식 브라우저를 대상으로 하지만 일부는 단순히 최신 브라우저를 좀 더 발전시키기 위해 존재한다.Lea Verou의 -prefix 프리 폴리필은 폴리필로, 개발자가 모든 벤더 프리픽스를 쓸 필요가 없는 대신 현재 브라우저가 여러 CSS3 속성의 수정되지 않은 버전을 인식할 수 있도록 합니다.페이지의 스타일시트를 읽고 수정되지 않은 속성을 현재 브라우저에서 인식되는 접두사 속성으로 바꿉니다.

선택

Keith Clark의 Selectivizr은 많은 CSS3 셀렉터가 IE 8 이하에서 작동하도록 하는 인기 있는 폴리필입니다.페이지의 스타일시트를 읽고 다수의 기존 CSS3 셀렉터를 찾은 후 JavaScript 셀렉터 라이브러리를 사용하여 문서에 해당 셀렉터와 일치하는 요소를 쿼리하고 해당 요소에 스타일을 직접 적용합니다.jQuery와 같은 여러 JavaScript 선택기 라이브러리를 지원합니다.

플렉시

CSS3에서 가장 기대되는 기능 중 하나인 Flexible Box Layout(일명 플렉시블 박스 레이아웃)입니다.Flexbox)는 인터페이스 요소를 배치하기 위한 매우 강력한 도구가 될 것입니다.WebKit 및 Mozilla 엔진은 수년간 예비 드래프트 구문을 지원했습니다.Flexie는 IE 및 Opera에서 동일한 구문을 지원합니다.그러나 초안 사양은 Flexie에서 아직 지원하지 않는 새로운(그리고 훨씬 더 강력한) 구문을 대폭 수정했습니다.Flexie는 이전 구문과 함께 사용할 수 있지만 개발자는 향후 브라우저에서도 새로운 구문을 포함해야 합니다.

CSS3 파이

PIE(Progressive Internet Explorer)는 IE 8 이하의 경우 테두리 반지름 및 상자 그림자, IE 9 이하의 경우 선형 그라데이션 배경 등 IE에서 가장 일반적인 CSS3 상자 장식 속성을 구현합니다.HTC 동작(IE 전용 기능)으로 호출되어 특정 요소에서 지원되지 않는 CSS3 속성을 검색하고 IE 6~8의 VML 및 IE 9의 SVG를 사용하여 이러한 속성을 렌더링합니다.렌더링은 대부분 네이티브 브라우저 구현과 구별할 수 없으며 동적 DOM 수정을 잘 처리합니다.

JSON 2

Douglas Crockford는 원래 JSON 데이터 형식을 읽고 쓰기 위한 API로 json2.js를 작성했습니다.브라우저 벤더가 API를 네이티브로 구현하여 사실상의 표준으로 만들기로 결정했을 정도로 널리 쓰이게 되었습니다.json2.js가 새로운 브라우저에 네이티브 기능을 구현하고 있기 때문에 라이브러리가 아닌 폴리필이 되었습니다.

es5심

ECMAScript 5th Edition("ES5")은 유용한 새로운 스크립트 기능을 제공합니다.또한 오래된 JavaScript 엔진과의 구문 호환성이 있기 때문에 대부분의 경우 내장된 JS 오브젝트에 패치 메서드를 적용함으로써 폴리필링할 수 있습니다.이 es5-shim polyfill은 두 부분으로 구성되어 있습니다.es5-shim.js에는 완전히 폴리필할 수 있는 메서드가 포함되어 있으며 es5-sham.js에는 다른 메서드의 부분적인 구현이 포함되어 있습니다.기타 메서드는 기본 엔진에 너무 의존하여 정확하게 동작하지 않습니다.

플래시 캔버스

FlashCanvas는 Adobe Flash 플러그인을 사용하여 HTML5 Canvas API를 구현한 것입니다.드물게 상용 폴리필로, 무료 버전뿐만 아니라, 섀도우와 같은 고급 기능이 부족한 무료 버전도 있습니다.

MediaElement.js

John Dyer의 MediaElement.js 폴리필 지원:<video>그리고.<audio>Flash 또는 Silverlight 플러그인을 사용하는 오래된 브라우저에서 HTML5 MediaElement API를 포함한 요소를 사용할 수 있습니다.또한 이러한 요소에 대한 미디어 플레이어 UI(옵션)를 제공하여 모든 브라우저에서 일관성을 유지합니다.

브라우저 ID

주요 기사: Mozilla Persona

Mozilla에서 제안한 인증 프로토콜이 [12]트랙션을 획득하지 못했습니다.

Webshims lib

Alexander Farkas의 Webshims Lib는 다른 많은 폴리필을 하나의 패키지로 집약하여 방문 브라우저에 필요한 폴리필만 조건부로 로드합니다.

「 」를 참조해 주세요.

메모들

  1. ^ 여기서 shiv라는 용어를 사용하는 것은 [3]심에 대한 말장난이나 실수입니다.

레퍼런스

  1. ^ a b c d Luis Ángel Pérez Castillo (2019). Speaking JavaScript.
  2. ^ "일반적으로 브라우저가 API를 지원하는지 여부를 확인합니다.그렇지 않으면 polyfill은 자체 구현을 설치합니다.어떤 경우에도 API를 사용할 수 있습니다."
  3. ^ a b c Bruce Lawson; Remy Sharp. "Introducing Polyfills". Introducing HTML5. pp. 276–277.
  4. ^ a b c Sharp, Remy. "What is a polyfill?". Retrieved 13 January 2012.
  5. ^ Ian Hickson (2008-01-23). "Mistakes, Sadness, Regret". This piece of information makes building an HTML5 compatibility shim for IE7 far easier than had previously been assumed.
  6. ^ "HTML5 Cross browser Polyfills". GitHub. Archived from the original on 2010-09-28.
  7. ^ "What is the difference between a shim and a polyfill?".
  8. ^ Chuck Hudson; Tom Leadbetter (2011). HTML5 Developer's Cookbook. p. 121.
  9. ^ "Core-js". GitHub. 26 October 2021.
  10. ^ "Airbnb-js-shims vs core-js vs core-js-pure vs es5-shim vs es6-shim vs js-polyfills vs polyfill-library vs polyfill-service NPM trends".
  11. ^ http://kangax.github.io/compat-table/es6/ #babel7corejs3
  12. ^ "navigator.id". Mozilla Developer Network. 30 June 2012.

외부 링크