react ie 11 적용하기 ( feat.polyfill )

자사 홈페이지를 nextjs로 제작을 했다. 프로토 타입이 나온 후에 테스트를 하던 중 ie에서 작동이 안되는 이슈가 있었다. (개발자의 적 ie..)

ie의 개발자 도구를 열어서 확인을 해본 결과 ie에서 지원하지 않는 자바스크립트 함수 때문인걸로 추론됐다.

그에 대한 해결책을 찾던 중 polyfill이라는 것을 알게 되었다.

Polyfill 이란

위키피디아에서는 아래와 같이 설명하고 있다.

웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.

기능을 지원하지 않는 웹 브라우저에서 원하는 기능을 구현할 수 있으나, 폴리필 플러그인 로드 때문에 시간과 트래픽이 늘어나고, 브라우저별 기능을 추가하는 것 때문에 코드가 매우 길어지고, 성능이 많이 저하된다는 단점이 있다.

 - 위키피디아

쉽게 생각하면 babel과 비슷한 느낌인것 같다. 좀 더 자세하게 설명되어 있는 글이 있어 추가하자면

 - 새로 추가된 전역 객체들(Promise, Map, Set)을 사용가능한 객체로 바꾸어주는 개념

 - 브라우저 파편화를 해결하기 위해 지원하지 않는 공백을 매꾸는 스크립트나 기타 코드를 끼워넣어줌

Bable 과 Polyfill 은 구분되어야 하는 개념인데, Babel 이 Javascript 의 Syntax 가 아닌 것들을 Javascript 에서 사용할 수 있게 만들어 준다면, Polyfill 은 Javascript 의 Syntax 로 읽히지만 정의되어 있지 않은 객체들을 정의해주는 개념을 말한다. 

 예를들어 Promise 객체는 기존에 존재하지 않는 ES6 에서 추가된 객체로, ES6 이전에서 new Promise() 를 하는 경우 Javascript 의 Syntax 이지만 정의되지 않는 function 이라는 의미에서 'Promise is not a function' 의 결과를 보여준다. Polyfill 개념을 이용해 Promise 를 사용할 수 있도록 정의해주는 것을 Babel-Polyfill 이 해줄 수 있다.

 - 은져미 블로그

해당 설명을 보고나니 자바스크립트 함수의 문제라기 보다는 es6에서 새로 생긴 Map과 Set, promise 객체를 ie에서는 지원을 하지 않아 오류가 났고, polyfill이 이를 정의해줌으로써 ie에서도 정상적으로 작동이 된 것 같다.

polyfill 적용

react-app-polyfill라이브러리를 사용하여 적용했다. 사용법은 매우 간단하다.

npm 설치

npm install react-app-polyfill

코드에 적용하기

// This must be the first line in src/index.js

import 'react-app-polyfill/ie11';

react의 가장 첫 컴포넌트에 라이브러리를 import해주면 끝!

next.js를 사용했기 때문에 _app.js에 적용했다.

ie빨리 사라졌으면..

참고 : https://www.npmjs.com/package/react-app-polyfill