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가지 패키지로 구성 되어 있는걸 확인 할 수 있다
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';
Front End. Dev