[JSON] JS - JSON - Introduction (소개)

JSON 소개

[정의]

 

1. 

JSON : JavaScript Object Notation (JS 객체 명세서)

(예) var myJSON = '{"site":"홈짱닷컴 ", "domain":"Homzzang.com", "year":2012}'; // JSON 포맷

 

2. 

데이터 저장 및 교환 위한 구문.

 

---

[데이터 교환 시 주의사항]

 

1. 

서버와 브라우저간 데이터 교환은 오직 텍스트 형태로만 가능.

 

2. 

JSON은 텍스트임.

 

3. 

어떤 JS 객체든 JSON으로 변환해 서버로 전송 가능하며,

서버에서 전송받은 어떤 JSON이든 JS 객체로 변환 가능.

이런 방법을 통해서,
복잡한 파싱 및 번역 없이 데이터를 JS 객체로 처리 가능.     

 

예제1 - JS 객체를 JSON 포맷으로 변환해 서버로 보내기

/send.php 소스

 

<script>

var myObj = {site: "홈짱닷컴", since: 2012, domain: "Homzzang.com"}; // JS 객체

var myJSON = JSON.stringify(myObj); // JSON 포맷

window.location = "homzzang.php?x=" + myJSON;

</script> 

 

---

/homzzang.php 소스

 

<?php

$x = $_GET['x'];

?>

<div id='hz'></div>

<script>

var myJSON = '<?php echo $x;?>'; // JSON 포맷

var myObj = JSON.parse(myJSON);  // JS 객체

document.getElementById("hz").innerHTML = myObj.site + " " + myObj.domain + " Since " + myObj.year;

</script>

예제2 -  JSON 포맷을 JS 객체로 변환하기

 

<p id="homzzang"></p>

<script>

var myJSON = '{"site":"홈짱닷컴 ", "domain":"Homzzang.com", "year":2012}'; // JSON 포맷

var myObj = JSON.parse(myJSON); // JS 객체

document.getElementById("homzzang").innerHTML = myObj.site;

</script>

 

결과보기

예제3 - JS 객체를 text 형식으로 저장 후 불러오기

 

<p id="hz"></p>

<script>

var myObj, myJSON, text, obj;

// Storing data:

 

var myObj = { site: "홈짱닷컴", since: 2012, domain: "Homzzang.com" }; // JS 객체

myJSON = JSON.stringify(myObj);

localStorage.setItem("saveJSON", myJSON);

// Retrieving data:

text = localStorage.getItem("saveJSON");

obj = JSON.parse(text);

document.getElementById("hz").innerHTML = obj.site;

</script>

결과보기

※ 데이터를 저장할 때 특정 형식을 갖춰야 하는데, text 형식은 항상 적합한 형식 중 하나임.

※ JSON은 JS코드를 text 형식으로 저장가능.

JSON 소개

 

1,

JSON (= JavaScript Object Notation)

 

2.

JSON은 간단한 데이터 교환 형식임.

 

3.

JSON은 자기서술 (= 자신 설명)적이라 이해하기 쉬움.

4.
JSON은 언어와 무관함.
JSON은 JavaScript 구문 사용하지만 JSON 형식은 텍스트만 사용. 

텍스트는 모든 프로그래밍 언어에서 데이터 형식으로 읽고 사용 가능.

 

※ JSON 형식은 원래 Douglas Crockford에 의해 구체화 됨.

JSON 사용 이유

 

JSON 형식은 텍스트 형식이므로 서버와 주고받을 수 있으며 모든 프로그래밍 언어에 의해 데이터 형식으로 가능.

JS에는 JSON 형식으로 작성된 문자열을 기본 JS 객체로 변환하는 기능이 내장되어 있음.

JSON.parse()

따라서, 서버에서 JSON 형식 데이터 받는 경우 JS 객체처럼 사용 가능.

 

PS.

[강의]

 

엘리 님 (10. JSON) 강의

https://youtu.be/FN_D4Ihs3LE

 

모질라 (JSON) 강의

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

 

JS (JSON) 강의

https://javascript.info/json (영어 버전)

https://ko.javascript.info/json (한국어 버전)

 

---

[웹툴]

 

JSON Diff 

http://www.jsondiff.com/

 

JSON Beautifier

https://jsonbeautifier.org/

 

JSON Parser

https://jsonparser.org/

 

JSON Validator

https://tools.learningcontainer.com/json-validator/