## [fetching libaray 관련 TMI] Fetch(ky, redaxios) vs XHR(Axios)
### 1. JS에서 API를 호출하는 방식 2가지
- `XMLHttpRequest`
- `fetch`
`XMLHttpRequest`는 ECMAScript2015(ES6)이전에 비동기 API 호출 (AJAX)를 구현하는 대표적인 방식이에요. 하지만 XHR은 사용하는데 복잡하고 가독성이 떨어지는 단점이 존재해요. 이를 개선시킨 것이 Fetch이며 가장 큰 특징으로 Fetch는 Return 값으로 Promise를 내려주게 돼요!
**XHR 에서 되는데 Fetch 에서 안되는 것**
- Progress Report (거의 안쓰임)
**Fetch에서 되는데 XHR 에서 안되는 것**
- [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)
- abort controller
- Policy Control (CORS, Cache Control 등등)
- Stream (Fetch는 스트림 지원, 반면 XHR은 응답을 모두 메모리에 버퍼링)
- Fetch 는 Request, Response, Headers 등 글로벌 객체 지원
그렇기 때문에 가능하다면 Fetch 또는 ky, redaxios와 같은 Fetch base의 라이브러리를 사용하는 것이 좋아요.
### 2. `Axios`를 많이 쓰던데 그동안 왜 많이 썼을까? (그리고 이젠 왜 안써도 된다 하는 것일까?)
`fetch` 함수는 장점이 많았지만 그동안 browser 에서만 지원이 되었기 때문에 다른 환경에서는 사용할 수 없거나 `node-fetch`, `isomorphic-fetch`와 같은 라이브러리들을 사용했었어요.
그에 비해 `Axios`는 XHL 기반으로 되어있어서 모든 환경에서 동작했고, `fetch`에서만 제공하는 기능들을 모두 구현해 두었기 때문에 API 관련해서 사용하기 쉬운 장점이 존재했구요!
하지만, `Node.js v18` 부터 `fetch`를 지원하기 시작하면서 별도의 라이브러리 없이 `Browsers`, `Node.js`, `Bun`, `Cloudflare Workers` 등 다양한 환경에서 유니버설 하게 사용가능해 졌어요!
그러면서 점점 `axios`의 장점은 희미해지고 대체가 가능해진 것에 반해, 단점은 더욱 도드라지게 보여지게 되었어요.
**`axios`의 단점**: `axios`는 `fetch`의 기능을 따로 구현했기 때문에 번들 사이즈도 크고 퍼포먼스에서도 비효율이 존재해요.
(`axios` bundle size: 29kb, `ky` bundle size: 2kb / minified 기준)
그렇기에 `fetch`나 fetch base 라이브러리도 고려해보시면 좋을 것 같아요. 개인적으로는 `ky` 라이브러리를 사용해 보았는데 괜찮더라구요!
지금도 `axios`는 충분히 편리한 라이브러리임은 틀림 없어요. 레퍼런스도 많고` interceptor`가 필요한 상황이면 아직까진 `axios` 외엔 대안이 별로 없더라구요. 하지만 이러한 장단, 특성이 있다는 것을 알고 쓰는 것을 추천드려요!
sa02045
commented
1 year ago
내용 공유
내용 보기
관련 자료