JSON

JSON은 JavaScript Object Notation의 줄임말로 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 예를 들어 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에게 전송한다고 가정해보면, 이 객체 내용을 일종의 메신저 또는 채팅앱에서 쓰는 하나의 메시지라고 한다면, 객체를 어떻게 전송할 수 있을까?

const message = {
	sender: "김병훈",
  	receiver: "홍길동",
  	message: "길동아 오늘 영화볼래?",
  	createdAt: "2021-07-20 12:12:10"
}

전송가능한 조건

• 발신자, 수신자가 같은 프로그램을 사용한다.
• 또는, 문자열처럼 범용적으로 읽을 수 있어야한다.

객체는 타입 변환을 이용해 String으로 변환할 경우, 객체 내용을 포함하지 않는다. JavaScript에서 객체에 메소드나, 형변환을 시도하면, [object Object] 라는 결과를 리턴한다.

문제를 해결하는 방법

객체를 JSON 형태로 변환시키거나 || JSON을 객체의 형태로 변환하는 방법인데, 이를 위한 메소드는 다음과 같다.

• JSON.stringify : Object type을 JSON으로 변환시킨다.
• JSON.parse : JSON을 Object type으로 변환시킨다.

let transferableMessage = JSON.stringify(message)
console.log(transferableMessage) // `{sender:"김병훈","receiver":"홍길동"..."createdAt":"2021-07-20 12:12:10"}`
console.log(typeof(transferableMessage)) // `string`
=> message 객체를 JSON으로 변환시키는 JSON.stringify 메소드.

이렇게 JSON으로 변환된 객체의 타입은 string이다. 발신자는 객체를 직렬화한 문자열을 누군가에게 객체의 내용을 보낼 수 있다. 그렇다면 수신자는 이 문자열 메시지를 어떻게 다시 객체의 형태로 만들 수 있을까?
JSON.stringify 와 반대의 작업을 수행하는 JSON.parse 메소드를 사용하면 된다!

let packet = `{sender:"김병훈","receiver":"홍길동"..."createdAt":"2021-07-20 12:12:10"}`

let obj = JSON.parse(packet)

console.log(obj) // 객체 형태로 변함.
console.log(typeof(obj)) // `object`
=> 직렬화된 JSON에 JSON.parse 를 적용하면 다시 객체의 형태로 변환할 수 있다.

역직렬화 (deserialize)

JSON.parse 를 적용하는 과정을 말한다.

직렬화 (serialize)

JSON.stringify 하는 과정을 말한다.

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

JSON의 기본규칙

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

• JavaScript Object
  • 키: 키는 따옴표없이 쓸 수 있다.
  • 문자열 값: 문자열 값은 어떠한 형태의 따옴표도 사용 가능하다.

• JSON
  • 키: 반드시 큰 따옴표를 붙여야한다.
  • 문자열 값: 반드시 큰 따옴표로 감싸야한다.

• 또한 JSON은 키와 값 사이, 그리고 키-값 쌍 사이에는 공백이 있어서는 안된다.

Sprint - StringifyJSON

재귀를 이용해 JSON.stringify 메소드를 함수의 형태로 직접 구현한다.

JSON.stringify 는 객체를 JSON으로 변환하는 메소드인걸 공부했다. 이 메소드를 함수의 형태로 직접 구현하기 위해서, 재귀를 사용해야한다.
JS의 객체와 JSON은 대표적인 트리구조를 가지고 있으므로, 전형적인 재귀 탐색이 가능한 구조 (객체의 값으로 객체를 포함하는 구조) 이기 때문에, 재귀 사용을 적극 활용해야한다.

어떻게 풀지 모르겠다면?

• 코플릿의 재귀문제를 풀었던 방법을 다시 상기해야한다.

• 부모와 자식의 구조가 같은 트리구조를 어떤 조건에서 재귀호출하면 좋을지 고민해야한다.

Sprint - Tree UI

기업용 앱에서 자주 볼 수 있는 트리구조 UI를 직접 구현해보자.