IE(Internet Explorer) CSS 적용되도록 react 환경 개선하는 방법

순서 1

IE환경에 CSS를 적용할 수 있도록 라이브러리를 추가한다.
나는 yarn을 사용하기 때문에 yarn 명령어를 사용했다.

yarn add react-app-polyfill

순서 2

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

추가한 모듈을 사용하여 위의 두 코드를 index.jsx 또는 index.tsx에 추가한다.

※ 주의할 점
index.js 파일 제일 상단 에 코드를 삽입해준다.

순서 3

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

package.json 파일에 위의 코드를 수정 또는 추가해준다.

추가 문제 발생

수정한 코드를 서버 배포한 후 IE에서 확인해본 결과,
아직 HTML 및 CSS가 보여지지도 않고
콘솔에
아래와 같은 error가 발생했다.

"MobX 5+ requires Proxy and Symbol objects. 
If your environment doesn't support Symbol or Proxy objects, 
please downgrade to MobX 4. For React Native Android, consider upgrading JSCore."

위와 같은 문제가 발생한 이유는 MobX4를 사용하라는 것....
그래서 나는 pakcage.json에서 아래와 같이 코드를 수정해주었다.

// 변경 전
"dependencies": {
  ....
  "mobx": "^5.15.2",
  .....
}

// 변경 후
"dependencies": {
  ....
  "mobx": "^4.15.7",
  .....
}

🚑 변경 후에 다시 서버 배포 후 IE를 확인해보니 CSS가 제대로 적용되지 않은 상태이지만
일단 브라우저에 소스들이 출력된 것을 확인할 수 있었다.

하지만 IE의 문제는 여기를 끝으로 사파리의 CSS 문제를 해결해보려고 한다....주륵😥