본문 바로가기

HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS

ReactJS에서 IE 11 호환 처리

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 추가 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

이렇게 3가지를 처리하면 IE 11에서 어느 정도 동작합니다.

하지만 몇몇 javascript, css는 오동작하니 수동으로 수정이 필요 할 수 있습니다.

참고자료

'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글

Context API  (0) 2021.01.01
ReactJS Router Dom  (0) 2020.12.31
[ReactJS] component optimization  (0) 2020.08.28
[ReactJS] component style  (0) 2020.08.27
[ReactJS] Hooks  (0) 2020.08.26