======JavaScript Json Intro======
<WRAP left notice 70%>
  * description : JavaScript JSON - Introduction
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2022-12-09 Fri
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of this article=====
[[https://www.w3schools.com/js/js_json_intro.asp|JSON - Introduction]]\\

  JSON은 JavaScript Object Notation(자바스크립트 객체 표기법)을 의미합니다.
  JSON은 데이터를 저장, 전송하기 위한 텍스트 형식입니다. 
  JSON은 자체 서술적(self-describing)이며, 이해하기 쉽습니다.

===== JSON Example =====
아래의 예제는 JSON string입니다.\\
<code javascript>
'{"name":"John", "age":30, "car":null}'
</code>
3개의 속성을 가진 객체를 정의합니다.\\
  * name
  * age
  * car

각각의 속성은 값(value)을 가집니다.\\
JavaScript 프로그램으로 JSON string을 구문분석(parse)하면, 객체로서의 데이터에 접근할 수 있습니다.\\

<code javascript>
let personName = obj.name;
let personAge = obj.age;
</code>

===== What is JSON? =====
  * JSON은 JavaScript Object Notation(자바스크립트 객체 표기법)을 나타냅니다.
  * JSON은 경량의 데이터 교환 형식입니다. 
  * JSON은 자바스크립트 객체 표기법으로 쓰인 평문입니다.
  * JSON은 컴퓨터 간 데이터를 보내기 위해 사용됩니다.
  * JSON은 언어 독립적입니다.

  JSON 구문은 자바스크립트 객체 표기법에서 유래되었지만, JSON 형식은 텍스트만으로 되어 있습니다.
  JSON을 읽고 생성하는 코드는 많은 프로그래밍 언어에 존재합니다. 

JSON 포맷은 원래 Douglas Crokcford가 지정했습니다.\\

===== Why Use JSON? =====
JSON 포맷은 구문적으로 JavaScript 객체를 생성하기 위한 코드와 유사합니다.\\
이 때문에 JavaScript 프로그램은 JSON 데이터를 JavaScript 객체로 쉽게 변환할 수 있습니다.\\
\\
JSON 포맷이 텍스트로만 되어있어, JSON 데이터를 컴퓨터 간에 쉽게 전송할 수 있으며\\ 
모든 프로그래밍 언어에서 사용할 수 있습니다.\\
\\
JavaScript에는 JSON 문자열을 JavaScript 객체로 변환하는 내장 함수가 있습니다:\\
\\
**''JSON.parse()''**\\
\\
JavaScript에는 객체를 JSON 문자열로 변환하는 내장 함수도 있습니다.\\
\\
**''JSON.stringify()''**\\
\\
  서버에서 순수 텍스트를 받아 JavaScript 객체로 사용할 수 있습니다.
  JavaScript 객체를 순수한 텍스트 포맷으로 서버에 보낼 수 있습니다.
  복잡한 구문 분석 및 번역 없이, 데이터를 JavaScript 객체로 사용할 수 있습니다.

===== Storing Data =====
데이터를 저장할 때 데이터는 특정 형식이어야 하며\\ 
저장 위치에 관계없이 텍스트는 항상 허용되는 포맷 중 하나입니다.\\
\\
JSON을 사용하면 JavaScript 객체를 텍스트로 저장할 수 있습니다.\\

====== JSON 객체 ======
자바스크립트 배열과 객체를 활용해 자료를 표현하는 방식\\
자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify()메소드를 사용합니다.\\
\\
<code javascript>
const data = [
    {
        name : '혼자 공부하는 파이썬'
        , price : 18000
        , publisher : '한빛미디어'
    }
    ,
    {
        name : 'HTML5 웹 프로그래밍 입문'
        , price : 20000
        , publisher : '한빛아카데미'
    }
]

console.log(JSON.stringify(data));
console.log('+++++++++++++++++++++++++++');
console.log(JSON.stringify(data, null, 2));
</code>
\\
**결과 : **\\
<code javascript>
[{"name":"혼자 공부하는 파이썬","price":18000,"publisher":"한빛미디어"},{"name":"HTML5 웹 프로그래밍 입문","price":20000,"publisher":"한빛아카데미"}]
+++++++++++++++++++++++++++
[
  {
    "name": "혼자 공부하는 파이썬",
    "price": 18000,
    "publisher": "한빛미디어"
  },
  {
    "name": "HTML5 웹 프로그래밍 입문",
    "price": 20000,
    "publisher": "한빛아카데미"
  }
]
</code>
\\
<code javascript>
console.log(JSON.stringify(data));  // 매개변수를 하나만 넣으면 한 줄로 반환됩니다.
</code>
\\
<code javascript>
console.log(JSON.stringigy(data, null, 2));
//null : 2번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용하나, 거의 사용하지 않으며, 일반적으로 null(아무 것도 없음)을 넣습니다.\\
//2: 들여쓰기 2칸으로 설정합니다.\\
//--출처 : [혼자 공부하는 자바스크립트]
</code>







{{tag>오션, JS JSON Intro}}