JSON 정의, 함수 stringify parse

// JSON : Javascript Object Notation

// [1] : JSON이란?
// 약자 --> Javascript Object Notation --> 자바스크립트 객체 표기법
// 주로 서버와 웹페이지 사이의 어떤 데이터를 주고 받을 때 많이 사용하는 포맷 형식
// Javascript에서 객체를 만들 때 사용하는 표현식
// 프로그래밍 언어도 아니고 문법도 아니고 단지 하나의 데이터 저장 방식 --> 그러나 규칙은 있다.

// [2]: 형식 확인
[
{"name":"lee", "age:10", "nationality":"South Korea"}
{"name":"Angga", "age:20", "nationality":"Indonesia"}
{"name":"Smith", "age:30", "nationality":"USA"}
{"name":"Adre", "age:40", "nationality":"France"}
]

// JSON은 "속성:값" or "key:value" 의 쌍으로 이루어진 데이터 객체를 전달하기 위해 만들어진 포맷
// 그런데 잘 보면 --> 자바스크립트의 배열과 객체를 만드는 사용방식과 비슷 --> 즉, 자바스크립트의 배열과 객체를 데이터에 적용
// 위 데이터는 --> 4개의 아이템으로 이루어진 배열이고 --> 각 항목은 3개의 Property를 가지는 객체로 구성
// 그렇다면 자바스크립트 배열이나 객체의 형식과 동일한가? --> 비슷하나 완전 같은 것은 아니다(X) --> 예를 들면, Property나 Value를 쌍따옴표로 처리한다

// [3]: JSON 특징
// 일단 사람이 읽기에(보기에) 좋은 구조와 텍스트를 사용
// 웹상에서의 비동기 처리 기반의 브라우저/서버 통신 등에서 데이터를 주고 받을 때 많이 사용
// 예전에 많이 사용하는 XML을 대체 --> XML은 Heavy하고 매우 복잡함.
// JSON은 XML보다 훨씬 Light하고 간결함

// [4] : 기타
// 파이썬 학습자 --> 딕셔너리(dict) 타입과 유사 --> key:value
// 거의 모든 언어를 지원
// XML, JSON 모두 계층적인 구조를 가지고 있다.

// [5] : 차이점
// JSON은 XML과 달리 종료하는 end tag가 필요 없다.
// JSON이 더 간결하고 짧다
// JSON은 배열을 사용할 수 있다 --> 위에서 말한 자바스크립트의 배열과 객체를 데이터에 적용한 포맷

// XML
<people>
<person>
<firstName>길동</firstName> <lastName>홍</lastName> <age>10</age>
</person>
<person>
<firstName>순신</firstName> <lastName>이</lastName> <age>20</age>
</person>
<person>
<firstName>남순</firstName> <lastName>강</lastName> <age>30</age>
</person>
</people>

// JSON

let people = [
  {"firstName":"길동", "lastName":"홍" , "age":"10"},
  {"firstName":"순신", "lastName":"이" , "age":"20"},
  {"firstName":"남순", "lastName":"강" , "age":"30"}
];

console.log(people);

----------------------------------------------------------------------------------------------------------------------------------------------------------

// JSON 자바스크립트 문법 사용


// [1] : 데이터 정의
let people = [
  {"firstName":"길동", "lastName":"홍" , "age":"10"},
  {"firstName":"순신", "lastName":"이" , "age":"20"},
  {"firstName":"남순", "lastName":"강" , "age":"30"}
];

// [2] : 수정 -> 홍 길동 --> 강 감찬
people[0].lastName = "강";
people[0].firstName = "감찬";

console.log(people[0].lastName + " " +people[0].firstName);

----------------------------------------------------------------------------------------------------------------------------------------------------------

// JSON 사용시 가장 중요한 2개의 메서드
// JSON.parse(), JSON.stringify()

// [1]: JSON.parse(jsonText) --> JSON 형식의 텍스트 --> 자바스크립트 객체로 변환
let jsonText = {"firstName":"길동", "lastName":"홍"};

console.log(typeof jsonText.firstName); // string
alert(jsonText.firstName);
----------------------------------------------------------------------------------------------------------------------------------------------------------

*** JSON 데이터 타입 - https://homzzang.com/b/js-92
***  https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
*** https://lxxyeon.tistory.com/153

let dataObj = {"firstName":"길동", "lastName":"홍"};
console.log("변환 전 : " + typeof dataObj); // object

// [2]: JSON.stringify(dataObject) --> 자바스크립트 객체를 --> JSON 형식의 텍스트로 변환

const dataString = JSON.stringify(dataObj);
console.log("1차 변환 후 : " + typeof dataString); // string

let dataObjTrans = JSON.parse(dataString);
console.log("2차 변환 후 : " + typeof dataObjTrans); // object

----------------------------------------------------------------------------------------------------------------------------------------------------------