리액트 프로젝트에 도움을 주는 패키지들

리액트 프로젝트에 도움을 주는 패키지들

리액트 프로젝트를 시작하면 이것저것 작업을 편하게 해주는 패키지가 많은데 나중에 한번에 보려고 정리합니다.

가능한 패키지들 사용 안하는 스타일인데 꼭 필요하거나 사용하기 좋은 패키지를 사용 안하는건 너무 비효율적이니깐

최소한?으로 고고싱~~~~~

🌐 react-app-polyfill

create-react-app v2 부터는 IE 지원을 아예 빼 버렸기 때문에 IE 에서도 돌아가게 하려면 polyfill을 추가해야 한다.

적용하고 싶은 프로젝트 루트에서 아래 명령어로 polyfill을 추가하자.

npm 사용시

#npm install react-app-polyfill

yarn 사용시

#yarn add react-app-polyfill

그다음 src/index.js 를 열어 첫줄에 아래 코드를 추가하면 된다.

Internet Explorer 9

import 'react-app-polyfill/ie9';

Internet Explorer 11 ← 난 이거

import 'react-app-polyfill/ie11';

🔗 https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill

⚡ axios

아직은 ajax로 큰거 안하니깐 window.fetch 하고 window.formdata 를 사용해 보려고 했는데 크롬으로 확인하다가 IE 에서 확인하니 에러가..

확인 해 보다가 CRA2 부터 IE 버렸다고 해서 아하? 하고 polyfill 설치 했는데도 에러가 나는거다. 왜!!! 😱

찾아보니 IE에서 formdata 메소드 중에 get() 등 많은게 지원 안한다.

출처 : https://developer.mozilla.org/ko/docs/Web/API/FormData

음.. 이런거 쓸라고 polyfill 설치한거 아닌가? 내가 모르는건가 😭

암튼 axios 를 설치해서 사용하려면

npm 사용시 ← 난 이거

#npm install axios

cdn 사용시

<script src="https://unpkg.com/axios/dist/axios.min.js">

설치를 하고 컴포넌트에 상단에 불러와서 사용하면 된다.

import axios from 'axios';

🔗 https://github.com/axios/axios

추가할거 생기면 또 추가 해야징..