JSON

JSON(JavaScript Object Notation)은 데이터의 교환을 위해 만들어진 객체 형태의 포맷이다.

JSON의 탄생 배경

네트워크를 통해 어떤 객체 내용을 다른 프로그램으로 전송한다고 가정할때, 이 객체 내용을 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메세지라고 한다면 다음 객체를 어떻게 전송할 수 있을까?

const message = {
  sender : "김코딩",
  receiver: "박해커",
  message: "해커야 오늘 저녁 같이 먹을래?"
  createdAt: "2023-04-12 10:10:10"
}

메세지 객체가 전송할 수 있게 하려면 메시지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나 문자열처럼 범용적으로 읽을 수 있는 형태여야 한다.

메시지를 전송할 수 있는 조건

• 전송할 수 있는 조건(transferable condition)
  • 수신자(receiver)와 발신자(sender)가 같은 프로그램을 사용한다.
  • 또는 문자열처럼 범용적으로 읽을 수 있어야 한다.
    객체는 타입 변환을 이용해 string으로 변환할 경우 객체 내용을 포함하지 않는다.
    JavaScript에서는 객체를 문자열로 변환하기 위해 메서드(message.toString())나 형태 변환(String(message))을 시도하면 [Object Object]라는 결과를 리턴한다.

해당 문제를 해결하는 방법

이 문제를 해결하는 방법은 객체를 JSON형태로 변환하거나 JSON을 객체의 형태로 변환하는 방법이다.

• 이를 위한 메서드
  • JSON.stringify : 객체를 JSON으로 변환한다.
  • JSON.parse : JSON을 객체로 변환한다.
  • 자세한 사항은 JSON 공식문서를 참고하자.

* JSON 공식 문서 *
JSON은 가벼운 데이터 교환 형식이다.
JSON은 두가지 구조를 기반으로 한다.

1. 이름/값을 쌍으로 하는 모음이다.
	다양한 언어에서 이것은 객체, 키 리스트, 연관 배열로 실현된다.
2. 정렬값 리스트이다. 대부분언어에서는 이를 배열, 리스트, 또는 시퀀스로 실현된다.
이들은 범용성 데이터 구조이다.

JSON은 다음 형식을 취한다.
1. 객체는 이름/값으로 이루어진 쌍의 정렬되지 않은 집합이고,
객체는({})로 감싼다.
각 이름 뒤에는 세미콜론(;)이 오고 이름/값의 쌍은 쉼표(,)로 구분한다.
2. 배열은 정렬된 값 모음이다. 배열은([])로 감싼다.
값은 쉼표(,)로 구분한다.
값은 큰 따옴료("")로 묶인 문자열, 숫자, true/false, null, 객체, 배열일 수 있다.
이러한 구조는 중첩될 수 있다.
3. 문자열은 백슬래시(\)를 사용해서 큰 따옴표("")로 묶인 0개 이상의 유니코드 문자 시퀀스다.
문자는 단일 문자열로 표시된다.
...이하생략

JSON.stringify()

앞에서 살펴본 메시지 코드를 stringify를 통해 객체를 JSON으로 변환해보자.

let transferableMessage = JSON.stringify(message)
console.log(transferableMessage); // `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2023-04-12 1-:10:10"}`
console.log(typeof(transferableMessage))// 'string'

이렇게 JSON.stringify하는 이 과정을 직렬화(serialize)한다고 한다.

위 코드에서 알 수 있듯이 JSON으로 변환된 객체의 타입은 문자열이다.
발신자는 객체를 직렬화한 문자열을 누군가에게 객체의 내용으로 보낼 수 있다.

그렇다면 수신자는 이 문자열 메시지를 어떻게 다시 객체의 형태로 만들 수 있을까?

JSON.parse()

JSON.stringify와 정반대의 작업을 수행하는 메서드JSON.parse를 사용할 수 있다.

let pocket = `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2023-04-12 1-:10:10"}`
let obj = JSON.parse(pocket)
console.log(obj)
/* {
	  sender: "김코딩",
      receiver: "박해커",
      message: "해커야 오늘 저녁 같이 먹을래?",
      createdAt: "2023-04-12 10:10:10"
	} */
console.log(type(obj)) // 'object'

이렇게 JSON.parse를 적용하는 이 과정을 역직렬화(deserialize)한다고 한다.

종합해보면

• JSON.stringify 메서드 : Input => serialized
• JSON.parse 메서드 : serialized => deserialized
  즉, Input => serialized => deserialized

이처럼 JSON은 서로 다른 프로그램 사이에서 데이터를 교환하기 위한 포맷이다. 그리고 JSON포맷은 JavaScript를 포함한 많은 언어에서 범용적으로 사용하는 유명한 포맷이다.

JSON의 기본 규칙

JSON은 얼핏 보기에는 자바스크립트의 객체와 별반 다를바 없어 보이지만, 자바스크립트의 객체와는 미묘하게 다른 규칙이 있다.

	자바스크립트 객체	JSON
키	키는 따옴표 없이 쓸 수 있다. {key : "property"}	반드시 쌍따옴표를 붙여야 함 '{"key":"property"}'
문자열 값	작음 따옴표도 사용 가능 {"key" : 'property'}	반드시 쌍따옴표로 감싸야 함 '{"key":"property"}'
키와 값 사이 공백	사용 가능 {"key" : 'property'}	사용 불가능 '{"key":"property"}'
키-값 쌍 사이 공백	사용 가능 {"key":'property', num:1}	사용 불가능 '{"key":"property","num":1}'

근데 표 안에 글자 가운데 정렬 어케 하는거임...

정리

• JSON.stringify : 객체 => 문자열
  이것을 직렬화(serialize)라고 한다.
• JSON.parse : 문자열 => 객체
  이것을 역직렬화(deserialize)라고 한다.
• JSON의 기본규칙
  • 반드시 쌍따옴표 붙이고 감싸기
  • 키와 값 사이의 공백 X
  • 키-값 쌍 사이의 공백 X

안되는게 상당히 많은 친구다...헷갈리지 말자!