• Home
  • About
    • lahuman photo

      lahuman

      열심히 사는 아저씨

    • Learn More
    • Facebook
    • LinkedIn
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

ReactJS에서 IE 11 호환 처리

04 Aug 2020

Reading time ~1 minute

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는 오동작하니 수동으로 수정이 필요 할 수 있습니다.

참고자료

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


polyfillreactjs Share Tweet +1