Axios란?
Axios는 웹 브라우저와 Node.js를 위한 HTTP비동기 통신 라이브러리입니다.
쉽게 말해서 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것응로 Ajax처럼 사용되는 것입니다.
비동기 통신 라이브러리를 사용하지 않으면 모든 코드가 순차적으로 처리되어야 하므로 코드의 순서를 신경 써서 작성해야 합니다. 즉, 코드 작성이 매우 복잡해집니다. 따라서 비동기 통신을 쉽게 해주는 Axios나 Ajax 같은 것이 자주 사용되는 것입니다.
Ajax란?
비동기 자바스크립트란 의미로 Asynchronous JavaScript and XML의 약자입니다. Ajax는 브라우저가 가지고 있는
XMLHttpRequest 객체를 이용하여 화면 전체를 새로 고침 하지 않고 변경된 일부 데이터만 로드하는 비동기 처리가 가능합니다. Axios는 Ajax와 유사하며 API를 이용한 통신을 할 때 주로 사용합니다.
Axios는 Promise를 기반으로 만들어진 라이브러리입니다. Promise는 자바스크립트 ES6에서 비동기 처리를 위해 주로 사용되는 객체입니다.
Fetch vs Axios
Fetch와 Axios 둘 다 HTTP 요청을 처리하기 위한 자바스크립트의 라이브러리이지만 몇 가지 차이점이 존재합니다.
- Fetch의 경우 자바스크립트에 내장되어 있기 때문에 별도의 import나 설치가 필요하지 않습니다. 하지만 Axios의 경우 간단하지만, 위의 사용법 설명처럼 설치 과정이 필요합니다.
- Fetch는 일부 예전의 인터넷 익스플로러 버전에서 지원하지 않는 경우가 있어, Axios가 Fetch보다 브라우저 호환성이 뛰어납니다.
- Fetch에서는 지원하지 않는 JSON 자동 변환, 응답 시간 초과 설정 기능 등을 Axios에서 지원해줍니다.
그렇다면 역시 더 좋아 보이는 Axios를 무조건 사용해야 할까요? 그렇지는 않습니다. axios는 외부 모듈로 따로 패키지 설치를 해줘야 사용할 수 있으니, 여의치 않다면 fetch를 사용해도 상관 없습니다.
자신의 개발 상황(지원하는 브라우저, 기타 다른 패키지 등등)에 맞는 라이브러리를 선택하는 것이 필요합니다.
Axios와 CRUD
CRUD가 Create, Read, Update, Delete의 제일 앞 문자를 하나씩 따와 만든 줄임말로 각각은 아래처럼 매칭이 됩니다.
C : Create(생성) - POST
R : Read(조회) - GET
U : Update(수정) - PUT
D : Delete(삭제) - DELETE
Axios 사용법
index.html에 아래 두 스크립트를 추가해주면 axios 라이브러리를 손쉽게 사용할 수 있습니다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
각 메소드가 어떠한 형태로 사용되는지 아래에서 살펴보세요.
POST
axios.post(url, data 객체)POST는 새로운 자원을 생성할 때 사용합니다.
GET
axios.get(url)GET은 자원을 요청할 때 사용합니다.
PUT
axios.put(url, data 객체)PUT은 자원을 갱신할 때 사용합니다.
DELETE
axios.delete(url)DELETE는 자원을 삭제할 때 사용합니다.
참고
'JavaScript' 카테고리의 다른 글
| [JavaScript] 디바운싱(debouncing) vs 쓰로틀링(throttling) (1) | 2023.10.08 |
|---|---|
| [JavaScript] 비동기(async/await, HTTP, REST API, Fetch) (0) | 2023.10.04 |
| [JavaScript] 비동기(이벤트 루프, Task Queue VS Job Queue, Promise) (2) | 2023.10.02 |
| [JavaScript] 자바스크립트 Hoisting (0) | 2023.09.22 |
| [JavaScript] 자바스크립트 변수 정의 과정 (0) | 2023.09.22 |
