[creacte-react-app] IE가 흰창으로 나온다면..?

 

최근 구글의 크롬, 마이크로소프트 엣지, 네이버 웨일 등은 한국에서 사용되는 브라우저이다.

 

하지만 마이크로소프트 인터넷익스플로러(Internet Explorer)를 사용하는 유저가 존재한다.... 

 

인터넷익스플로러는 완전히 이제.. 더이상 서비스를 하지 않는 브라우저이기 때문에

 

많이 사용되는 HTML5나 CSS3 등에서 일부를 지원하지 않는다. (ActiveX가 이제 없어진다니 IE도 없어지는 꿈을 조금 꿔본다...)

 

최신 문법 자체도 지원되지 않는 것은 매우 당연! 

 

자바스크립트는 매일매일 새롭게 발전하는데 IE를 한국 유저들이 사용하고 있다는 이유로..

 

ES6 이하의 자바스크립트로만 개발하게 되면.. 좀 더 공부할 수 있는 가능성이 줄어들 수 있다.

 

이런 슬픔(?)을 방지하기 위해서 최신의 자바스크립트 문법을 오래된 브라우저에서도 작동할 수 있도록 바꿔주는 Babel이 있다.

 

React에서 기본적인 뼈대를 제공하는 Facebook의 create-react-app 명령어도 Babel을 기반으로 하고 있다.

 

하지만!!!!

 

create-react-app이 v2 버전으로 되면서 더이상 IE를 지원하지 않게 되었다! 그래서 IE로 열면 리액트는 흰화면으로 나오게 되버린다....

 

여기에 대해 대안점을 제시하는건 react-app-polyfill을 설치하는 것이다. react-app-polyfill은 리액트로 개발할 때 사용한 다양한 문법을 변환해주는 라이브러리 입니다.

 

자세한 내용은 아래 npm 내용들을 들어가 보시면될 것 같다.

www.npmjs.com/package/react-app-polyfill

react-app-polyfill

npm i react-app-polyfill

npm으로 설치하고.. 

 

index.js나 index.tsx (타입스크립트 버전)을 열고, 가장 상단에 라이브러리를 불러온다.

ie9는 ie9이상의 버전을 지원한다.

// IE9 이상 지원하도록 하는 경우
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

// IE11 쪽만 지원하도록 하는 경우
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

 

 그리고 난 다음, package.json을 열고, brwoserlist에서 development에
">0.2%"를 추가해준다.

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      ">0.2%",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

 

그래야 개발용으로 열리는 npm start 명령어를 했을 때, IE에서 나오게 된다.

 

그리고 간혹 안나오는 경우에는,

 

node_modules 폴더 아래 .cache 폴더 자체를 삭제해본다. 

.cache는 소스를 돌리면 다시 생기기 때문에 폴더 자체를 삭제해도 괜찮다!

 

 

이러면 IE에서도 충분히 React를 돌릴 수 있다!