JSON(JavaScript Object Notation)은 자바스크립트에서 데이터를 교환하기 위해 널리 사용되는 형식입니다. 자바스크립트로 작성된 웹 애플리케이션에서 서버로부터 받은 JSON 데이터를 자바스크립트로 가져와서 분석하는 방법에 대해 알아보겠습니다.

1. JSON 데이터 가져오기

먼저, JSON 데이터를 가져와야 합니다. 이를 위해서는 웹 애플리케이션에서 AJAX를 사용하여 서버로부터 JSON 데이터를 비동기적으로 가져올 수 있습니다. 아래는 AJAX를 사용하여 JSON 데이터를 가져오는 예제 코드입니다.

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => {
    // 가져온 JSON 데이터를 분석하고 원하는 작업을 수행합니다.
    console.log(data);
  })
  .catch(error => {
    console.error('JSON 데이터를 가져오는 중 에러가 발생했습니다.', error);
  });

위 코드에서 fetch('https://example.com/data.json')은 서버로부터 JSON 데이터를 가져오는 요청을 보내는 부분입니다. response.json()은 서버의 응답을 JSON으로 변환하는 역할을 합니다. 마지막으로, then 블록에서 가져온 JSON 데이터를 분석하고 필요한 작업을 수행할 수 있습니다.

2. JSON 데이터 분석하기

JSON 데이터를 가져온 후에는 이를 자바스크립트로 분석하여 필요한 정보를 추출할 수 있습니다. JSON 데이터는 객체와 배열로 구성되어 있으며, 자바스크립트에서는 JSON.parse() 함수를 사용하여 JSON 문자열을 자바스크립트 객체로 변환할 수 있습니다. 아래는 간단한 예제 코드입니다.

const jsonData = '{"name": "John", "age": 30, "city": "New York"}';
const parsedData = JSON.parse(jsonData);

console.log(parsedData.name); // 출력: "John"
console.log(parsedData.age); // 출력: 30
console.log(parsedData.city); // 출력: "New York"

위 코드에서 JSON.parse(jsonData)는 JSON 문자열 jsonData를 자바스크립트 객체로 변환합니다. 그 후에는 자바스크립트 객체를 사용하여 JSON 데이터를 분석할 수 있습니다.

3. JSON 데이터를 자바스크립트 객체로 사용하기

JSON 데이터를 자바스크립트 객체로 변환한 후에는 해당 객체의 속성에 접근하여 원하는 작업을 수행할 수 있습니다. 아래는 예제 코드입니다.

const jsonData = '{"employees": [{"firstName": "John", "lastName": "Doe"}, {"firstName": "Anna", "lastName": "Smith"}, {"firstName": "Peter", "lastName": "Jones"}]}';
const parsedData = JSON.parse(jsonData);

parsedData.employees.forEach(employee => {
  console.log(`${employee.firstName} ${employee.lastName}`);
});

위 코드는 JSON 데이터에서 “employees” 배열 내의 각 요소에 접근하여 “firstName”과 “lastName” 속성을 출력하는 예제입니다. 각각의 요소에 접근하기 위해 parsedData.employees를 사용하고, 배열의 각 요소마다 forEach 메서드를 사용하여 작업을 수행합니다.

위의 방법을 사용하면 자바스크립트로 JSON 데이터를 가져와서 분석하는 것이 가능합니다. JSON 데이터를 가져와서 원하는 작업을 수행할 수 있도록 자바스크립트를 활용해보세요!