Fetch / AJAX / Axios

fetch, axios, 그리고 AJAX(XMLHttpRequest)는 모두 웹 브라우저 또는 Node.js 환경에서 서버와 통신하여 데이터를 비동기적으로 주고받는 기술들입니다. 하지만 각각은 사용 방법, 기능, 그리고 환경에서의 동작 방식 등에서 차이가 있습니다.

​

fetch

fetch는 웹 브라우저에 기본적으로 내장된 API로, 네트워크 요청을 처리하는 메서드를 제공합니다.

Promise 기반의 API로 비동기 코드를 작성할 때 유용합니다.

간단한 구문과 훌륭한 가독성을 가지고 있어, 코드가 깔끔하고 간결해집니다.

하지만 오래된 브라우저에서는 지원이 부족하며, 일부 브라우저에서는 폴리필(polyfill)이 필요할 수 있습니다.

​

axios:

axios는 JavaScript의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js 환경 모두에서 사용할 수 있습니다.

Promise 기반으로 비동기 요청을 처리하며, fetch보다 더 많은 브라우저에서 기능을 지원합니다.

요청과 응답에 대한 중복된 설정을 쉽게 구성할 수 있어서 편리합니다.

fetch보다 훨씬 더 많은 기능과 옵션을 제공하기 때문에, 더 복잡한 요청과 응답 처리가 필요할 때 유용합니다.

​

AJAX(XMLHttpRequest):

AJAX는 "Asynchronous JavaScript and XML"의 약어로, 비동기적으로 서버와 데이터를 교환하기 위한 기술입니다.

XMLHttpRequest 객체를 사용하여 데이터를 비동기적으로 로드하고 서버와 상호작용합니다.

오래된 웹 애플리케이션에서 많이 사용되었으며, fetch나 axios와 비교하면 사용법이 더 복잡하고 가독성이 낮습니다.

최신 웹 개발에서는 fetch나 axios와 같은 더 간단하고 편리한 대안들을 주로 사용합니다.

​

간단히 말하면, fetch는 웹 브라우저에 내장된 API로 간결하고 가독성이 좋은 비동기 통신을 위한 방법입니다. axios는 fetch보다 더 많은 기능과 더 넓은 환경에서 사용할 수 있는 HTTP 클라이언트 라이브러리입니다. AJAX는 오래된 기술로서 fetch나 axios와 유사한 기능을 수행하지만, 사용법이 더 복잡하고 최신 개발에서는 덜 사용되는 경향이 있습니다. 따라서 프로젝트의 요구사항과 개발 환경에 따라 적절한 기술을 선택하는 것이 중요합니다.

​

저는 현업에서 axios만 계속 사용하고 있습니다.

최근에 이제 react-query를 도입해서 사용하고 있는데좋은 면이 많은 것 같아요.

데이터 관리도 용이하고, 편한 기능도 많구요.