리엑트 16 이상에서 안드로이드 4.1 브라우저 지원하는 방법

리엑트 16 부터 Map, Set 의존성을 가지게 됩니다.
그래서 안드로이드 저버전 브라우저에서 작동을 하지 않는데 pollyfill 추가를 통해서 해결할 수 있습니다.

core-js pollyfill 추가

Yarn eject 명령을 통해서 config 파일을 생성합니다.

1
yarn eject

아래 경로의 파일을 수정합니다.
./config/pollyfills.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

if (typeof Promise === 'undefined') {
  // Rejection tracking prevents a common issue where React gets into an
  // inconsistent state due to an error, but it gets swallowed by a Promise,
  // and the user has no idea what causes React's erratic future behavior.
  require('promise/lib/rejection-tracking').enable();
  window.Promise = require('promise/lib/es6-extensions.js');
}

// fetch() polyfill for making API calls.
//require('whatwg-fetch'); // axios를 사용하기 때문에 주석 처리

// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
//Object.assign = require('object-assign');  // core-js 로 대체

// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
// We don't polyfill it in the browser--this is user's responsibility.
if (process.env.NODE_ENV === 'test') {
  require('raf').polyfill(global);
}

require('core-js') // core-js 추가

References