# 브라우저 호환성

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

| 기술                                                                                                                                                                 | 버전                       |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ |
| [Async / Await](https://github.com/tc39/ecmascript-asyncawait) 또는 [Promise](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise) | ECMAScript 2017 (ES8)    |
| [Object Rest/Spread Properties](https://github.com/tc39/proposal-object-rest-spread)                                                                               | ECMAScript 2018 (ES9)    |
| [Dynamic import()](https://github.com/tc39/proposal-dynamic-import)                                                                                                | stage 4 proposal         |
| [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields)                                                                         | part of stage 3 proposal |
| [Fetch API](https://developer.mozilla.org/ko/docs/Web/API/Fetch_API)                                                                                               | Living Standard          |

## 폴리필 설치 <a href="#install-polyfill" id="install-polyfill"></a>

이 패키지는 오래된 브라우저에서 React 앱을 구동하기 위한 폴리필이 포함되어 있습니다. [Create React App](https://github.com/facebook/create-react-app)에서 사용하는 최소 요구 사항과 일반적으로 사용되는 언어 기능이 포함됩니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i react-app-polyfill
```

{% endtab %}
{% endtabs %}

## IE 지원 <a href="#support-ie" id="support-ie"></a>

### 최소 언어 기능 지원

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

1. window\.fetch
2. Promise ( async / await )
3. Object.assign() (객체 전개 연산)
4. Array.from (배열 전개 연산)
5. Symbol

**Internet Explorer 9**

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

// ...
```

**Internet Explorer 11**

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

// ...
```

### 추가 언어 기능 지원

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

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

{% hint style="warning" %}
앱에서 Internet Explorer를 지원해야 한다면 IE 최소 지원도 함께 제공해야 합니다.

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

{% endhint %}