Ajax와 XMLHttpRequest
Ajax는 페이지 전체를 새로고침하지 않고 서버와 비동기적으로 데이터를 주고받는 기술이다. 기존 웹 통신은 요청마다 페이지를 다시 렌더링하지만, Ajax는 사용자 상호작용과 서버 통신을 중간에서 엔진 해석기로 처리하여 페이지 전체를 다시 렌더링하지 않고 필요한 부분만 갱신할 수 있도록 한다. XMLHttpRequest(XHR)는 전체 페이지를 갱신하지 않고 필요한 데이터만 가져와 화면을 업데이트할 수 있도록 지원한다.
jQuery.ajax
jQuery.ajax는 jQuery 라이브러리에서 제공하는 비동기 통신 기능이다. success, error, complete 등의 콜백 함수를 통해 요청 결과를 처리하며, 다양한 브라우저 환경에서 쉽게 Ajax를 사용할 수 있도록 추상화되어 있다. jQuery 사용률 감소와 함께 최근에는 활용 빈도도 낮아지는 추세이다.
fetch API
fetch API는 XMLHttpRequest보다 더 현대적인 인터페이스를 제공하는 Promise 기반의 HTTP API이다. Request, Response, Headers 등을 객체로 추상화하여 HTTP 구성 요소를 다루며, 브라우저와 Node.js, Next.js 등에서 기본적으로 사용할 수 있다. 응답 데이터는 response.json() 등을 통해 직접 파싱해야 하며, 현재는 별도의 라이브러리 의존성이 필요하지 않다.
axios
axios는 브라우저와 Node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리이다. 브라우저에서는 XMLHttpRequest를, Node.js에서는 http 모듈을 사용하여 요청을 수행한다. 인터셉터, 요청 및 응답 변환, 요청 취소, JSON 자동 변환 등 fetch보다 다양한 편의 기능을 제공한다.
활용 관점과 Next.js
라이브러리 의존성을 최소화하려면 기본 제공되는 fetch API가 적합하다. axios는 인터셉터와 각종 편의 기능을 제공하지만 별도의 라이브러리 의존성이 생긴다. Next.js는 fetch를 기반으로 캐싱과 데이터 패칭 기능을 확장하고 있다. 학습 목적과 프레임워크와의 자연스러운 통합을 고려하여, 나는 기본적으로 fetch를 사용하고 필요에 따라 axios를 선택하는 방향을 선호한다.