[TIL] 웹 데이터의 변신과 여행: 직렬화부터 JWT 저장까지

1. 데이터의 변신: 직렬화 (Serialization)

"객체는 인터넷 선을 탈 수 없다. 그래서 납작하게 포장해야 한다."

• 개념: 메모리에 있는 **객체(Object)**를 전송 가능한 형태인 **문자열(String/JSON)**로 바꾸는 과정.
• 비유 (이케아 의자):
  • 객체: 조립된 의자. 편하지만(기능 O) 부피가 커서 배송 불가.
  • 직렬화: 의자를 분해해서 납작한 상자에 넣는 행위.
  • JSON: 포장이 완료된 상자(직렬화된 상태). 기능은 없지만(앉을 수 없음) 전송하기 딱 좋음.
  • 역직렬화: 상자를 받아서 다시 의자로 조립하는 것.
• Spring DispatcherServlet의 역할:
  • 개발자가 일일이 변환 코드를 짜지 않아도, 요청이 들어오면 JSON을 객체로(역직렬화), 응답이 나갈 땐 객체를 JSON으로(직렬화) 자동 변환해준다.

2. 인증 수단: JWT (JSON Web Token)

"서버가 기억하지 않아도 되는 위조 불가능한 신분증"

• 구조: Header . Payload . Signature
• 특징:
  • Payload(내용물): {"user_id": "user01", ...} 같은 JSON 데이터가 들어있음.
  • Signature(서명): 내용물이 위조되지 않았는지 서버만 아는 비밀키로 잠가둔 도장.
• 흐름: 로그인 성공 시 서버가 발급해 주면, 클라이언트는 이걸 잘 가지고 있다가 요청할 때마다 보여줘야 함.

3. 저장과 전송: Cookie vs LocalStorage

"토큰(신분증)을 어떻게 들고 다닐 것인가?"

(1) 핵심 차이: 운반 방식

구분	Cookie (쿠키)	LocalStorage (로컬 스토리지)
운반 방식	자동 배송 (Auto)	수동/직접 배송 (Manual)
작동 원리	브라우저가 도메인을 확인하고, 맞으면 알아서 헤더에 실어 보냄.	개발자가 코드(fetch, axios)로 헤더에 직접 토큰을 넣어야 함.
비유	정기 구독 배송 (알아서 옴)	내가 직접 가방에 챙겨서 보여줌

(2) 왜 앱(App)이나 최신 웹은 로컬 스토리지를(헤더 방식을) 쓸까?

• 앱(App) 환경: 브라우저처럼 '쿠키 자동 전송 시스템'이 내장되어 있지 않음.
• 개발 편의성: 쿠키는 도메인이 다르면(CORS) 설정이 매우 복잡함. 로컬 스토리지는 그냥 꺼내서 헤더에 붙이면 끝이라 직관적임.
• 데이터 활용: 로컬 스토리지는 자바스크립트로 내용을 읽을 수 있어서, 화면에 "OOO님 환영합니다" 띄우기가 편함. (쿠키 중 HttpOnly는 읽기 불가)

4. 쿠키의 마법: 자동 전송 원리

• 원칙: 웹은 원래 건망증이 심함(Stateless). 그래서 브라우저가 규칙을 만듦.
• 과정:
  1. 서버가 Set-Cookie 명령을 응답 헤더에 담음.
  2. 브라우저는 이걸 보고 자기만의 '쿠키 저장소'에 저장함.
  3. 이후 사용자가 해당 사이트에 요청을 보낼 때마다, 브라우저가 몰래 저장소를 뒤져서 쿠키를 헤더에 끼워 넣음.

---

💡 오늘의 깨달음 (Key Takeaway)

1. JSON 데이터({...}) 그 자체가 바로 '직렬화된 상태'다. (객체가 납작하게 변한 텍스트)
2. 쿠키는 브라우저가 알아서 실어 보내주지만, 로컬 스토리지는 내가 직접 헤더에 실어야 한다.
3. 앱이나 현대적인 프론트엔드 개발에서는 명시적인 제어가 가능한 로컬 스토리지(헤더 전송) 방식을 많이 사용한다.