04 network - HTTP 상태 저장

1. 상태 / 무상태 프로토콜

1. 상태 프로토콜 / 무상태 프로토콜

• HTTP처럼 상태를 저장하지 않는 프로토콜들을 묶어서 무상태 프로토콜(stateless protocol)
• 상태를 저장하는 프로토콜을 묶어서 상태 프로토콜(stateful protocol)
• 상태(State)는 데이터의 진행 정보 및 관련 데이터(세션, 연결 정보 등)를 의미

2. 상태를 저장하지 않으면

• 서버가 상태를 어떻게 저장할지 고려할 필요가 없어 설계가 단순해짐
• 통신이 끊어져도 남겨진 상태를 처리할 필요가 없음
• 상태가 필요한 경우, 요청마다 필요한 모든 정보를 함께 전달해야 함

3. 상태를 저장하지 않는 프로토콜?

• HTTP
• DNS
• SNMP(요청-응답 단위로만 동작할 때)
• REST API (HTTP 위에서 동작하는 설계 원칙상 stateless)

4. 상태를 유지하는 방법

• 클라이언트 측: 쿠키, 로컬 스토리지, JWT
• 서버 측: 세션 스토어(메모리, DB 등) + 세션 ID 전달

2. 쿠키

1. 쿠키

• 저장 위치: 브라우저 로컬 저장소(텍스트 파일 형식으로 관리)
• 자동 전송: 같은 도메인/경로/보안 규칙이 맞으면 HTTP 요청 헤더에 Cookie 필드로 자동 포함
• 크기 제한: 일반적으로 한 개당 4KB 이하, 도메인당 수십 개 제한
• 유효 기간: Expires 또는 Max-Age 속성으로 설정 가능
• 보안 속성:
  • Secure → HTTPS에서만 전송
  • HttpOnly → 자바스크립트에서 접근 불가(보안 강화)
  • SameSite → 크로스 사이트 요청 제한

2. 세션 쿠키/영구 쿠키

구분	세션 쿠키 (Session Cookie)	영구 쿠키 (Persistent Cookie)
저장 위치	브라우저 메모리	브라우저의 로컬 저장소(파일)
유효 기간	브라우저를 닫으면 삭제	Expires 또는 Max-Age 속성으로 지정한 기간 동안 유지
설정 방식	Expires / Max-Age 속성을 지정하지 않음	Expires 또는 Max-Age 속성을 지정
사용 목적	로그인 세션, 일시적인 사용자 상태 저장	자동 로그인, 장기 환경설정(언어, 테마)
보안성	브라우저 종료 시 삭제되므로 비교적 안전	장기간 남아있어 탈취 위험이 있음
예시	오늘 본 상품 목록	로그인 유지 체크박스(자동 로그인)

3. 퍼스트 파티 쿠키 / 서드 파티 쿠키

구분	퍼스트파티 쿠키	서드파티 쿠키
설정 도메인	방문 중인 도메인	방문 중인 도메인과 다른 도메인
주 용도	로그인, 장바구니, 사용자 설정	행동 추적, 맞춤 광고
허용 여부	대부분 브라우저에서 기본 허용	최신 브라우저에서 기본 차단 추세
예시	example.com 방문 중, example.com이 설정	news.com 방문 중, ads.com이 설정

4. 쿠키의 한계

구분	한계 내용	영향
용량·개수 제한	한 쿠키 최대 약 4KB, 도메인당 약 20~50개 저장 가능	대용량 데이터 저장 불가
자동 전송 오버헤드	같은 도메인 요청마다 HTTP 헤더에 쿠키 포함	트래픽 증가, 응답 지연 가능
보안 취약성	평문 전송 시 도청, XSS로 인한 탈취, 영구 쿠키 장기 악용 가능	개인정보·세션 정보 유출 위험
클라이언트 저장소 의존	사용자가 쿠키 삭제/비활성화 가능	상태 유지 불안정
도메인/경로 제한	설정된 도메인·경로에서만 전송, 다른 도메인과 공유 불가	범용성 제한
데이터 위변조 가능성	클라이언트 측 저장으로 값 변조 가능	무결성 훼손, 인증 우회 가능

3. 웹스토리지 / IndexedDB

1. 웹스토리지

• 서버 통신과 별개로 클라이언트에서 상태를 효과적으로 관리하는 독립 저장 공
• 웹스토리지(Web Storage)는 HTML5부터 공식적으로 도입된 기술
• 브라우저 내 저장: 사용자의 컴퓨터(브라우저)에 데이터 저장
• 용량: 일반적으로 쿠키(약 4KB)보다 훨씬 큰 용량(수 MB 이상) 지원
• HTTP 요청에 자동 전송 안 됨: 쿠키와 달리 서버에 매 요청 시 자동으로 포함되지 않음 → 네트워크 부담 감소
• JavaScript API로 직접 조작 가능 → 개발자 사용 편리

2. 웹스토리지 종류

구분	로컬 스토리지 (LocalStorage)	세션 스토리지 (SessionStorage)
저장 용량	약 5MB 이상	약 5MB 이상
데이터 유지 기간	영구 (브라우저 종료 후에도 유지)	세션 종료 시 삭제 (탭 또는 창 닫으면 삭제)
저장 범위	도메인 단위	도메인 + 탭(윈도우) 단위
데이터 공유	같은 도메인 내 모든 탭/창에서 공유	같은 도메인이라도 탭/창마다 독립적
사용 예시	사용자 환경설정, 캐시, 장기 저장	임시 상태 저장, 폼 데이터 임시 저장
접근 방법	JavaScript API (localStorage)	JavaScript API (sessionStorage)

3. IndexedDB

• HTML5 이후 도입된 브라우저 내장 비관계형(NoSQL) 데이터베이스
• 대용량 데이터 저장 가능 (수백 MB ~ 기가바이트 단위 가능)
• 키-값(key-value) 기반 스토리지로 구조화된 데이터를 저장
• 트랜잭션(transaction) 지원 → 데이터 무결성 보장
• 비동기 API 기반 → 브라우저 UI 멈춤 없이 동작
• 인덱스 생성 가능 → 빠른 검색 지원
• 복잡한 쿼리 및 대용량 오프라인 저장에 적합

3. 세션

1. 세션(Session)의 개념과 특징

• 서버 메모리나 저장소(DB)에 사용자별 상태 데이터를 저장하는 기술
• 클라이언트는 서버가 발급한 세션 ID(보통 쿠키에 저장)를 매 요청마다 서버에 전달
• 서버는 이 세션 ID를 키로 사용해 연결된 상태 데이터를 조회하고 관리
• HTTP가 무상태 프로토콜이지만, 세션을 통해 상태 유지(stateful) 구현 가능

2. 세션 저장방식

저장 위치	설명	장점	단점
서버 메모리	가장 기본적, 빠른 접근 가능	속도 빠름	서버 부하, 확장성 낮음
파일 시스템	세션 데이터를 파일로 저장	구현 간단	파일 I/O 부하, 속도 느림
데이터베이스(DB)	세션 데이터를 RDBMS나 NoSQL에 저장	데이터 안정성, 확장성 우수	DB 부하 증가, 복잡성 상승
분산 캐시 (Redis, Memcached)	여러 서버간 세션 공유 가능	고성능, 확장성 좋음	별도 캐시 서버 필요

3. 세션사용 방식

• 클라이언트 최초 요청 → 서버 세션 생성 → 세션 ID 발급
• 클라이언트 쿠키에 세션 ID 저장
• 이후 요청 시 쿠키에 담긴 세션 ID 서버 전송
• 서버는 세션 ID로 상태 조회 및 관리