react 프로젝트, 크로스브라우징 대응하기

 

 

react 프로젝트를 진행하면서 처음으로 다양한 브라우저에서 모두 대응이 되나 확인을 해보던 중, 역시나 IE에서는 호환이 되지 않았다. (처음에 흰 화면만 보여서 서버가 안 열렸나 했는데, 보통 호환이 안 된 경우 흰 화면만 나온다고 한다..)

 

그래서! 이번에 이론으로만 공부했던 polyfill을 설치하여 사용해보려 한다.  

 

 

---

 

설치하기 전에 잠깐,

'babel'과  'polyfill'의 차이

babel은 크로스브라우징을 위해 es6 구문들을 es5 구문으로 이해할 수 있도록 해 주고,
polyfill은 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인, 메서드 (Map, Set, Promise)등을 사용 가능하게 하는 역할을 한다. 

 

---

 

 

1. react-app-polyfill

 

- 리엑트 개발에서 사용하는 다양한 문법을 변환해주는 라이브러리이다. 

- Promise, window.fetch, Symbol, Object.assign, Array.from + [ IE9 Map, Set ]등 최소한만 포함하고 있어 사이즈가 작고 가벼운 게 특징

 

- 설치 

 

 npm install react-app-polyfill

 

- 사용법

 

// index.js import 설정
//최상단에 작성

// IE9의 경우 
import 'react-app-polyfill/ie9'; 
import 'react-app-polyfill/stable'; 

// IE11의 경우 
import 'react-app-polyfill/ie11'; 
import 'react-app-polyfill/stable';

 

//package.json
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 9" //IE 버전
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 9" //IE 버전
    ]
  }

 

2. @babel/polyfill core-js와 regenerator-runtime

- 프로젝트에서 async, await, function*를 프로젝트에서 활용하는 경우 설치

- 단점 :  모든 폴리필이 추가가 되기 때문에 사이즈가 크고 필요 없는 기능이 많다.

 

 

** @babel/polyfill은 deprecated **

 

Babel · The compiler for next generation JavaScript

 

- 7.4.0부터 @babel/polyfill은 deprecated 되어 core-js와 regenerator-runtime를 직접 사용하는 방식을 제안한다.

 

- 설치

 

npm install core-js regenerator-runtime

 

- 사용법

 

//index.js import 설정
import 'core-js/stable';
import 'regenerator-runtime/runtime';

 

 

-> 무거워서 고민한다면 'regeneratorRuntime'을 사용하는 것도 한 가지 방법.

 @babel/polyfill에 포함된 'regeneratorRuntime'이 'import 'regenerator-runtime';'이다.

(이거는 나도 좀 더 공부해봐야겠다.. 잘 모르겠다..)

 

 

---

 

 

결론

 

//react-app-polyfill
npm install react-app-polyfill

//@babel/polyfill 대체
npm install core-js regenerator-runtime

 

 

//index.js 상단
import "react-app-polyfill/ie9"; 
import "react-app-polyfill/stable"; // 리액트 앱 생성에서 안정적인 폴리필을 가져올 때

import 'core-js/stable';
import 'regenerator-runtime/runtime';

 

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 9"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 9"
    ]
  }

 

- 위 방식으로 예전에 진행했던 프로젝트에 1. react-app-polyfill  2.core-js와 regenerator-runtime를 모두 설치해서 사용해보았다 다행히 IE에서 제대로 작동되었고, 이제 실제 프로젝트에서는 react-app-polyfill만 설치하고 IE에서 화면을 띄어 보았는데 core-js와 regenerator-runtime를설치하지 않아도 async await 모두 작동되어 api를 제대로 받아왔다. (왜지..?)

 

react-app-polyfill에 async await 모두 지원되도록 업데이트된 건가..? 더 공부해봐야겠다. 우선은 결과적으로 react-app-polyfill 라이브러리 설치로 IE에서도 프로젝트 호환하여 크로스브라우징 이슈 해결 성공!