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

빡기·2020년 4월 8일
6

react는 기본적으로 ES6이상 문법을 사용하기 때문에 구형 브라우저 특히 IE에서 호환이 안되는 경우 발생한다
이러한 문제를 react-app-polyfill, babel을 이용하여 해결해보자!

1. react-app-polyfill

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

1-1 react-app-polyfill 설치

npm install react-app-polyfill로 설치

// 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';

1-2 node_modules/.cache 폴더 삭제

node_modules/.cache 삭제
stable은 package.json의 browserslist에 해당하는 브라우저에 대해 안정적인 코드를 사용 가능

2. @babel/polyfill

  • 본인 프로젝트에서 async, await, function*를 프로젝트에서 활용하는 경우 설치
  • 설치를 안 하면 아래와 같은 에러 메세지 발생(deprecated 메시지)

    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은 2가지 패키지로 구성 되어 있는걸 확인 할 수 있다
img

npm install core-js regenerator-runtime로 설치하고 index.js 설정

//index.js import 설정
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

profile
Front End. Dev

0개의 댓글