Ajax와 Axios는 웹 개발에서 비동기 통신으로 데이터를 주고받기 위해 사용되는 기술들이다.
이 두 기술들에 대해 혼동이와서 어떤 차이점이 있는지 정리해보려 한다.
비동기 통신에 대해 쉽게 이해하고 싶다면 아래 링크를 참고하면 도움이 된다.
동기와 비동기의 개념 및 차이에 대해 쉽게 알아보자.
동기(Synchronous) 방식 동기란, 말 그대로 동시에 일어난다는 뜻입니다. 요청을 하면 동시에 응답을 한다는 약속으로, 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 응답(결과)가 주
hstory0208.tistory.com
Ajax (Asynchronous JavaScript and XML)
Ajax는 약자 그대로 JavaScript, XMLHttpRequest 객체를 사용하여 웹 브라우저와 웹 서버 간에 데이터를 비동기적으로 교환하는 기술이다.
Ajax는 웹 페이지가 다시 로드되지 않고 필요한 데이터만 가져올 수 있으므로 웹 애플리케이션의 속도와 사용성을 향상시킬 수 있다.
즉, request를 한 후 그 request에 대한 response를 기다리지 않고 다른 작업이 가능하다.
최근에는 클라이언트와 서버 간 리스트 데이터를 주고받을 때 JSON이 많이 사용된다.
Axios
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를 효율적으로 활용할 수 있게 도움을 주는 라이브러리이다.
'◼ CS 기초 지식 > [개발상식]' 카테고리의 다른 글
| [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 |