웹 개발을 하다보면 서버에서 다른 프로그램으로부터 데이터를 가져와야 하는 경우가 많습니다. 이때 JSON(JavaScript Object Notation)은 아주 효과적인 데이터 형식입니다. JSON은 간결하고 가독성이 있으며, 자바스크립트에서 손쉽게 다룰 수 있습니다.

JSON 개요

JSON은 데이터를 표현하기 위한 경량의 형식입니다. 일반적으로 키-값 쌍으로 이루어진 객체의 집합으로 구성되어 있습니다. JSON 형식은 자바스크립트의 객체와 비슷한 형태를 가지며, 문자열, 숫자, 불리언, 배열, 객체 등 다양한 데이터 유형을 포함할 수 있습니다.

JSON 데이터 가져오기

자바스크립트에서 다른 프로그램의 데이터를 가져오기 위해서는 주로 HTTP 요청을 사용합니다. AJAX(Asynchronous JavaScript and XML)를 사용하면 비동기적으로 서버에 데이터를 요청하고 받아올 수 있습니다.

아래는 자바스크립트에서 AJAX를 사용하여 JSON 데이터를 가져오는 간단한 예제입니다.

// XMLHttpRequest 객체 생성
var xhr = new XMLHttpRequest();

// GET 요청 설정
xhr.open('GET', 'https://example.com/data.json', true);

// 요청 완료 후 실행할 콜백 함수
xhr.onload = function() {
  if (xhr.status === 200) {
    // 요청한 데이터가 JSON 형식이므로 파싱하여 객체로 변환
    var data = JSON.parse(xhr.responseText);
    
    // 데이터 활용
    console.log(data);
  } else {
    console.error('데이터를 가져오는 중 오류가 발생했습니다.');
  }
};

// 에러 처리
xhr.onerror = function() {
  console.error('요청을 보내는 중 오류가 발생했습니다.');
};

// 요청 전송
xhr.send();

위 예제에서는 XMLHttpRequest 객체를 생성하여 GET 요청을 보냅니다. 요청이 완료되면 onload 이벤트 핸들러에서 응답 데이터를 JSON 형식으로 파싱하여 활용할 수 있습니다.

JSONP를 사용한 크로스 도메인 데이터 가져오기

위의 예제는 같은 도메인에서 데이터를 가져오는 것을 가정하고 있습니다. 만약 다른 도메인에서 데이터를 가져와야 한다면 SOP(Same-Origin Policy)에 의해 제한됩니다. 이때 JSONP(JSON with Padding)를 사용하면 크로스 도메인 데이터를 가져올 수 있습니다.

JSONP는 스크립트 태그를 동적으로 생성하여 서버측에서 콜백 함수로 데이터를 전달하는 방식입니다. 아래는 JSONP를 사용하여 크로스 도메인에서 데이터를 가져오는 예제입니다.

// 콜백 함수 선언
function handleData(data) {
  console.log(data);
}

// 스크립트 태그 동적 생성
var script = document.createElement('script');
script.src = 'https://example.com/data.json?callback=handleData';
document.head.appendChild(script);

위 예제에서는 콜백 함수 handleData를 선언하고, 스크립트 태그를 동적으로 생성하여 서버에서 데이터를 응답할 때 콜백 함수를 호출합니다. 이렇게 서버에서 데이터를 전달받을 때마다 콜백 함수가 실행되어 데이터를 처리할 수 있습니다.

결론

자바스크립트에서 JSON을 사용하여 다른 프로그램의 데이터를 가져오는 방법을 알아보았습니다. JSON은 가볍고 간단한 형식이며, AJAX와 JSONP를 사용하여 데이터를 비동기적으로 가져올 수 있습니다. JSON을 효과적으로 활용하여 웹 개발 프로젝트를 더욱 효율적으로 구현할 수 있습니다.