[React.js] 익스플로러(IE) 호환

 IE의 ES6문법 미지원 문제 

Browser compatibility(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals)

React는 기본적으로 JavaScript ES6이상의 문법을 사용한다.

위와 같이 Internet Explorer은 ES6문법을 지원하지 않기 때문에, 별도의 호환 과정이 필요하다.

React 프로젝트를 IE11에서 실행 시 아래와 같은 에러가 발생한다.

이러한 에러는 react-app-polyfill을 사용해 해결이 가능하다.

 

 해결방법 : react-app-polyfill 설치

• React 개발에서 사용하는 다양한 문법을 변환해주는 라이브러리이다.
• Promise, window.fetch, Symbol, Object.assign, Array.from + [IE9 Map, Set]와 같은 필요한 것만 포함하고 있어 사이즈가 작고 가벼운게 특징이다.설치 방법

1. npm install or yarn add

npm install react-app-polyfill
# or
yarn add react-app-polyfill

 

2. package.json 내부에 ie 설정

"development": [
  "ie 11", // 한 줄 추가
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
]

 

3. index.js 내부에 polyfill import

// IE9의 경우
import 'react-app-polyfill/ie9';
// IE11의 경우
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

 

4. node_modules/.cache 폴더 삭제 후, 프로젝트 재실행

stable은 package.json의 browserslist에 해당하는 브라우저에 대해 안정적인 코드 사용이 가능하다.

 

그럼에도 불구하고 아래와 같은 에러가 발생한다면?

This package has been deprecated in favor of separate inclusion of required parts of core-js and regenerator-runtime. See our website @babel/polyfill for more information.

 

 해결 방법 : @babel/polyfill 설치 

babel은 기본적으로 ES6(ecma2015) 문법으로 작성한 코드를 ES5 환경에서 동작할 수 있도록 문법적인 변환을 해주지만 ES5에 존재하지 않는 ES6의 매서드나 생성자들까지 지원해주지는 않는다.

 

그래서 ES5로 동작하는 하위 브라우저를 지원하는 서비스를 개발할 때는 Polyfill을 추가하여 개발 편의성을 향상시킬 수 있다.

 

설치하기 

babel 7.4.0 이후부터 @babel/polyfill이 deprecated되고

core-js와 regenerator-runtime을 직접 사용하는 방식을 제안하고 있다.

아래 명령어를 이용해서 core-js와 regenerator-runtime을 설치한다.

npm install core-js regenerator-runtime

그리고 index.js에 아래 코드를 추가한다.

// IE9의 경우
import 'react-app-polyfill/ie9';
// IE11의 경우
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// 추가할 부분
import 'core-js/stable';
import 'regenerator-runtime/runtime';

 

참고 자료:

리액트 익스플로러(IE11) 연동하기

react, IE에서 호환(크로스브라우징)

Babel polyfill을 core-js 3로 설정