Node.js Axios 모듈: HTTP 요청으로 REST API 호출하기

콘텐츠

Node.js Axios 모듈

Axios 모듈은 이전 포스팅에서 다룬 request 모듈과 같이 promise 객체를 기반으로 하는 HTTP 통신을 위한 모듈 입니다. 2020년 이후 업데이트와 유지 보수가 되지 않고 있는 request 모듈의 사용을 지양하고 현재 널리 사용되는 Axios 를 사용할 수 있습니다.

그런데, 이 Axios 는 Node.js 에서만 사용되는 모듈이 아니라 클라이언트와 서버 사이드 모두 사용 가능합니다. 그래서 Axios 사용법을 제대로 익히면 fetch, request 없이 Axios 하나로 모든 JavaScript 영역에서 HTTP 통신을 쉽게 사용할 수 있게 됩니다.

오늘은 이 Axios 에 대한 특징과 함께 사용 방법을 알아보겠습니다.

Axios의 주요 특징

Axios 의 주요 특징으로는 다음과 같은 사항들이 있습니다.

Promise 기반

최신 HTTP 통신 모듈의 대부분이 Promise 객체를 기반으로 합니다. Promise 는 비동기 연산 결과가 담기는 객체로 연산 상태(Pending, Rejected, Fulfilled 등), 성공 여부, 그리고 결과 값 등의 데이터가 담기게 되는 객체 입니다.

이는 꼭 HTTP 통신 뿐이 아니라 setTimeout 과 같은 비동기 동작 함수 등에도 사용 됩니다.

이와 관련된 내용은 이전 포스팅에서 fetch 함수를 다룰 때도 가볍게 정리 하였습니다.

브라우저와 Node.js 지원

위에서 언급한 것과 같이 Axios API 는 양 사이드 모두에서 지원 됩니다. 그래서 저의 경우 클라이언트(혹은 렌더러) 영역에선 fetch 를, 서버(혹은 메인) 영역에선 request 를 사용했었는데 그러지 않고 Axios는 하나로 모든 js 영역에서 비동기 통신을 사용할 수 있게 합니다.

요청 및 응답 인터셉터

요청을 보내기 전, 응답 받은 후에 데이터를 중간에서 가공할 수 있습니다.

요청 취소

수행 중인 요청에 대해 취소할 수 있습니다.

자동 데이터 변환(JSON)

요청을 보낼 시 객체를 자동으로 JSON 으로 변환, JSON 데이터는 자동으로 자바스크립트 객체로 파싱합니다.

클라이언트 측 보호

XSRF(Cross-Site Request Forgery의 약어로, 웹 보안 공격 유형 중 하나 입니다. 이 공격은 사용자가 의도하지 않은 웹 요청을 악의적으로 전송하는 것을 목표로 합니다.) 와 같은 웹 보안 취약점으로 부터 보호하는 기능이 포함되어 있습니다.

Node.js 에서 Axios 사용

먼저 npm 을 통해 Axios 모듈을 인스톨(install) 해줍니다.

npm install axios

Bash

그리고 기본적인 두 가지 방식의 통신을 늘 애용하는 JSONPlaceholder – Free Fake REST API 를 이용해 호출해 봅시다.

GET 방식

Axios 에서 get 방식의 통신을 하는 방법은 아주 간단 합니다. 먼저 require 문으로 axios 객체를 가져온 후 객체 내의 .get() 함수를 통해 통신할 수 있습니다. 예제 코드는 다음과 같습니다.

const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

JavaScript

정상적으로 호출 되었다면 다음과 같은 결과 값이 출력 됩니다.

{ userId: 1, id: 1, title: 'delectus aut autem', completed: false }

JSON

POST 방식

post 방식도 위와 같이 아주 간단하게 지원 post 함수를 이용하면 됩니다.

const axios = require('axios');

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
})
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

JavaScript

위의 post 방식 API 를 호출하면 다음과 같은 결과가 출력 됩니다.

{ title: 'foo', body: 'bar', userId: 1, id: 101 }

JSON

GET 과 POST 방식의 차이

두 방식은 가장 흔하게 사용되는 HTTP 요청 방식 입니다. get 방식은 URL 끝의 ? 뒤에 ‘패러미터=값&패러미터&값’ 을 붙여서 데이터를 전송하는데 이는 쿼리스트링이라 합니다. post 방식은 URL 에 데이터가 노출 되지 않고 본문에 포함 시켜 전송하게 되는데 위의 {title: ‘foo’, body: ‘bar’, userId: 1} 의 Object(객체)가 바로 그것입니다.

그래서 검색 날짜 정도의 가벼운 데이터를 보내고 응답 받는 경우는 get 방식을 사용하고, 게시물 저장 등의 작업을 위해 대량의 데이터를 보내야할 땐 post 방식을 사용하게 됩니다. 그 이후는 get 방식은 url 길이에 제한이 있어 데이터의 전송 가능한 양에도 제한이 있기 때문입니다.

브라우저 에서 Axios 사용

위의 설명 중 Node.js 영역이 아닌 브라우저 영역에서도 Axios 가 사용 가능하다고 언급 되었는데 바로 해보겠습니다. 먼저 axios 는 기본 JavaScript 함수는 아니므로 라이브러리로 불러와야 합니다. 이는 jQuery 때와 같이 script 태그로 불러올 수 있으며 저는 CDN 을 통해 가져왔습니다.

그리고 HTML 의 script 태그 내에 위와 동일한 코드를 작성하고 개발자 도구의 console.log 를 확인 하였고 동일한 결과가 리턴 되었습니다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
})
    .then(response => {
        console.log(response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
</script>

HTML

{ title: 'foo', body: 'bar', userId: 1, id: 101 }

JSON