자바스크립트를 활성화 해주세요

Serialization 개념을 알아보자

 ·  ☕ 3 min read

Serialization(직렬화) 비유

프로그래밍 세계에서 쓰이는 직렬화, 역직렬화 라는 단어와 뜻 완전히 같지는 않지만, 의미가 일맥상통하는 단어가 여럿 있는 것 같다.

  • 암호화 <-> 복호화
  • 인코딩 <-> 디코딩

암호화 <-> 복호화

여기서 암호화 복호화란, 비밀번호 뭐 이런게 아니라, 어떤 중요한 메시지를 그대로 노출시키지 않고 암호화 해서 그 암호를 해독(복호화)할 수 있는 사람에게만 메시지를 노출시키겠다는 말이다.

인코딩 <-> 디코딩

동영상 인코딩 등의 의미로 쓰일때는, 해당 동영상을 압축한다는 의미로 쓰일 수 있다. 프로그래밍에서 인코딩은 보통 문자열이 맵핑되는 방식을 이야기 한다. utf-8과 같은 인코딩 방식이 존재하고, 인코딩 방식에 따라 맵핑되는 값이 달라진다. 참고로 utf-8의 0~127번 까지는 ASCII코드와 동일한 값으로 맵핑된다.

직렬화 <-> 역직렬화

직렬화를 이야기하기위해 암호화, 인코딩 등의 이야기를 했는데, 내 생각엔 이들의 의미가 일맥상통 한다고 생각하기 때문에 언급했다. 암호화, 인코딩이 특정 목적을 달성하기 위해 원래의 값을 다른 값으로 바꿔서 표현하는 것 처럼, 직렬화도 원래의 값을, 다른 값으로 바꾸는 의미를 포함한다.

직렬화 하는 이유와 방식

Why?

프론트 엔드를 리액트로 만들고, 서버사이드를 자바의 스프링으로 구현한다고 생각해보자. 자바에서 클래스 하나를 만들고 이 클래스를 그대로 리액트 쪽에서 쓰고싶다면? 당연히 안된다. 자바스크립트는 자바라는 언어를 해석하지 못한다. 자바에서는 클래스에 extends, implements등의 키워드로 상속과 인터페이스를 구현하지만, 자바스크립트는 prototype의 개념으로 접근한다. 자바스크립트는 자바의 클래스를 해석할 능력이 없다.

따라서 서로 다른 언어로 데이터를 주고받으려 할 때는 primitive한, 원시타입의 데이터를 주고받는게 기본이다. 이러한 원시타입에는 숫자(int, float), 문자(string), 불리언(boolean) 등이 있겠다. 원시 타입의 경우, 리액트에서 자바로 데이터를 줘도 자바에서 해석할 수 있고, 그 반대도 가능하다. 특히 문자같은 경우, primitive한 타입이긴 한데, 데이터를 주고받는 대상끼리 인코딩 된 방식을 맞춰야 한다. 보통 국내에서는 문자열을 전송할 때 utf-8타입으로 인코딩한다.

서로 같은 언어로 프론트와 백엔드를 구현해도, 직렬화가 필요하다. 프론트에서 네트워크를 통해 Object 데이터를 서버로 전송할 때, Object를 통째로 서버로 보낼 수 없다. 자바스크립트에서 Object는 primitive한 타입인 string으로 변환한 후 데이터를 전송하게 된다. node서버에서는 이 string을 다시 Object로 변환하면 된다.

다만, 네트워크를 통해 오브젝트를 주고받을 때, 자바스크립트에서 prototype까지 전달하진 않는 것 같다. 직렬화 한 후, 역직렬화 하면 직렬화 하기 전의 오브젝트 상태와 완전히 같아지지 않는다는 말이다. 예를들어 moment라는 라이브러리를 사용해 오브젝트를 만들고 이 데이터를 네트워크를 통해 서버로 전달 했을 때, 서버는 이 데이터를 새로 인스턴스화 해야한다.

주는쪽

1
const give_date = moment().utc(true).toISOString(),

받는쪽

1
const receive_date = moment(give_date)

How?

자바스크립트에서 직렬화 하는 방법은 간단하다. JSON.stringify()함수로 직렬화를, JSON.parse()로 역직렬화를 하면 된다. JSON.stringify는 자바스크립트의 오브젝트를 문자열로 바꿔주고 JSON.parse는 문자열을 오브젝트로 만들어 준다.


최성환
글쓴이
최성환
📚Learner🤓Nerd🌐Web Developer

목차