[비동기 통신] Ajax와 Axios의 차이점?

Ajax와 Axios는 웹 개발에서 비동기 통신으로 데이터를 주고받기 위해 사용되는 기술들이다.

이 두 기술들에 대해 혼동이와서 어떤 차이점이 있는지 정리해보려 한다.

비동기 통신에 대해 쉽게 이해하고 싶다면 아래 링크를 참고하면 도움이 된다.

동기와 비동기의 개념 및 차이에 대해 쉽게 알아보자.

동기(Synchronous) 방식 동기란, 말 그대로 동시에 일어난다는 뜻입니다. 요청을 하면 동시에 응답을 한다는 약속으로, 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 응답(결과)가 주

hstory0208.tistory.com

Ajax (Asynchronous JavaScript and XML)

Ajax는 약자 그대로 JavaScript, XMLHttpRequest 객체를 사용하여 웹 브라우저와 웹 서버 간에 데이터를 비동기적으로 교환하는 기술이다.

Ajax는 웹 페이지가 다시 로드되지 않고 필요한 데이터만 가져올 수 있으므로 웹 애플리케이션의 속도와 사용성을 향상시킬 수 있다.

즉, request를 한 후 그 request에 대한 response를 기다리지 않고 다른 작업이 가능하다.

최근에는 클라이언트와 서버 간 리스트 데이터를 주고받을 때 JSON이 많이 사용된다.

Axios는 웹 애플리케이션에서 사용하는 AJAX 기반의 API 호출을 단순화하고 향상시키기 위한 JavaScript 라이브러리이다.

Ajax를 사용할 때 발생할 수 있는 불편함을 보완해주는 기능들을 제공하는데, 보완해주는 기능들을 보면 다음과 같다.

Ajax를 보완한 Axios가 제공하는 기능

구문의 간결성 : Axios는 Promise 기반이어서, XMLHttpRequest 객체를 직접 사용할 때 보다 비동기 처리에 대한 코드 작성을 더 간결하게 작성할 수 있다.
에러 처리 항상 : Axios는 Promise 기반으로 작동해, 비동기 요청을 보낼 때 발생할 수 잇는 에러를 간편하게 catch할 수 있다.
JSON 데이터 자동 변환 : JSON 데이터를 자동으로 변환 해준다. 따라서 JSON parsing이나 요청 데이터의 JSON stringify를 직접 할 필요가 없다.
요청 및 응답 인터셉터 : HTTP 요청이 전송되기 전이나 서버로 부터 응답을 받기 전에 데이터를 처리할 수 있도록 인터셉터 기능을 제공한다. (전역 오류 처리, HTTP 헤더 관리)
타임아웃 설정 : 긴 응답 시간이 발생할 경우 요청을 자동으로 취소하고 에러를 반환할 수 있다.

즉 간단하게 정리하면, Ajax를 보다 편리하게 사용할 수 있도록 도와주는 라이브러리이다.

📌요약
Ajax는 웹 개발에서 비동기 통신 기술 자체를 의미하며
Axios는 Ajax를 효율적으로 활용할 수 있게 도움을 주는 라이브러리이다.

[OOP] 디미터 법칙에 대한 오해와 디미터 법칙에 대해 (30)	2023.10.26
JWT란? 장단점과 Session 인증 방식과의 차이점을 알아보자. (13)	2023.10.12
YAML이란? (JSON, XML과 비교) (0)	2023.05.22
프레임워크? 라이브러리? 쉽게 이해하기 (0)	2023.04.24
힙(Heap) 자료구조 (0)	2023.01.21