자바스크립트에서 사용되는 HTTP 비동기 통신 라이브러리 Axios는 RESTful한 웹 API를 호출하고 데이터를 주고 받을 수 있도록 해주는 도구다.
즉, HTTP 요청을 보내고 응답을 처리하기 위해 사용되며 REST 아키텍처 스타일을 따르는 웹 API과 상호작용할 수 있다.
그렇다면 Axios를 사용하기 전에 REST는 무엇인지, RESTful한 웹 API를 알아야 한다.
1. REST?
REST(Representational State Transfer)는 웹 서비스의 아키텍처적인 스타일이며, 클라이언트와 서버 간의 통신을 위한 규칙과 제약 조건을 정의한다.
1-1. REST의 역사
REST 이전에 WEB이 등장했고 사람들은 WEB(인터넷)에서 정보를 공유하는 방법을 찾았고 그렇게 정보를 하이퍼텍스트로 연결하는 방식이 나타났다.
- WEB(1991)
Q : 어떻게 인터넷에서 정보를 공유할 것인가?
A : 정보들을 하이퍼텍스트로 연결한다.
- 표현형식 : HTML
- 식별자 : URI
- 전송방식 : HTTP
클라이언트와 서버 간의 정보 교환을 위한 프로토콜인 HTTP의 등장
HTTP : HyperText Transfer Protocol
-
HTTP / 1.0 (1994-1996)
그렇게 HTTP는 급속도로 성장하고 전세계에서 사용하게 되었고,
로이 필딩(Roy Fielding)이 HTTP 1.0을 정립하고 명세를 정리한 논문을 발표하는데 그것이 HTTP Object Model로 나중에 REST가 되었다. -
REST (2000)
로이 필딩은 이미 전세계로 퍼진 Web을 망가트리지 않으면서 확장성과 성능을 개선하기 위해 HTTP의 기존 설계 원칙을 재사용하는 방법인 REST 아키텍처 스타일을 소개했다.
REST는 자원(URI)의 표현과 상태(State) 전달을 위한 통신을 기반으로 하며, 웹의 기본 원칙을 따르고, 분산 시스템과 클라이언트-서버 간의 상호작용을 단순화 하는 아키텍쳐 스타일을 제공한다.
- 웹 API
2000년대 후반부터 웹 서비스의 중요성이 증가하면서,RESTful한 웹 API의 수요가 커지게 되었다. REST를 따르는 웹 API는 클라이언트 서버 간의 데이터 교환을 위한 표준 인터페이스를 제공하며, 다양한 애플리케이션과 플랫폼 간의 통합을 가능하게 해준다.
RESTful 웹 API
REST 아키텍처 스타일을 따르는 웹 API를 의미한다.
클라이언트와 서버 간의 통신을 위한 규칙과 제약 조건을 따르며,
자원의 표현과 상태 전달을 기반으로 한다.
ex) Twitter API, GitHub API, Google Maps API 등
1-2. REST 영향력
REST는 HTTP의 기존 설계 원칙을 따른다고 설명했는데,
이를 위해 아래와 같은 구성을 가지고 있으며 이는 서버와 클라이언트가 각각 독립적으로 진화할 수 있게 해준다.
REST는 서버와 클라이언트가 각각 독립적으로 진화하기 위해 만들어졌다.
REST를 구성하는 스타일
- client-server
- stateless
- cache
- uniform interface
- layered system
- code-on-demand (optional)
독립적 진화란 서버의 기능이 변경되어도 클라이언트를 업데이트할 필요가 없을을 뜻함.
RESTful한 웹 API의 사용으로 웹은 독립적으로 진화를 할 수 있었다.
- 서버에서 사용하는 API에 따라 웹이 깨지거나 사용이 불가하지 않다.
- 과거에 개발된 서버 환경에서도 여전히 웹은 잘 구현되고 있다.
2. Axios
위에서 학습한 내용으로 Axios는 RESTful 웹 API를 호출하고 데이터를 주고받을 수 있는 도구임을 알 수 있다.
- Fetch API와 같은 비동기 네트워크 API다.
- 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리다.
- Backend, Frontend 통신을 쉽게 하기 위해 Ajax과 더불어 사용한다.
2-1. Axios 기능
- 브라우저 환경: XMLHttpRequests 요청 생성
- Node.js 환경: http 요청 생성
- Promise API 지원
- 요청/응답 차단(Intercept)
- 요청/응답 데이터 변환
- 취소 요청
- JSON 데이터 자동 변환
- 사이트 간 요청 위조(XSRF) 보호를 위한 클라이언트 사이드 지원
2-2. Axios vs Fetch API
| Axios | Fetch API |
|---|---|
| 라이브러리 설치가 따로 필요 | JavaScript에 내장되어 있음 |
| XSRF 보호를 해준다 | 별도 보호가 없다 |
| data 속성을 사용한다 | body 속성을 사용한다 |
| data는 object를 포함한다 | body는 문자열화 되어 있다 |
| status가 200이고 statusText가 'OK'이면 성공 | 응답객체가 ok 속성을 포함하면 성공 |
| 자동으로 JSON 데이터 형식으로 변환된다 | .json()메서드를 사용해야 한다 |
| 요청을 취소할 수 있고 타임아웃을 걸 수 있다 | 해당 기능이 존재하지 않는다 |
| HTTP 요청을 가로챌수 있다 | 기본적으로 제공되지 않는다 |
| download 진행에 대해 기본적인 지원을 한다 | 지원하지 않는다 |
Axios는 별도의 설치가 따로 필요하다는 단점이 존재하지만,
다양한 기능을 사용하기 위한 확장성과 코드의 간결함에 있어서 Fetch API보다 유용한 점이 많다.
