[Javascript] 직렬화와 역직렬화

개발진행하면서 API interceptor 부분에서 직렬화와 역직렬화가 있는 것을 보았다
직렬화, 역직렬화 이름만 들어도 뭔지 모르기 때문에 이번 기회에 정리해보고자 한다

직렬화(Serialization)

• 직렬화는 데이터를 특정 형식(주로 문자열) 으로 변환하는 과정이다
  Javscript에서 일반적인 방법은 JSON(Javscript Object Notation) 이며
  JSON은 텍스트 기반의 데이터 교환 형식으로 Javascript 객체를 문자열로 변환할 수 있다.

let obj = { name: "John", age: 30, city: "New York" };
let jsonString = JSON.stringify(obj);
console.log(jsonString); // {"name":"John","age":30,"city":"New York"}

• JSON.stringify(obj)의 경우 객체를 JSON 문자열로 변환해준다.

역직렬화(Deserialization)

• 역직렬화는 직렬화된 데이터를 원래의 형식(일반적으로 Javascript 객체) 으로 변환하는 과정이다

let jsonString = '{"name":"John","age":30,"city":"New York"}';
let obj = JSON.parse(jsonString);
console.log(obj); // { name: "John", age: 30, city: "New York" }

왜 이러한 방법들을 사용할까?

• 직렬화와 역직렬화는 서버와 클라이언트 간에 전송하고 받는 과정에서 공통된 형식을 주로 JSON 으로 하기 때문으로 생각되어진다.

• 자바스크립트 객체를 보내는 것이 아니라 저장 시에도 텍스트, 바이너리 형식으로 변환할 수 있게끔 도와주기 때문입니다. 또한, 웹 브라우저에서의 로컬, 세션 스토리지 에서 JSON 문자열로 직렬화 한 다음 저장한다.

JSON.stringify()와 JSON.parse()

• 위의 2가지 JSON 메서드들을 활용하여 깊은 복사 를 자바스크립트에서 진행하기도 한다.
  자바스크립트를 사용하면서 깊은 복사에 대한 내용은 없기에 해당 방법을 사용하거나 라이브러리를 사용한다.

let originalObj = { name: "John", age: 30, address: { city: "New York", zip: "10001" } };

// 객체를 JSON 문자열로 변환
let jsonString = JSON.stringify(originalObj);

// JSON 문자열을 다시 객체로 변환
let copiedObj = JSON.parse(jsonString);

console.log(copiedObj);
// { name: "John", age: 30, address: { city: "New York", zip: "10001" } }

• 깊은 복사를 해주며 중첩된 객체까지 모두 복사해준다

• 다만, JSON 직렬화는 undefined, Infinity, NaN, Symbol 등의 특수 데이터 형식을 저장하지 않고 직렬화 과정에서 손실된다.
  대규모의 객체의 경우 성능 문제 유발도 가능하다.