JSON (JavaScript Object Notation)은 자바스크립트 객체를 표현하기 위한 경량 데이터 형식입니다. 많은 웹 애플리케이션에서 서버와의 데이터 교환에 JSON을 사용합니다. 이번 글에서는 자바스크립트를 사용하여 JSON API를 통해 데이터를 가져오는 방법에 대해 알아보겠습니다.

XMLHttpRequest를 이용한 방법

가장 기본적인 방법은 XMLHttpRequest 객체를 사용하여 JSON 데이터를 받아오는 것입니다. 아래의 예제 코드를 통해 이해해보겠습니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data.json', true);
xhr.onload = function() {
    if(xhr.status >= 200 && xhr.status < 400) {
        var data = JSON.parse(xhr.responseText);
        // 여기서 데이터를 처리하거나 출력할 수 있습니다.
    }
};
xhr.send();

위의 코드에서는 XMLHttpRequest 객체를 이용하여 GET 요청을 보내고, 해당 요청이 성공적으로 완료되면 onload 이벤트 핸들러가 호출됩니다. 이벤트 핸들러에서는 응답 데이터를 JSON.parse() 메소드를 이용하여 자바스크립트 객체로 변환한 후 원하는 처리를 할 수 있습니다.

Fetch API를 이용한 방법

ES6부터 도입된 fetch 함수를 사용하면 좀 더 간결하고 강력한 방법으로 JSON 데이터를 가져올 수 있습니다. 아래의 예제 코드를 통해 확인해보세요.

fetch('https://api.example.com/data.json')
    .then(function(response) {
        if(response.ok) {
            return response.json();
        }
        throw new Error('Network response was not ok.');
    })
    .then(function(data) {
        // 여기서 데이터를 처리하거나 출력할 수 있습니다.
    })
    .catch(function(error) {
        console.log('Error:', error.message);
    });

위의 코드에서는 fetch 함수를 사용하여 GET 요청을 보내고, 응답이 성공적으로 완료되면 then 메소드의 첫 번째 콜백 함수가 호출됩니다. 콜백 함수 내부에서는 응답 데이터를 response.json() 메소드를 이용하여 JSON으로 변환한 후 처리를 할 수 있습니다. 요청이 실패한 경우에는 catch 메소드의 콜백 함수가 호출됩니다.

axios를 이용한 방법

axios는 많은 개발자들에게 인기있는 HTTP 클라이언트 라이브러리입니다. axios를 사용하면 좀 더 간편하게 JSON 데이터를 가져올 수 있습니다. 아래의 예제 코드를 통해 확인해보세요.

axios.get('https://api.example.com/data.json')
    .then(function(response) {
        // 여기서 데이터를 처리하거나 출력할 수 있습니다.
    })
    .catch(function(error) {
        console.log('Error:', error);
    });

위의 코드에서는 axios.get 함수를 사용하여 GET 요청을 보내고, 응답이 성공적으로 완료되면 then 메소드의 콜백 함수가 호출됩니다. 콜백 함수 내부에서는 응답 데이터를 처리할 수 있습니다. 요청이 실패한 경우에는 catch 메소드의 콜백 함수가 호출됩니다.

마무리

위에서 소개한 세 가지 방법 모두 JSON API를 통해 데이터를 자바스크립트로 가져오는 방법입니다. 어떤 방법을 선택하든 JSON 데이터를 효율적으로 처리할 수 있습니다. 자신의 프로젝트에 가장 적합한 방법을 선택하여 사용해보세요. 좀 더 복잡한 요청을 처리해야 할 때는 각 라이브러리의 공식 문서를 참고하여 필요한 기능을 사용해보시기 바랍니다. Happy coding!