JSON 개요

JSON: JavaScript Object Notation（JavaScript 객체 표시법）。

JSON은 데이터 저장 및 교환에 사용되는 문법입니다.

JSON은 JavaScript 객체 표기법으로 쓰인 텍스트입니다.

데이터 교환

데이터가 브라우저와 서버 간에 교환될 때, 이 데이터는 텍스트로만 가능합니다.

JSON은 텍스트이며, 어떤 JavaScript 객체도 JSON으로 변환하여 서버로 전송할 수 있습니다.

서버에서 수신한 어떤 JSON도 JavaScript 객체로 변환할 수 있습니다.

이렇게 하면 데이터를 복잡한 해석과 변환 없이 JavaScript 객체로 처리할 수 있습니다.

데이터 전송

데이터가 JavaScript 객체에 저장되어 있다면, 그 객체를 JSON으로 변환하여 서버로 전송할 수 있습니다.

예제

var myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
var myJSON =  JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

직접 시도해보세요

이 튜토리얼의 나중 장에서 더 많이 배울 수 있습니다. JSON.stringify() 함수의 지식.

데이터 수신

JSON 형식으로 데이터를 수신하면, 그 데이터를 JavaScript 객체로 변환할 수 있습니다:

예제

var myJSON = '{ "name":"Bill Gates",  "age":62, "city":"Seattle" }';
var myObj =  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

직접 시도해보세요

이 튜토리얼의 나중 장에서 더 많이 배울 수 있습니다. JSON.parse() 함수의 지식.

데이터 저장

데이터를 저장할 때, 데이터는 특정한 형식이어야 하며, 저장할 위치에 상관없이 텍스트는 항상 유효한 형식 중 하나입니다.

JSON이 JavaScript 객체를 텍스트로 저장할 수 있게 합니다.

예제

데이터를 로컬 스토리지에 저장합니다

//데이터 저장：
myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
myJSON =  JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);
//수신 데이터：
text = localStorage.getItem("testJSON");
obj =  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

직접 시도해보세요

JSON이란 무엇인가?

  • JSON은 JavaScript 객체 표기법（JavaScript Object Notation）
  • JSON은 가벼운 데이터 교환 형식입니다
  • JSON은 자기 설명적이고 이해하기 쉽습니다
  • JSON은 언어에 독립적입니다*

*

JSON은 JavaScript 문법을 사용하지만, JSON 형식은 순수 텍스트입니다.

텍스트는 어떤 프로그래밍 언어에서도 데이터로 읽고 사용될 수 있습니다.

JSON 형식은 원래 Douglas Crockford에 의해 제안되었습니다.

왜 JSON을 사용하는가?

JSON 형식은 단순한 텍스트이므로, 서버와 브라우저 간에서 쉽게 전송되고, 어떤 프로그래밍 언어의 데이터 형식으로 사용될 수 있습니다.

JavaScript는 JSON 형식으로 작성된 문자열을 원시 JavaScript 객체로 변환하는 내장 함수를 제공합니다:

JSON.parse()

따라서, 서버에서 JSON 형식으로 데이터를 받으면, 다른 JavaScript 객체와 같이 사용할 수 있습니다.