폴리필이란?

저와 같은 경우 의미를 추론하기가 쉽지 않은 맥락에서 폴리필이라는 단어를 이전에 들었을 가능성이 있습니다. 배우고 싶은 것들을 적어보는 새로운 경향과 그에 따른 토론 덕분에
, 폴리필이 무엇인지 더 잘 이해할 수 있었습니다.

폴리필은 특정 속성, 기능 또는 구문이 브라우저나 환경에서 지원되지 않을 때 백업 역할을 하는 코드입니다. JavaScript 및 CSS와 함께 주로 사용되는 것을 보았지만 언어에 따라 다릅니다. 그것이 말이 되지 않는다면, MDN의 정의를 살펴봅시다:

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

새 기능은 모든 브라우저에서 즉시 지원되지 않습니다. nullish 병합 연산자 또는 Array.prototype.flatMap 와 같은 새로운 ES2019 기능을 사용하도록 코드를 리팩토링하고 싶다고 상상해 보십시오. 이 경우 이전 브라우저에서 유효한 JavaScript로 인식하지 못하기 때문에 코드가 손상됩니다. 이 경우 폴리필은 새로운 기능이 이전 버전과 호환되도록 백업을 제공할 수 있습니다.

nullish 병합 연산자에 대한 MDN 페이지의 예제 코드를 자세히 살펴보겠습니다.

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

이제 Safari 13.0(현재 지원되지 않음)에서 실행해 보겠습니다.

SyntaxError: Unexpected token '?'

작성 시점에서 ?? 연산자는 글로벌 사용자의 77.08%에 대해 지원됩니다. 프로덕션에서 사용하는 경우 잠재적인 사용자의 큰 부분을 무시하는 것입니다. 이 문제를 해결하려면 ?? 폴리필을 검색하여 코드에 추가하여 새 구문이 지원되는 브라우저에서 작동하고 폴리필이 지원되지 않는 이전 브라우저에서 작동하도록 할 수 있습니다.

고맙게도 실제로 나가서 폴리필을 검색하고 코드베이스에 수동으로 추가할 필요가 없습니다. Babel은 폴리필 추적에 대해 걱정할 필요 없이 최신 JavaScript 구문을 작성할 수 있게 해주는 도구(컴파일러, 트랜스파일러 또는 트랜스컴파일러라고도 함)의 예입니다.

코드베이스에 Babel을 설치하면 다음과 같이 작성할 수 있습니다.

var foo = object.foo ?? "default";

다음으로 자동 변환됩니다.

var _object$foo;

var foo = (_object$foo = object.foo) !== null && _object$foo !== void 0 ? _object$foo : "default";

또 다른 흥미로운 예는 here 에서 찾을 수 있는 Array.prototype.map 에 대한 폴리필입니다.

끝으로, 새로운 기능을 기본적으로 지원하기 위해 작동하는 브라우저 및 환경과 달리 폴리필을 독점적으로 사용하는 것은 성능 및 기능상의 이유로 좋은 생각이 아니라는 점을 언급할 가치가 있습니다.

읽어 주셔서 감사합니다. 다음시간까지 👋
Unsplash의 표지 사진T.H. Chia

자원

https://developer.mozilla.org/en-US/docs/Glossary/Polyfill

https://caniuse.com/mdn-javascript_operators_nullish_coalescing

https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator