React, immer IE 지원 세팅

우선 IE에서 React app이 동작하게 하기 위해서는 pollifill이란 것이 필요한데, 설정하는 법은 간단하다.

우선 react-app-polyfill을 설치하고,

yarn add react-app-polyfill

index.js 파일 최상단에 아래와 같은 코드를 추가해 주면 된다.

import 'react-app-polyfill/ie9'; //또는 polyfill/ie11
import 'react-app-polyfill/stable';

그런데 나의 경우엔 이 세팅을 하고서도 추가적인 에러가 있어서 좀 더 세팅이 필요했다.
object.repeat이 함수가 아니라는 에러 등의 다양한 에러 때문에

yarn add core-js regenerator-runtime

을 설치하고 index.js파일에

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'core-js/features/string/repeat';

도 추가해 주었으며,
window.scrollTo 도 작동하지 않아서 그 코드를 사용한 곳 마다 수정해주었다.

//1
useEffect(() => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  }, [pathname]);
  
 //2
commentRef.current.scrollTo(0, commentRef.current.scrollHeight);
    setCount((prev) => prev + 1);
  

이렇게 위와 같이 작성했던 코드들을

//1
useEffect(() => {
    window.scrollTo(0, 0, { behaviour: 'smooth' });
  }, [pathname]);
  
//2
commentRef.current.scrollTop = 
commentRef.current.scrollHeight;
commentRef.current.scrollLeft = 0;

이렇게 변경했다.

마지막으로 immer가 작동하지 않아서 immer을 사용한 곳 마다

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

이렇게 해주었다.

처음에는 index.js의 polyfill 바로 아래다 한번만 작성했었는데, 에러가 해결되지 않아서 produce가 사용된 모든 장소에 위와같은 방법을 사용했다.
필요에 따라 enableAllPlugins(); 대신에 enableES5()만 해주어도 된다.