Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

Axios로 GET·POST 요청 보내는 방법: 설치부터 실전 예제까지

웹 애플리케이션을 개발하다 보면 외부 리소스에 접근하기 위해 HTTP 요청을 보내야 할 때가 있습니다. 예를 들어 블로그를 만든다고 가정해 보겠습니다. 각 게시물에 댓글 목록을 표시하기 위해 API를 호출해야 할 수도 있습니다.

Axios는 웹 요청을 간편하게 처리할 수 있도록 도와주는 인기 있는 JavaScript 라이브러리입니다. 이 가이드에서는 axios를 사용해 GET 및 POST 요청을 보내는 방법을 소개하고, 몇 가지 예제를 통해 axios의 작동 원리와 실제 코드에서의 활용법을 살펴보겠습니다.

Axios를 사용해야 하는 이유

Axios는 웹 요청을 손쉽게 처리할 수 있는 프로미스(Promise) 기반 라이브러리입니다.

fetch 등 다른 웹 요청 라이브러리도 많은데 굳이 axios를 사용해야 할까 궁금할 수 있습니다. 물론 fetch 같은 라이브러리로도 GET 요청을 보낼 수 있지만, axios에는 이런 라이브러리에는 없는 몇 가지 강력한 장점이 있습니다.

axios는 구형 브라우저까지 지원하기 때문에 더 폭넓은 사용자에게 접근 가능한 서비스를 만들 수 있습니다. 또한 CSRF 공격을 방어하는 기능이 내장되어 있어 보안 취약점으로부터 안전합니다. 그리고 Node.js 환경에서도 동작하기 때문에 프런트엔드와 백엔드 어느 쪽을 개발하더라도 유용하게 활용할 수 있습니다.

Axios 설치 방법

axios로 요청을 보내기 전에 먼저 라이브러리를 설치해야 합니다. 다음 명령어를 실행하세요.

npm install axios --save

이 명령어는 axios를 설치하고 package.json 파일의 의존성 목록에 저장합니다. 이제 axios 라이브러리를 사용할 준비가 끝났습니다.

Axios로 요청 보내기

axios의 시작은 매우 간단합니다. 웹 요청을 보내려면 데이터를 가져올 URL과 사용할 HTTP 메서드만 지정하면 됩니다.

예를 들어 cat-facts API에서 고양이에 대한 흥미로운 사실 목록을 가져오고 싶다고 가정해 보겠습니다. 다음 코드로 처리할 수 있습니다.

axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
)})

이 코드는 아직 완료되지 않은 요청을 나타내는 프로미스(promise)를 반환합니다. 이 HTTP 요청으로부터 실제 데이터를 받아오려면 async/await 함수를 다음과 같이 활용해야 합니다.

const axios = require("axios");

async function getCatFacts() {
	const response = await axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
	})

	console.log(response.data)
}

getCatFacts()

서버는 고양이 관련 사실 목록으로 응답했습니다.

이 함수를 호출하면 cat-facts API로 HTTP GET 요청이 전송됩니다. async/await 함수를 사용했기 때문에 웹 요청이 완료될 때까지 프로그램이 다음 단계로 넘어가지 않습니다. axios가 먼저 프로미스를 반환하고, 요청이 완료된 후에야 그 결과 데이터를 돌려주기 때문입니다.

또한 axios는 웹 요청을 더 편리하게 만들어 주는 축약 메서드들을 제공합니다.

  • axios.get()
  • axios.post()
  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()

이번 튜토리얼에서는 axios.get()과 axios.post() 메서드에 집중해 살펴보겠습니다. 다른 축약 메서드들도 기본 문법은 모두 동일합니다.

axios로 GET 요청 만들기

앞선 예제에서는 axios 객체를 직접 사용해 GET 요청을 보냈습니다. 하지만 더 간단한 방법이 있습니다. 바로 axios.get()을 사용하는 것입니다.

고양이 관련 사실 목록을 가져온 뒤, 몇 개가 반환되었는지 개수를 세고 싶다고 가정해 보겠습니다. 다음 코드로 구현할 수 있습니다.

const axios = require("axios");

async function getCatFacts() {
	const response = await axios.get("https://cat-fact.herokuapp.com/facts")

	console.log(`${response.data.all.length}개의 고양이 팩트가 반환되었습니다.`)
}

getCatFacts()

이 코드를 실행하면 "225개의 고양이 팩트가 반환되었습니다."라는 결과가 출력됩니다.

코드를 하나씩 분석해 보겠습니다. 먼저 웹 요청을 수행하는 getCatFacts()라는 비동기(async) 함수를 선언했습니다.

그다음 axios.get()을 사용해 cat-facts API에서 고양이 팩트 목록을 가져왔습니다. 응답 객체와 요청 본문(request body)은 "response.data"에 담겨 있습니다.

마지막으로 .length 속성을 활용해 반환된 고양이 팩트의 개수를 계산하고, 그 숫자를 문자열에 삽입해 출력했습니다.

axios로 헤더(Headers) 전송하기

GET 요청을 보낼 때 요청 대상 웹 리소스에 커스텀 헤더를 함께 전송해야 하는 경우가 있습니다. 예를 들어 인증이 필요한 API에서 데이터를 가져올 때는 인증 헤더를 지정해야 할 수 있습니다.

axios 요청에 헤더를 지정하려면 다음 코드를 사용하세요.

axios.get("https://urlhere.com", {
	headers: { "header-name": "header-value" }
)})

이 코드는 지정한 URL로 "header-name"이라는 이름의 헤더를 값 "header-value"와 함께 전송합니다.

axios로 파라미터(Parameters) 전송하기

많은 API가 GET 요청에 파라미터를 함께 보낼 수 있도록 지원합니다. 예를 들어 limit 파라미터를 사용해 반환되는 응답 개수를 제한할 수 있는 API도 있습니다.

axios를 사용하면 파라미터 지정이 아주 쉽습니다. 쿼리 스트링(query string)에 직접 포함하거나 params 속성을 활용하면 됩니다. 다음은 쿼리 스트링으로 파라미터를 지정하는 예제입니다.

axios.get("https://urlhere.com/?date=2020-05-15")

또는 axios 옵션에 params 속성을 지정하는 방법도 있습니다.

axios.get("https://urlhere.com", {
	params: {
		date: "2020-05-15"
	}
)})

두 예제 모두 이름이 "date"이고 값이 "2020-05-15"인 파라미터를 지정한 URL로 전송합니다.

axios로 POST 요청 만들기

POST 요청을 보내는 문법은 GET 요청과 거의 동일합니다. 차이점은 axios.get() 대신 axios.post() 메서드를 사용한다는 점입니다.

API에 POST 요청을 보내고 싶다면 다음 코드를 사용하면 됩니다.

axios.post("https://urlhere.com")

헤더와 파라미터 역시 GET 요청과 같은 방식으로 지정할 수 있습니다. 참고로 axios.post()는 두 번째 인자에 전송할 데이터(data), 세 번째 인자에 설정(config)을 넣는 구조입니다. 따라서 값이 "James"인 "Name"이라는 헤더를 POST 요청과 함께 보내고 싶다면 다음과 같이 작성합니다.

axios.post(
	"https://urlhere.com",
	{ name: "James" },
	{ headers: { "Content-Type": "application/json" } }
)})

마무리

axios 라이브러리는 JavaScript에서 웹 요청을 보내는 데 사용됩니다. 프런트엔드 JavaScript는 물론 Node.js 같은 플랫폼을 활용한 백엔드에서도 사용할 수 있습니다. 다른 웹 요청 라이브러리와 달리 axios는 CSRF 방어 기능이 내장되어 있고, 구형 브라우저를 지원하며, 프로미스 기반 구조를 채택하고 있어 웹 요청 처리에 최적화된 도구입니다.

이제 여러분도 프로 웹 개발자처럼 axios를 활용해 GET 및 POST 요청을 자유롭게 보낼 준비가 되었습니다.