[자바스크립트] 폴리필 (Polyfill)

JavaScript 폴리필(Polyfill)은 새로운 기능을 구현하고, 구현하지 않은 브라우저에서 이전 버전의 자바스크립트 코드를 대신 실행하는 데 사용되는 코드 조각입니다.

 

1. 필요한 이유

 

새로운 자바스크립트 기능이 출시될 때, 이러한 기능은 최신 브라우저에서 잘 작동하지만, 이전 버전의 브라우저에서는 작동하지 않을 수 있습니다. 이러한 경우, 폴리필은 이전 버전의 브라우저에서도 이러한 새로운 기능을 사용할 수 있도록 도와줍니다.

예를 들어, ECMAScript 6(ES6)에서는 let 및 const 키워드를 도입하여 변수를 선언하는 방법을 개선했습니다. 그러나 이러한 키워드는 이전 버전의 브라우저에서 지원되지 않을 수 있습니다. 이 경우, 폴리필을 사용하여 let 및 const 키워드가 지원되지 않는 브라우저에서도 이전의 var 키워드를 사용하여 변수를 선언할 수 있습니다.

폴리필은 대개 기능을 감지하고 해당 기능이 지원되지 않는 경우에만 실행됩니다. 이렇게하면 최신 브라우저에서는 폴리필 코드가 실행되지 않아 성능에 영향을 미치지 않습니다. 그러나 이전 버전의 브라우저에서는 폴리필 코드가 실행되어 기능이 지원됩니다.

폴리필은 일반적으로 자바스크립트 라이브러리나 프레임워크에서 제공되며, 개발자는 필요한 폴리필을 선택하여 프로젝트에 포함시킬 수 있습니다. 또한 많은 오픈 소스 폴리필이 존재하므로 개발자는 필요한 폴리필을 직접 작성할 필요 없이 사용할 수 있습니다.

 

2. 동작 방식 (예시)

 

다음은 ES6에서 추가된 기능 중 몇 가지 예시와 이를 폴리필로 대체하는 방법입니다.

1) let 및 const 변수 선언

ES6에서는 var 키워드 대신 let 및 const 키워드를 사용하여 변수를 선언할 수 있습니다. 이전 버전의 브라우저에서는 let 및 const가 지원되지 않기 때문에 폴리필을 사용하여 이전의 var 키워드를 사용하여 변수를 선언할 수 있습니다.

 

if (typeof window !== 'undefined') {
  (function () {
    'use strict';
    var defineProperty = function (obj, name, value) {
      if (Object.defineProperty) {
        Object.defineProperty(obj, name, {
          value: value,
          configurable: true,
          enumerable: false,
          writable: true
        });
      } else {
        obj[name] = value;
      }
    };

    // 지원되지 않는 브라우저에서 let 및 const 대신 var 사용
    defineProperty(window, 'let', window['let'] || window['var']);
    defineProperty(window, 'const', window['const'] || window['var']);
  }());
}

2) 화살표 함수

ES6에서는 화살표 함수를 사용하여 함수를 더 간결하게 작성할 수 있습니다. 이전 버전의 브라우저에서는 화살표 함수가 지원되지 않기 때문에 폴리필을 사용하여 이전 버전의 함수를 사용할 수 있습니다.

 

if (typeof window !== 'undefined') {
  (function () {
    'use strict';
    var slice = Array.prototype.slice;

    // 지원되지 않는 브라우저에서 화살표 함수 대신 함수 사용
    function bind(fn, context) {
      var args = slice.call(arguments, 2);
      return function () {
        return fn.apply(context, args.concat(slice.call(arguments)));
      };
    }
    window.bind = bind;
  }());
}

3) 클래스

ES6에서는 클래스를 사용하여 객체를 더 쉽게 작성할 수 있습니다. 이전 버전의 브라우저에서는 클래스가 지원되지 않기 때문에 폴리필을 사용하여 생성자 함수를 사용하여 객체를 작성할 수 있습니다.

 

if (typeof window !== 'undefined') {
  (function () {
    'use strict';

    // 지원되지 않는 브라우저에서 클래스 대신 생성자 함수 사용
    function Animal(name) {
      this.name = name;
    }

    Animal.prototype.speak = function () {
      console.log(this.name + ' makes a noise.');
    }

    window.Animal = Animal;
  }());
}

이러한 폴리필 코드는 지원되지 않는 기능을 대체하는 코드입니다. 이를 사용하여 이전 버전의 브라우저에서도 최신 자바스크립트 기능을 사용할 수 있습니다.