자바스크립트에서 JSON을 어떻게 사용하는지

JSON(JavaScript Object Notation)은 데이터를 표현하고 전송하기 위한 경량의 데이터 형식입니다. 자바스크립트에서 JSON을 사용하면 데이터를 쉽게 직렬화하고 파싱할 수 있습니다. 이 글에서는 자바스크립트에서 JSON을 사용하는 방법에 대해 알아보겠습니다.

JSON.stringify()

JSON.stringify()를 사용하면 자바스크립트 객체를 JSON 문자열로 변환할 수 있습니다. 이 메서드는 객체를 문자열로 변환하여 JSON 형식으로 표현합니다.

var obj = { name: "John", age: 30, city: "New York" };
var jsonStr = JSON.stringify(obj);
console.log(jsonStr); // "{"name":"John","age":30,"city":"New York"}"

JSON.parse()

JSON.parse()를 사용하면 JSON 문자열을 자바스크립트 객체로 파싱할 수 있습니다. 이 메서드는 JSON 문자열을 객체로 변환하여 사용할 수 있게 해줍니다.

var jsonStr = '{"name":"John","age":30,"city":"New York"}';
var obj = JSON.parse(jsonStr);
console.log(obj.name); // "John"
console.log(obj.age); // 30
console.log(obj.city); // "New York"

AJAX와 JSON

AJAX(Asynchronous JavaScript and XML)는 서버로부터 데이터를 비동기적으로 가져오는 기술입니다. JSON은 AJAX에서 자주 사용되는 데이터 형식입니다. 예를 들어, 서버로부터 JSON 데이터를 가져와서 자바스크립트로 처리할 수 있습니다.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var response = JSON.parse(this.responseText);
    console.log(response); // 서버로부터 받은 JSON 데이터 출력
    // 여기서 데이터를 처리하거나 화면에 표시할 수 있음
  }
};
xhttp.open("GET", "example.com/data", true);
xhttp.send();

요약

이 글에서는 자바스크립트에서 JSON을 사용하는 방법에 대해 살펴보았습니다. JSON.stringify()를 사용하여 자바스크립트 객체를 JSON 문자열로 변환하고, JSON.parse()를 사용하여 JSON 문자열을 자바스크립트 객체로 파싱할 수 있습니다. 또한 AJAX에서 자주 사용되는 JSON을 사용하여 서버로부터 데이터를 비동기적으로 가져올 수 있습니다.

JSON은 데이터를 효율적으로 전송하고 저장하기 위한 간단하고 강력한 형식으로 자바스크립트 개발에 필수적인 요소입니다. 자바스크립트에서 JSON을 자유자재로 활용하면 다양한 웹 애플리케이션을 개발할 수 있습니다.