자바스크립트는 웹 애플리케이션에서 서버와 통신하기 위해 많이 사용되는 프로그래밍 언어입니다. 이 중에서도 API를 호출하여 데이터를 가져오는 경우가 많은데, 이때 JSON(JavaScript Object Notation) 형식의 데이터를 사용하게 됩니다. 자바스크립트에서 JSON 데이터를 사용하여 API를 호출하는 방법을 알아보겠습니다.

1. XMLHttpRequest를 이용한 API 호출

XMLHttpRequest은 자바스크립트에서 서버와 비동기적으로 통신하기 위한 객체입니다. 다음은 XMLHttpRequest를 이용하여 JSON 데이터를 요청하고 처리하는 예제입니다.

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data.json', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

위 코드에서 xhr.open() 메서드를 사용하여 API의 URL을 지정하고 GET 요청을 설정합니다. 그리고 xhr.onload 이벤트 핸들러를 등록하여 요청이 완료되었을 때 응답 데이터를 처리합니다. 응답은 xhr.responseText로 받아와서 JSON.parse() 함수를 사용하여 JSON 데이터로 변환합니다.

2. fetch API를 이용한 API 호출

ES6부터는 fetch 함수를 사용하여 더욱 간편하게 API를 호출할 수 있습니다. 다음은 fetch API를 이용하여 JSON 데이터를 요청하고 처리하는 예제입니다.

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

위 코드에서 fetch() 함수는 Promise 객체를 반환하며, 체인 형태로 사용되어 응답 데이터를 처리합니다. response.json() 메서드를 호출하여 응답을 JSON 형태로 변환한 후, 다음 then() 메서드에서 데이터를 처리합니다.

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

axios는 HTTP 요청을 보내는 데 사용되는 인기있는 자바스크립트 라이브러리입니다. 다음은 axios를 이용하여 JSON 데이터를 요청하고 처리하는 예제입니다.

axios.get('https://api.example.com/data.json')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

axios의 get() 메서드를 사용하여 JSON 데이터를 요청하고, 응답 데이터는 response.data를 통해 접근할 수 있습니다. 요청이 실패한 경우 catch() 메서드에서 에러를 처리할 수 있습니다.

위와 같이 자바스크립트에서 JSON 데이터를 사용하여 API를 호출하는 방법을 알아보았습니다. 이제 API 요청 후 반환되는 JSON 데이터를 자유롭게 활용하여 애플리케이션을 개발할 수 있습니다.