[React] Polyfill을 이용하여 IE에서도 동작되게 하기

안녕하세요. J4J입니다.

 

이번 포스팅은 Polyfill을 이용하여 IE에서 동작되지 않는 서비스를 동작되도록 하는 방법에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

Polyfill이란?

 

Polyfill은 IE와 같은 구형 브라우저에서 동작되지 않는 최신 기능을 동작할 수 있도록 도와주는 기술입니다.

 

Babel에 대해 아시는 분이 계시다면 Babel이 있는데 Polyfill을 왜 사용하지? 라는 생각이 드실겁니다.

 

 

 

 

Babel은 트랜스파일러로써 최신 ES버전에서 나온 여러 기능들을 구형 브라우저가 읽을 수 있는 문법으로 변경시켜주는 역할을 담당합니다.

 

하지만 여기서 문제는 이전에 없던 기능들이 새로나온 경우입니다.

 

대표적인 케이스가 ES6에서 등장한 Promise, Map, Set 등이 있습니다.

 

해당 기술들은 이전에는 없던 기술들이기 때문에 Babel이 구형 브라우저가 읽을 수 있는 문법으로 변경해줄 수 있는 것이 없습니다.

 

그렇기 때문에 Babel을 사용하더라도 거의 모든 서비스에서 비동기 처리를 위해 사용되는 Promise, Async, Await 등을 사용해버면 구형 브라우저에서는 서비스 사용이 불가해집니다.

 

 

반응형

 

 

이런 문제를 해결하기 위해 사용되는 것이 Polyfill입니다.

 

Polyfill은 구형 브라우저에서 사용되지 않았던 기술들에 대한 코드 정보들이 담겨있기 때문에 최신 기술들을 사용하더라도 구형 브라우저에서 동작할 수 있게 도와줍니다.

 

 

 

Polyfill 설정 방법

 

[ 1. 패키지 설치 ]

 

$ npm install react-app-polyfill

 

 

 

[ 2. index.tsx 파일에 polyfill import ]

 

import * as React from 'react';
import ReactDom from 'react-dom';
import App from './App';

import 'react-app-polyfill/ie11'; // 추가
import 'react-app-polyfill/stable'; // 추가

ReactDom.render(<App />, document.querySelector('#root'));

 

 

 

[ 3. package.json browserslist 추가 ]

 

{
  "browserslist": [
    "ie 11"
  ],
}

 

 

 

테스트

 

위의 설정을 하기 전에는 크롬과 IE를 각각 접속했을 때 다음과 같은 화면을 마주할 수 있었습니다.

 

설정 이전

 

 

728x90

 

 

Hello, API !! 문구는 Async/Await을 이용하여 서버로부터 가져오는 데이터인데 크롬은 정상적으로 동작하고 IE에서는 아무 반응이 없습니다.

 

하지만 위의 설정을 하게 되면 다음과 같은 결과를 확인할 수 있습니다.

 

설정 이후

 

 

 

 

 

 

 

 

이상으로 Polyfill을 이용하여 IE에서 동작되지 않는 서비스를 동작되도록 하는 방법에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.