22. 폼 처리와 데이터 통신 - 2

RESTful API 호출하기 (fetch, axios 등)

웹 애플리케이션을 개발할 때 서버와 통신해야 하는 경우가 많습니다. 이때 RESTful API를 호출하여 서버와 데이터를 주고받을 수 있습니다. 이번 글에서는 JavaScript에서 RESTful API를 호출하는 방법을 알아보겠습니다.

fetch API를 이용한 RESTful API 호출

fetch API는 최신 웹 브라우저에서 기본적으로 제공되는 네트워크 요청을 위한 API입니다. 간단한 GET 요청을 보내는 예제를 살펴보겠습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

 

위 코드에서는 fetch 함수를 사용하여 'https://api.example.com/data' URL에 GET 요청을 보내고, 응답을 JSON 형식으로 파싱한 후 데이터를 콘솔에 출력하고 있습니다.

axios 라이브러리를 이용한 RESTful API 호출

axios는 브라우저와 Node.js에서 모두 사용할 수 있는 강력한 HTTP 클라이언트 라이브러리입니다. 아래는 axios를 사용하여 GET 요청을 보내는 예제입니다.

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error fetching data:', error));

 

axios를 사용하면 간단하고 가독성이 좋은 코드를 작성할 수 있으며, HTTP 요청 및 응답에 대한 다양한 기능을 제공합니다.

요약

이번 글에서는 JavaScript에서 RESTful API를 호출하는 방법을 알아보았습니다. fetch API를 사용하는 방법과 axios 라이브러리를 사용하는 방법에 대해 살펴보았습니다. 각각의 방법은 상황에 따라 선택하여 사용할 수 있으며, 데이터 통신에 필요한 기능을 제공합니다.