자바스크립트에서 JSON 데이터를 공유하는 방법

10 Sep 2023

javascript

JSON(JavaScript Object Notation)은 데이터를 효과적으로 전달하기 위한 경량의 데이터 형식입니다. 자바스크립트에서는 JSON을 사용하여 데이터를 공유하고 전송할 수 있습니다. 이 글에서는 자바스크립트에서 JSON 데이터를 공유하는 몇 가지 방법을 설명하겠습니다.

1. JSON.stringify와 JSON.parse를 이용한 직렬화/역직렬화

JSON.stringify 메소드를 사용하면 자바스크립트 객체를 JSON 문자열로 변환할 수 있습니다. 예를 들어, 다음과 같은 자바스크립트 객체가 있다고 가정해봅시다.

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

이 객체를 JSON 문자열로 변환하려면 JSON.stringify 메소드를 사용합니다.

const jsonStr = JSON.stringify(person);
console.log(jsonStr);
// 출력: {"name":"John","age":30,"city":"New York"}

JSON.parse 메소드를 사용하면 JSON 문자열을 다시 자바스크립트 객체로 변환할 수 있습니다.

const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);
// 출력: { name: "John", age: 30, city: "New York" }

이렇게 JSON.stringify와 JSON.parse 메소드를 이용하여 자바스크립트 객체와 JSON 문자열을 자유롭게 변환할 수 있습니다.

2. AJAX 요청으로 JSON 데이터 가져오기

자바스크립트에서 서버로부터 JSON 데이터를 가져오려면 AJAX 요청을 사용할 수 있습니다. AJAX는 Asynchronous JavaScript and XML의 약자로, 비동기 방식으로 서버와 데이터를 교환하기 위한 기술입니다. XMLHttpRequest 객체를 사용하여 AJAX 요청을 만들고, 서버로부터 JSON 데이터를 받아와서 처리할 수 있습니다.

const xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function () {
  if (xhr.status === 200) {
    const jsonData = JSON.parse(xhr.responseText);
    console.log(jsonData);
  }
};
xhr.send();

위의 예제에서는 GET 요청으로 “data.json” 파일에서 JSON 데이터를 가져옵니다. 성공적으로 JSON 데이터를 가져온 후에는 JSON.parse를 사용하여 자바스크립트 객체로 변환하고, 이를 활용하여 데이터를 처리할 수 있습니다.

3. 웹소켓을 이용한 실시간 JSON 데이터 공유

JSON 데이터를 실시간으로 공유하고 업데이트하기 위해 웹소켓을 사용할 수 있습니다. 웹소켓은 양방향 통신을 지원하며, 실시간으로 데이터를 주고받을 수 있도록 해줍니다.

const socket = new WebSocket("ws://localhost:8080");

// 서버로부터 JSON 데이터를 받을 때
socket.onmessage = function (event) {
  const jsonData = JSON.parse(event.data);
  console.log(jsonData);
};

// JSON 데이터를 서버로 보낼 때
const data = { message: "Hello", name: "John" };
socket.send(JSON.stringify(data));

위의 예제에서는 웹소켓을 생성하고, onmessage 이벤트 핸들러를 사용하여 서버로부터 전송된 JSON 데이터를 받습니다. JSON.stringify 메소드를 사용하여 JSON 데이터를 문자열로 변환한 후, send 메소드를 사용하여 서버로 전송할 수 있습니다.

결론

이 글에서는 자바스크립트에서 JSON 데이터를 공유하는 방법을 알아보았습니다. JSON 데이터를 자바스크립트 객체로 변환하거나, AJAX 요청을 통해 JSON 데이터를 가져오는 방법, 그리고 웹소켓을 이용하여 실시간으로 JSON 데이터를 공유하는 방법을 살펴보았습니다. JSON은 다양한 애플리케이션에서 데이터를 교환하고 공유하는 데 매우 유용한 형식이므로, 자바스크립트에서 JSON을 잘 활용할 수 있도록 학습하는 것이 중요합니다.