FrontEnd] Axios 와 Fetch의 차이점

들어가기 앞서 Axios에 대한 기본 정보를 알아보겠습니다.

Axios는 node.js와 브라우저를 위한 HTTP통신 라이브러리입니다.

비동기로 HTTP통신을 가능하게 해 주며 return을 promise 객체(Json 형식)로 해주기 때문에

데이터 다루기에도 용이합니다.

axios 와 fetch의 차이

axios	fetch
요청 객체에 url이 있습니다.	요청 객체에 url이 없습니다.
라이브러리 설치가 필요합니다.	빌트인이라 설치가 필요없습니다.
XSRF 보호를 해줍니다.	별도의 보호가 없습니다.
data 속성을 사용합니다.	body 속성을 사용합니다.
data 는 object를 포함합니다.	body는 문자열화 되어있습니다.
status가 200이고 statusText가 ok면 성공입니다.	응답객체가 ok속성을 포함하면 성공입니다.
자동으로 JSON 데이터 형식으로 변환됩니다.	.json()메소드를 사용해야합니다.
요청을 취소할 수 있으며 타임아웃을 걸 수 있습니다.	요청 취소 및 타임아웃을 거는 기능이 없습니다.
HTTP 요청을 가로챌 수 있습니다.	해당 기능을 제공하지 않습니다.
다운로드 진행에 대해 기본적인 지원을 합니다.	다운로드 진행에 대해 지원하지 않습니다.
많은 브라우저에 지원이 됩니다.	특정 브라우저 버전 이상에서 지원됩니다.

axios를 사용하면 구형 브라우저를 지원하는 것은 물론 JSON 데이터를 자동으로 변환해주기 때문에 편안하게 사용할 수 있습니다.

하지만 axios는 자바스크립트의 내장 라이브러리는 아니기 때문에 

ReactNative와 같이 업데이트가 잦은 경우 버전을 쫓아가지 못하는 경우가 발생할 수 있습니다.

이러한 부분에 있어서 fetch는 자바스크립트의 내장 라이브러리이기 때문에 버전을 쫓아오지 못하는 것을 방지할 수 있습니다.

axios와 fetch는 어떤게 좋고 나쁜 것이 아닌 상황에 따라 

구형 브라우저를 사용하는 유저가 많은 사이트일 경우 axios를 사용하고

ReactNative와 같이 업데이트가 잦은 프레임워크 및 라이브러리를 사용한다면

fetch를 사용하여

유동적으로 필요에 따라 선택하는게 가장 좋은 방법입니다!