API (Application Programming Interface)는 웹 애플리케이션에서 데이터를 송수신하는 데 사용되는 중요한 요소입니다. 많은 API가 JSON (JavaScript Object Notation) 형식으로 데이터를 반환하는데, 이는 자바스크립트에서 쉽게 다룰 수 있는 데이터 형식입니다. 이번 블로그에서는 자바스크립트에서 JSON 데이터를 사용하여 API를 호출하는 방법을 알아보겠습니다.

1. XMLHttpRequest를 사용하는 방법

XMLHttpRequest 객체를 사용하여 자바스크립트에서 API를 호출할 수 있습니다. 아래는 JSON 형식의 데이터를 받아와 출력하는 예제 코드입니다.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
xhr.send();

위 코드에서 open 메소드를 사용하여 GET 요청을 보내고, onreadystatechange 이벤트를 사용하여 서버에서의 응답을 처리합니다. 응답이 완료되었을 때, JSON.parse 를 사용하여 데이터를 JSON 형식으로 변환하고 출력합니다.

2. fetch API를 사용하는 방법

XMLHttpRequest 와 달리 fetch API는 더 편리한 방법으로 API를 호출할 수 있습니다. 아래는 fetch API를 사용하여 JSON 데이터를 가져오는 예제 코드입니다.

fetch("https://api.example.com/data")
    .then(function(response) {
        return response.json();
    })
    .then(function(data) {
        console.log(data);
    });

fetch 함수를 사용하여 GET 요청을 보내고, Promise 체인을 사용하여 응답 데이터를 JSON 형식으로 변환하고 출력합니다.

3. axios를 사용하는 방법

axios는 자바스크립트에서 많이 사용되는 HTTP 클라이언트 라이브러리로, API 호출을 간단하고 유연하게 처리할 수 있습니다. 아래는 axios를 사용하여 JSON 데이터를 호출하는 예제 코드입니다.

axios.get("https://api.example.com/data")
    .then(function(response) {
        var data = response.data;
        console.log(data);
    })
    .catch(function(error) {
        console.log(error);
    });

axios.get 메소드를 사용하여 GET 요청을 보내고, Promise 체인을 사용하여 응답 데이터를 처리합니다. 에러 발생 시 catch 블록에서 처리할 수 있습니다.

마무리

이번 블로그에서는 자바스크립트에서 JSON 데이터를 사용하여 API를 호출하는 방법을 알아보았습니다. XMLHttpRequest, fetch API, axios 등 다양한 방법을 사용하여 API 호출을 할 수 있으며, 선택은 개발자의 편의에 따라 결정하면 됩니다. JSON 데이터를 다룰 수 있는 자바스크립트의 능력을 활용하여 효율적인 웹 애플리케이션을 개발해보세요!