ReactJS에서 IE 11 호환 처리
1. react-app-polyfill
- 리엑트 개발에서 사용하는 다양한 문법을 변환해주는 라이브러리입니다.
+ Promise, window.fetch, Symbol, Object.assign, Array.from + [ IE9 Map, Set ]등 최소한만 포함하고 있어 사이즈가 작고 가벼운 게 특징
- 설치
$> npm install react-app-polyfill
- 사용법
+ stable은 package.json의 browserslist에 해당하는 브라우저에 대해 안정적인 코드를 사용 가능
// index.js import 설정
// IE9의 경우
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
// IE11의 경우
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
2. @babel/polyfill
- 프로젝트에서 async, await, function*를 프로젝트에서 활용하는 경우 설치
- 설치 ``` $> npm install core-js regenerator-runtime ```
- 사용법 ``` //index.js import 설정 import 'core-js/stable'; import 'regenerator-runtime/runtime'; ```
3. IE=edge 설정
- IE에서 최신 버전으로 호환성 보기가 되도록 설정
- 사용법 ``` <!-- index.html 추가 -->
```
이렇게 3가지를 처리하면 IE 11에서 어느 정도 동작합니다.
하지만 몇몇 javascript, css는 오동작하니 수동으로 수정이 필요 할 수 있습니다.