React Project (CRA) IE11에서 실행하기

리액트 개발환경은 기본적으로 Javascript ES6 이상의 문법을 사용합니다.

그러한 이유로 구형 브라우저인 IE에서는 화면이 출력되지않는 상황이 발생하는데요.

실행화면

이를 해결하기위한 라이브러리가 있습니다.

바로!!!

react-app-polyfill, babel입니다!!

npm react-app-polyfill 바로가기

리액트 개발에서 사용하는 다양한 문법을 해당 브라우저에서 호환되는 문법으로 변환해주는 라이브러리입니다.

Promise, window.fetch, Symbol, Object.assign, Array.from + [ IE9 Map, Set ] 와 같은 필요부분만 포함하고 있어서 사이즈가 작고 가벼운 것이 특징입니다.

react-app-polyfill 설치하기

1. 라이브러리 설치

npm i react-app-polyfill

yarn add react-app-polyfill

2. index.js 상단 부분에서 라이브러리를 import

stable은 package.json의 browserslist에 해당하는 브라우저에 대해 안정적인 코드를 사용할 수 있게 합니다.

간혹 적용되지 않는 경우 node_modules/.cache 폴더 삭제하고 다시 실행해보세요.

3. package.json 내부 IE 설정

4. node_modules/.cache 폴더 삭제 후, 프로젝트 재실행!

폴더를 삭제한 후에 yarn start !!

5. IE 11 에서 실행되는 모습을 볼 수 있습니다!!

6. 호오오오옥시 4번 과정 이후에도 IE 화면이 똑같다면,, public/index.html 내부에 cdn으로 polyfill을 설정해주면 됩니다!

결론

발암 유발하는 IE 사용자를 위해서… 호환성을 고려한다면… Polyfill을 사용해서 해결하도록 합시다!!