JSON(JavaScript Object Notation)은 자바스크립트에서 데이터를 표현하는 일반적인 형식입니다. 이 형식은 가볍고 읽기 쉽기 때문에 웹 애플리케이션에서 데이터를 교환하거나 저장하는 데 많이 사용됩니다. 이 글에서는 자바스크립트에서 JSON 데이터를 공유하는 몇 가지 방법을 알아보겠습니다.

1. JSON.stringify()와 JSON.parse() 사용하기

JSON.stringify() 함수를 사용하면 JavaScript 객체를 JSON 문자열로 변환할 수 있습니다. 이렇게 변환된 JSON 문자열은 서버로 전송하거나 로컬 스토리지에 저장할 수 있습니다.

const data = { name: 'John', age: 30 };
const jsonString = JSON.stringify(data);
console.log(jsonString);
// 결과: {"name":"John","age":30}

// 서버로 전송 또는 저장된 JSON 문자열을 다시 JavaScript 객체로 변환
const parsedData = JSON.parse(jsonString);
console.log(parsedData.name); // 결과: John
console.log(parsedData.age); // 결과: 30

JSON.parse() 함수를 사용하면 JSON 문자열을 다시 JavaScript 객체로 변환할 수 있습니다. 이를 통해 서버에서 받은 JSON 응답을 자바스크립트에서 처리할 수 있습니다.

2. fetch API를 사용하여 JSON 데이터 가져오기

fetch API를 사용하면 서버에서 JSON 데이터를 가져올 수 있습니다. fetch() 함수로 원격 URL에 요청을 보내고, then() 메소드로 응답을 처리할 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // JSON 데이터를 자바스크립트 객체로 사용
  })
  .catch(error => {
    console.error(error);
  });

서버로부터 받은 JSON 데이터는 response.json() 함수를 사용하여 자바스크립트 객체로 변환됩니다. 그런 다음, then() 메소드를 사용하여 데이터를 처리할 수 있습니다.

3. AJAX를 사용하여 JSON 데이터 전송하기

AJAX(Asynchronous JavaScript and XML)는 비동기적으로 서버와 통신하는 기술입니다. 이를 사용하여 JSON 데이터를 서버로 전송할 수 있습니다.

const data = { name: 'John', age: 30 };
const url = 'https://api.example.com/saveData';

const xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
    // 서버로부터 받은 응답을 처리
  }
};
xhr.send(JSON.stringify(data));

위의 예제에서는 XMLHttpRequest 객체를 사용하여 서버로 POST 요청을 보내고, JSON.stringify() 함수로 데이터를 JSON 문자열로 변환하여 보냅니다. 서버의 응답은 xhr.responseText를 통해 얻을 수 있습니다.

이외에도 많은 방법이 있지만, 위의 방법들은 가장 일반적으로 사용되는 방법입니다. JSON 데이터를 자바스크립트에서 공유하는 방법을 알아두면 웹 애플리케이션 개발에 도움이 될 것입니다.