브라우저 호환성

Internet Explorer 호환

React 앱은 Chrome, Firefox, Edge, Safari 등 최신 브라우저에서는 문제 없이 동작하지만, IE 브라우저에서는 제대로 작동하지 않습니다. IE 브라우저는 다음의 기술을 지원하지 않기 때문입니다.

기술	버전
Async / Await 또는 Promise	ECMAScript 2017 (ES8)
Object Rest/Spread Properties	ECMAScript 2018 (ES9)
Dynamic import()	stage 4 proposal
Class Fields and Static Properties	part of stage 3 proposal
Fetch API	Living Standard

폴리필 설치

이 패키지는 오래된 브라우저에서 React 앱을 구동하기 위한 폴리필이 포함되어 있습니다. Create React App에서 사용하는 최소 요구 사항과 일반적으로 사용되는 언어 기능이 포함됩니다.

패키지 설치

npm i react-app-polyfill

IE 지원

최소 언어 기능 지원

Create React App이 정상적으로 작동하기 위해 필요한 최소 언어 기능이 있는지 확인하기 위해 지원하려는 최소 버전의 엔트리 파일을 가져올 수 있습니다. 이러한 모듈은 다음의 언어 기능이 호환되는 지 검사 확인합니다.

1. window.fetch

2. Promise ( async / await )

3. Object.assign() (객체 전개 연산)

4. Array.from (배열 전개 연산)

5. Symbol

Internet Explorer 9

// `src/index.js` 파일의 첫번째 라인에 반드시 작성!
import 'react-app-polyfill/ie9'

// ...

Internet Explorer 11

// `src/index.js` 파일의 첫번째 라인에 반드시 작성!
import 'react-app-polyfill/ie11'

// ...

추가 언어 기능 지원

사용자가 접속한 브라우저에서 호환되지 않는 언어의 기능을 안정적으로 폴리필 할 수 있습니다. Create React App에서 이것을 사용 할 경우, stable 폴리필을 자동으로 가져올 때 browserslist 목록 항목을 확인하여 브라우저에 필요한 폴리필만 포함하도록 설정합니다.

// `src/index.js` 파일의 첫번째 라인에 반드시 작성!
import 'react-app-polyfill/stable'

앱에서 Internet Explorer를 지원해야 한다면 IE 최소 지원도 함께 제공해야 합니다.

// `src/index.js` 파일의 첫번째 라인에 반드시 작성!
import 'react-app-polyfill/ie9'
import 'react-app-polyfill/stable'