ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ReactJS에서 IE 11 호환 처리
    HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2020. 12. 27. 04:01

    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
Designed by Tistory.