React 크로스 브라우징, IE호환

안녕하세요!
크롬에서 개발하고 다른 브라우저에서 테스트를 할 때면 다양한 이유로 터질 때가 있습니다.

Polyfill

호환되지 않는 문법들을 사용가능하게 만들어줍니다.
npm i react-app-polyfill로 설치해주세요.

index.js상단에 polyfill을 불러옵니다.

// IE9
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';

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

js & css

javascript 내장함수나 css 중 일부는 크로스 브라우징이 안될 때가 있습니다.
그럴 때 저는 접속하고 있는 브라우저를 판단하여 분기 처리해 줍니다.

const agt = navigator.userAgent.toLowerCase(); 
if (agt.indexOf("chrome") != -1) return 'Chrome';  // 크롬
if (agt.indexOf("safari") != -1) return 'Safari';  // 사파리
if((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) ||(agt.indexOf("msie") != -1)) return "IE"  // IE

(navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1)
IE 버전 11
(agt.indexOf("msie") != -1)
IE 버전 10 이하

immer

immer라는 라이브러리를 사용중이라면 사용하는 곳에서 enableAllPlugins()를 사용해줍니다.

import { enableAllPlugins } from 'immer';
import produce from 'immer';
enableAllPlugins();

그래도 안된다면...

1. package.json에 browserslist에 ie 11을 추가합니다.

   "browserslist":{
     "production": [ ... "ie 11" ],
     "development": [ ... "ie 11" ]
   }

2. node_modules/.cache를 삭제 후 다시 시작합니다.