javaScript. (19) JSON (stringify / parse)

💡 JSON이란?

 

JavaScript Object Notation (JSON) 은 

속성-값 쌍(attribute–value pairs / array data types (or any other serializable value))

또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해

인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷.

 

 

인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있음.

자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합함.

 

 

비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷.

 

 

** 참고 ㅡ 이전에 배웠던 내용 中

console.dir

- element를 JSON과 같은 트리구조로 출력  - 객체 로깅 ⭕

 

---

 

JSON 은 다시말해, 자바스크립트의 문법을 빌린 데이터 교환방식이다.

 

 

예시> zeroCho 님의 홈페이지에 대한 정보를 JSON으로 나타냄

{
 "title": "Zero Cho",
 "description": "Zero Cho's HomePage",
  "owner": "Zero Cho",
  "createdAt": "2016-04-05",
  "keyword": ["javascript", "nodejs", "mongodb", "react", "meteor"],
  "memberCount": 2,
  "private": false,
  "meta": {
    "googleAnalytics": true
 }
}

= 하나의 객체를 이용해 데이터를 표현함.

원래 데이터를 나타내기 위해서 XML을 사용했지만, JSON이 코드의 양이 더 적어서 많이 쓰임.

 

 

___

 

<JSON 규칙>

 

- 일반 자바스크립트처럼 문자열 / 숫자 / 불린 / 배열 / 객체 를 사용 가능.

 

- 단, 함수는 들어가면 안됨.

- 작은따옴표 (' ') 말고 큰따옴표(" ")를 사용해야함.

- key값도 반드시 " " 로 감싸줘야함

>>javaScript 객체에서는 key를 따옴표 없이 썼지만(선택사항) /  JSON에서는 다름.

 

___

 

JSON 객체

 

- 자바스크립트에서는 JSON 객체를 제공하여 JSON을 활용할 수 있게 한다.

 

-  메소드

• stringify
• parse

let example = {
   "stringifyMe" : "please",
   "andParseMe" : "thankYou"
};

const string = JSON.stringify(example);     // '{"stringifyMe":"please","andParseME":"thankYou"}'
const parsed = JSON.parse(string);      // 원상태로

 

stringify는 문자열로 바꾸지만 객체처럼 생긴거고

parse는 그 문자열을 원상태로 돌려줌

 

>> JSON 데이터를 서버를 통해 전송할 때, 객체를 이해하지 못하는 경우를 대비하여 stringify를 해줌.

그리고 서버에서 돌려받을 때 문자열을 다시 JSON 객체로 바꾸는 parse를 해줌.

 

 

❗❗

 

JSON.parse()를 할 때

인자가 undefined 이거나 JSON형태가 아닌 문자열이면 에러가 발생한다.

Uncaught SyntaxError: Unexpected token 

 

 

 

---

 

 

JSON 활용

 

JSON.stringify와

JSON.parse 를

동시에 사용하면  >>> 객체를 복사할 수 있다.

 

 

❕ 참조 (reference)가 아닌 복사 (copy)이다!

 

let obj = { test: 'yes' };
let obj2 = JSON.parse(JSON.stringify(obj));       // { test: 'yes' }

obj2.test = 'change';
obj.test;  // 'yes'  ㅡ 복사를 해서 둘은 다른 객체이므로 바뀌지 않음

 

 

 

 

 

 

추가 +++ 

---

 

🔻 데이터 조작어인 XML에 대해 

 

etc) HTML vs XML

XML은 데이터 저장 + 전송을 위한 마크업 언어로, 데이터 교환을 위한 구조정의에 그 목적을 두고 있음.

즉, 데이터를 가지고만 있고 HTML같이 표현하지는 않음.

 

---

 

https://mywebproject.tistory.com/161

 

>> 크롬 클론코딩에서도

json 객체의 stringify랑 parse를 썼었다. 참고.

물론 강의내용이라 private 걸어놨다. 

 

 

 

 

---

REFERENCE

 

(JavaScript) JSON

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!