[Javascript] 직렬화(Serialize), 역직렬화(Deserialize)

직렬화(Serialize), 역직렬화(Deserialize)

1. Javscript JSON 이란

JSON(Javscript Object Notation)은

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

 

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

 

JSON은 XML 등 다른 데이터 포맷에 비해 간결하며, 손쉽게 자바스크립트 객체로 변환할 수 있어,

웹 어플리케이션에서 Server-Client간의 데이터 교환에 주로 JSON을 사용한다. 

 

2. JSON 표기법

JSON은 자바스크립트 객체와 유사하지만 표기법이 조금 다르다.

{
    "name" : "Choi",
    "age" : "secret",
    "gender" : "female",
    "location" : "Seoul",
    "friends" : ["Ryu","Yang","Jung"]
}

 

- key는 반드시 큰따옴표로 묶어야 한다. 

- value 값은 number, string, boolean, object, null 이 올 수 있다.

- key-value는 :(콜론) 기호를 이용해 구분하고, key-value 쌍은 ,(쉼표) 기호로 구분한다. 

 

Javascript Object와 JSON의 차이점

 

3. 직렬화, 역직렬화

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

 

(*직렬화 : 객체나 데이터 구조를 네트워크나 저장소(ex. 배열 버퍼 또는 파일 형식)를 통한 전송에 적합한 형식으로 변환하는 프로세스)

 

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

 

(*역직렬화 :저수준의 형식(예, 네트워크를 통해 전송되었거나 데이터 저장소에 저장된 형식)을 읽을 수 있는 객체나 기타 데이터 구조로 변환하는 프로세스)

 

4.  JS Object를 JSON 문자열로 변경 (Serialization)

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

const object = {
  name: "Choi",
  age: "secret",
  gender: "female",
  location: "Seoul",
  friends: ["Ryu", "Yang", "Jung"],
};

const toJSON = JSON.stringify(object);

console.log("Serialize result: ", toJSON);

// Serialize result:  
{
    "name" : "Choi",
    "age" : "secret",
    "gender" : "female",
    "location" : "Seoul",
    "friends" : ["Ryu","Yang","Jung"]
}

 

5.  JSON 문자열을 JS Object로 변경 (Deserialization)

JSON.parse() 메서드를 사용하여 JSON 문자열 데이터를 자바스크립트 Object로 변경가능하다. 

const toObject = JSON.parse(toJSON);

console.log("Deserialize result: ", toJSON);

// Deserialize result:  
{
  name: "Choi",
  age: "secret",
  gender: "female",
  location: "Seoul",
  friends: ["Ryu", "Yang", "Jung"],
};