JSON (JavaScript Object Notation)은 데이터 교환을 위해 사용되는 경량의 데이터 형식입니다. 자바스크립트에서는 JSON을 손쉽게 읽어와서 처리할 수 있습니다. 이번 블로그에서는 자바스크립트에서 JSON 파일을 읽어오는 방법에 대해 알아보겠습니다.

1. XMLHttpRequest를 사용하는 방법

가장 일반적인 방법은 XMLHttpRequest 객체를 사용하는 것입니다. 아래는 JSON 파일을 읽어오는 예제입니다.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var data = JSON.parse(this.responseText);
    // 응답 데이터를 처리하는 로직
  }
};
xhttp.open("GET", "data.json", true);
xhttp.send();

위의 코드에서 data.json은 실제로 읽어올 JSON 파일의 경로를 나타냅니다. 서버에서 해당 파일을 가져와 응답을 받은 후, responseText로부터 JSON 데이터를 추출하고, JSON.parse()를 사용하여 자바스크립트 객체로 변환합니다. 이제 data 변수를 활용하여 JSON 데이터를 처리할 수 있습니다.

2. fetch API를 사용하는 방법

fetch API는 네트워크 요청을 보내는 데 사용되는 자바스크립트 API입니다. 아래는 fetch API를 사용하여 JSON 파일을 읽어오는 방법의 예제입니다.

fetch('data.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    // 응답 데이터를 처리하는 로직
  });

fetch 함수를 호출하여 서버로부터 JSON 파일을 가져옵니다. 응답(response) 객체에서 json() 메소드를 호출하여 JSON 데이터를 추출합니다. 그리고 이후의 then() 메소드 체인을 이용하여 데이터를 처리합니다.

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

axios는 HTTP 요청을 보내는 것을 도와주는 라이브러리로서, 브라우저뿐만 아니라 Node.js에서도 사용할 수 있습니다. 아래는 axios를 사용하여 JSON 파일을 읽어오는 방법의 예제입니다.

axios.get('data.json')
  .then(function(response) {
    var data = response.data;
    // 응답 데이터를 처리하는 로직
  })
  .catch(function(error) {
    console.log(error);
  });

axios.get() 메소드를 호출하여 JSON 파일을 가져옵니다. 응답(response) 객체에서 data 속성을 통해 JSON 데이터에 접근할 수 있습니다. 오류가 발생할 경우 catch() 블록에서 오류 처리를 할 수 있습니다.

마무리

이상으로 자바스크립트에서 JSON 파일을 읽어오는 여러 가지 방법을 알아보았습니다. 이를 기반으로 프로젝트를 진행하면서 필요한 데이터를 쉽게 가져와 활용할 수 있을 것입니다. JSON 파일은 웹 애플리케이션에서 데이터를 교환할 때 자주 사용되므로, 자바스크립트에서 JSON을 다루는 방법은 꼭 숙지해두어야 합니다.