[javascript] Polyfill 과 Modernizr

관련 지식
#javascript #Front-end #css #polyfill #modernizr #cross-browsing

Front-end 에서 자바스크립트 개발을 할때 가장 속터지게 하는 것은 바로 브라우저 버전일 것입니다. 사내 업무 웹사이트일 경우 그나마 최신 브라우저로 한정할 수 있지만 대고객 서비스를 하는 웹사이트의 경우 하위 브라우저 지원 여부 결정이 골칫거리일 것입니다.

특히 인터넷 익스플로러 사용률이 높은 국내에서는 익스플로러 존재 자체가 이슈이기도 합니다. 위 이미지는 스탯카운트 에서 구할수 있는 정보입니다. 크롬사용률이 더 높은데? 라고 할 수 있지만 통계 조건에서 윈도우와 맥을 구분할수가 없어서 나온 결과입니다. 만약 윈도우 데스크탑에서만 통계를 뽑는다면 익스플로러 비중이 더욱 높아질 것입니다. 그래도 IE10 이하의 브라우저 사용량이 몇년전에 비해 눈에 띄게 줄었다는 것은 확실한것 같네요.

하지만 위 통계 수치가 개발해야할 웹 사이트의 브라우저 지원 여부에 반드시 반영되진 않을 것입니다. 그리고 크롬과 파이어폭스만 하더라도 사용 가능한 api가 다르기 때문에 평소 사용하지 않던 객체나 함수를 사용한는 것이 꺼려지게 됩니다. 익스플로러는 더욱 심하겠네요.

caniuse.com 참고

낯선 함수나 객체를 사용해야 할때 이게 다른 브라우저에서도 지원하고 싶은지 궁금하면 http://caniuse.com 을 이용하면 됩니다. 도메인 이름을 정말 잘 만든것 같습니다! javascript, css 등 브라우저 지원 여부를 알고 싶으면 검색하면 보여줍니다.

await 키워드는 익스플로러에서 전혀 사용하지 못하는군요ㅠ 익숙해질때까지 이 사이트를 이용하시면 시간이 지난뒤 굳이 찾지 않아도 브라우저별 지원 여부를 암기하실 수 있을것 같습니다.

polyfill 폴리필

http://caniuse.com 은 브라우저 별 지원 여부를 확인 시켜줄뿐 안되는 기능을 되게 해주지는 않습니다. 브라우저에 상관없이 동일한 개발 환경을 지원할수 있도록 코드나 플러그인을 제공하는 것을 polyfill 이라고 합니다.

한가지 예를들어 보겠습니다. Array.prototype.fill() 함수 레퍼런스를 MDN web docs Array.prototype.fill 에서 보겠습니다. 페이지 맨 하단에 브라우저 호환성에 대한 항목이 있는데 익스플로러를 지원하지 않는다고 나와있습니다. 그렇다면 바로 익스플로러와 크롬의 개발자 도구 콘솔 입력창에 Array.prototype.fill 을 입력해 보겠습니다.

좌측이 크롬이고 우측이 익스플로러11 입니다. undefined 로 나오는걸 보니 확실히 지원하지 않는듯 합니다. 그럼 이렇게 생각해볼수 있습니다. 만약 fill() 함수가 정의되지 않았을때 직접 함수 기능을 구현하면 모든 브라우저에서 fill() 함수를 쓸수 있지 않을까? 맞습니다. 그것이 폴리필 구현입니다.

하지만 직접 구현하려니 두려운 마음이 생깁니다. 원래 기능을 충실히 구현할 수 있을까 싶기도 하고 언제 만드나 걱정도 됩니다. 앞서 봤던 MDN web docs Array.prototype.fill 페이지의 하단에 보면 ‘폴리필’ 카테고리에 구현된 소스가 있습니다.

fill() 함수 polyfill 예제 일부)

if (!Array.prototype.fill) {
  Object.defineProperty(Array.prototype, 'fill', {
    value: function(value) {
      // Steps 1-2.
      if (this == null) {
        throw new TypeError('this is null or not defined');
      }
      ... 생략 ...
      // Step 12.
      while (k < final) {
        O[k] = value;
        k++;
      }
      // Step 13.
      return O;
    }
  });
}

폴리필이 어떤것인지 개념이 잡히셨나요?

Modernizr 모더나이저

polyfill 에 대한 자료를 찾다보면 Modernizr 를 보실수도 있습니다. 그런데 Modernizr 는 원하시는 것과 다른 것일수도 있어서 잠깐 다뤄 봅니다. 폴리필 적용을 위해 검색을 하고 있다면 원하는 자료는 많은 기능에 대해 폴리필 구현이 되어있는 모듈이나 기능일 것입니다.

그러나 안타깝게도 Modernizr 는 구현된 솔루션을 제공하는 것이 아닙니다.

공식 사이트의 소개글에 설명이 나와있습니다. Modernizr 는 차세대 기술의 사용 가능 여부를 자동으로 탐지하기 위한 방법을 제공하는데에 목적이 있습니다. 탐지 이후에 어떻게 처리를 할지는 개발자가 정의해야 하는 것이죠.

polyfill 이란 개념을 보면 브라우저 간의 격차를 없앨수 있을것 같지만 실상 그렇지는 않습니다. 왜냐하면 polyfill 로 구현 가능한 한계가 있기 때문입니다. 결국 브라우저 간의 격차는 남을수 밖에 없는데 Modernizr 는 polyfill 의 접근법과는 다르게 ‘탐지->사용못해?->어떻게 할래?(에러처리 or 폴리필처리 or …)’ 같은 절차를 제공하고 있습니다. 물론 저기서 폴리필은 모더나이저가 제공하지 않습니다.

정리

설명이 복잡했습니다만 간단하게 정리하면

• 브라우저 버전과 상관없이 동일한 기능을 사용하고 싶을때
  -> 폴리필
• 브라우저 버전과 상관없이 기능이 사용 가능한지 확인하여 그에 맞는 구현을 하고 싶을때
  -> 모더나이저

가 되겠습니다.