직렬화 & 역직렬화 ( JS )

이전 포스팅에서 Serialize(직렬화) & Deserialize(역직렬화) 에 대한 개요 느낌의 내용을 알아봤다.

이번 포스팅은 이러한 방식의 데이터 포맷방식 중, 가장 대표적인 JSON 에 대해서 알아본다.

JavaScript JSON

JSON(JavaScript Object Notation)

자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.

자바스크립트 객체 리터럴과 유사하지만 객체가 아닌 문자열일 뿐이며, 이를 이용해 다른 도메인과 데이터를 주고 받을 수 있게 된다.

JSON은 XML 등 다른 데이터 포맷에 비해 간결하며, 손쉽게 자바스크립트 객체로 변환할 수 있으므로, 웹 애플리케이션에서 Server - Client 간의 데이터 교환에 주로 JSON을 사용한다.

JSON 표기법

JSON은 자바스크립트 객체와 유사하지만 표기법이 조금 다르다.
표기법이 간결하긴 하지만 문법에 예민하므로, 정확히 사용하는 것이 중요하다.

{
	"name" : "Alice",
	"age" : 27,
    "gender" : "male",
    "location" : "Incheon",
    "marriage" : false,
    "friends" : ["Lee","Shin","Jang"]
}

• key 는 반드시 큰따옴표로 둘러싸야 한다.
• value 값은 string, number, boolean, object, null 이 올 수 있다.
• 키-값은 : (콜론) 기호를 이용해 구분, 키-값 쌍은 , (쉼표) 기호로 구분한다.

직렬화 역직렬화

자바스크립트의 객체 -> 문자열로 변환할 수 있다.

저번 포스팅에서 언급했지만

컴퓨터 메모리 상에 존재하는 객체(Object) -> 문자열(string) 로 변환하는 것
= 직렬화(Serialization)

문자열(string) -> 자바스크립트 객체(Object)로 반환하는 것
= 역직렬화(Deserialization) or 파싱(Parsing)

이러한 과정을 통해 데이터를 다양한 도메인 간에 주고 받을 수 있게 되는 것이다.

JS 객체를 JSON 문자열로 변경 (Serialization)

JSON.stringify(자바스크립트 객체) 메서드를 사용
자바스크립트 Object를 JSON 문자열 데이터로 변경할 수 있다.

var min = {
  name : 'min',
  age : 27,
  gender : 'male',
  location : 'Incheon',
  marriage : false,
  friends : ['Kim', 'Lee', 'Park']
}

var serialize_json = JSON.stringify(min);

console.log("Serialize 결과 타입 : ", typeof serialize_json);
console.log("Serialize 결과 : ", serialize_json);
 
// Serialize 결과 타입 :  string
// Serialize 결과 :   {"name":"min","age":27,"gender":"male","location":"Incheon","marriage":false,"friends":["Kim","Lee","Park"]}

JSON 문자열을 JS 객체로 변경하기 (Deserialization)

JSON.parse() 메서드를 사용
JSON 문자열 데이터를 자바스크립트 Object로 변경할 수 있다.

var deserialzie_object = JSON.parse(serialize_json);

console.log("Deserialize 결과 타입 : ", typeof deserialzie_object);
console.log("Deserialize 결과 : ", deserialzie_object);

// Deserialize 결과 타입 :  object
// Deserialize 결과 :  {
//   name: 'min',
//   age: 27,
//   gender: 'male',
//   location: 'Incheon',
//   marriage: false,
//   friends: [ 'Kim', 'Lee', 'Park' ]
// }