1월 12일-Fetch vs Axios

Fetch vs Axios

Fetch API와 Axios는 자바스크립트를 이용하여 웹 서버로부터 데이터를 요청하고 수신하는 데 사용되는 두 가지 주요 방법이다. 이 두 방법은 비슷한 기능을 제공하지만, 사용 방법과 내부 구현에 있어서 몇 가지 차이점이 있다.

Fetch API

개요

• Fetch API는 자바스크립트의 내장 라이브러리로, 브라우저에서 제공된다.
• XMLHttpRequest의 대안으로 등장했으며, Promise 기반의 API를 제공한다.

장점

• 간결하고 직관적인 문법: Fetch는 Promise 기반으로 작동하여, 비동기 요청을 다루는 것이 더 간편하고 직관적이다.
• 내장 라이브러리: 별도의 라이브러리 설치 없이 대부분의 최신 브라우저에서 사용 가능하다.
• 풍부한 기능: Request와 Response 객체를 포함하여, HTTP 요청과 응답을 다루는데 필요한 다양한 기능을 제공한다.

단점

• 오래된 브라우저 지원 부족: Internet Explorer와 같은 구형 브라우저에서는 지원되지 않는다.
• JSON 데이터 처리: JSON 응답을 처리하기 위해서는 추가적인 .json() 호출이 필요하다.
• 기본적인 에러 처리: Fetch는 네트워크 오류가 발생했을 때만 예외를 발생시키고, HTTP 오류 상태(예: 404, 500)에 대해서는 예외를 발생시키지 않는다.

Axios

개요

• Axios는 자바스크립트에서 사용할 수 있는 서드파티 HTTP 클라이언트 라이브러리다.
• Promise 기반으로 작동하며, 브라우저와 Node.js 모두에서 사용 가능하다.

장점

• 자동 JSON 데이터 변환: 응답 데이터는 자동으로 JSON 형식으로 변환된다.
• 넓은 브라우저 지원: 오래된 브라우저를 포함하여 넓은 범위의 브라우저를 지원한다.
• 요청 취소 기능: 진행 중인 요청을 취소할 수 있는 기능을 제공한다.
• HTTP 상태 코드에 따른 에러 처리: HTTP 응답 상태 코드를 기반으로 예외를 자동으로 처리한다.
• 요청과 응답 인터셉터: 요청 전과 응답 후에 데이터를 가공할 수 있는 인터셉터를 제공한다.

단점

• 추가적인 라이브러리 설치 필요: 별도의 패키지 설치가 필요하며, 프로젝트의 크기가 약간 증가한다.
• 상대적으로 느린 속도: Fetch에 비해 약간 느릴 수 있다.
• 보안 이슈: 서드파티 라이브러리이므로 보안 취약점에 대한 주기적인 업데이트와 검증이 필요하다.

결론

Fetch와 Axios는 각각의 특성과 장단점이 명확하기 때문에, 프로젝트의 요구 사항과 환경에 따라 적절한 선택이 필요하다. 단순하고 빠른 개발이 필요한 경우나 최신 브라우저 환경에서만 작동하는 애플리케이션을 개발할 때는 Fetch를 사용하는 것이 좋다. 반면, 구형 브라우저 지원, 복잡한 요청/응답 처리, 더 세밀한 에러 처리가 필요한 경우에는 Axios를 사용하는 것이 유리하다.