JSON(JavaScript Object Notation)은 데이터 교환을 위해 사용되는 경량의 데이터 형식입니다. JSON 파일은 일반적으로 서버에서 데이터를 응답으로 제공하거나 클라이언트 측에서 파일 시스템에서 읽어올 때 사용됩니다. 이 글에서는 자바스크립트에서 JSON 파일을 읽어오는 여러 가지 방법을 알아보겠습니다.

1. XMLHttpRequest를 사용하는 방법

XMLHttpRequest 객체는 비동기적으로 서버와 상호작용할 수 있는 API입니다. 다음은 XMLHttpRequest를 사용하여 JSON 파일을 읽어오는 예제 코드입니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
        // 여기서 데이터를 처리하는 코드 작성
    }
};
xhr.send();

위의 코드에서 xhr.open 메소드를 사용하여 GET 요청을 보내는데, data.json 파일의 경로를 지정합니다. 그리고 xhr.onreadystatechange 함수가 요청 상태변화에 따른 이벤트를 처리하도록 합니다. 응답이 도착하고 상태 코드가 200인 경우(즉, 성공), xhr.responseText를 JSON.parse를 통해 데이터로 변환하여 사용할 수 있습니다.

2. fetch API를 사용하는 방법

fetch API는 네트워크 요청을 보내고 응답을 다루기 위한 간편하고 강력한 인터페이스를 제공합니다. 다음은 fetch API를 사용하여 JSON 파일을 읽어오는 예제 코드입니다.

fetch('data.json')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        // 여기서 데이터를 처리하는 코드 작성
    })
    .catch(error => console.error(error));

위의 코드는 fetch 함수를 사용하여 data.json 파일을 가져오고, 응답을 response.json을 통해 JSON 형식으로 변환합니다. 변환된 데이터는 then 메소드를 통해 사용할 수 있습니다. catch 메소드는 네트워크 요청이 실패한 경우의 오류를 처리합니다.

3. AJAX 라이브러리를 사용하는 방법

AJAX(Asynchronous JavaScript And XML)는 비동기적으로 서버와 상호작용하기 위한 기술입니다. 자바스크립트에서 많이 사용되는 AJAX 라이브러리인 jQuery를 사용하여 JSON 파일을 읽어오는 예제 코드는 다음과 같습니다.

$.ajax({
    url: 'data.json',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
        // 여기서 데이터를 처리하는 코드 작성
    },
    error: function(error) {
        console.error(error);
    }
});

위의 코드에서 url 속성에 data.json 파일의 경로를 지정하고, dataType 속성을 json으로 설정하여 응답 데이터를 JSON 형식으로 해석하도록 합니다. 성공적인 응답의 경우 success 콜백 함수가 호출되고, 오류가 발생한 경우 error 콜백 함수가 호출됩니다.

이러한 방법들을 통해 자바스크립트에서 JSON 파일을 읽어올 수 있으며, 응답 데이터를 원하는 방식으로 처리할 수 있습니다. 선택한 방법은 프로젝트에 최적한 방식을 선택하면 됩니다.