브라우저 저장소의 차이점

프론트엔드 개발자는 언제 어떤 저장소를 사용해야 하는지 판단 할 수 있어야 한다.

이를 위해서는 브라우저 저장소의 종류 및 특징을 정확하게 알고 있어야 해서 오늘은 이를 공부하고자 한다!

 

 

 

저장소 종류

저장소 종류는 아래와 같다. 

1. Local Storage
2. Session Storage
3. Cookie

간단하게 먼저 정리하자면

 

데이터 용량이 작고, 서버 전송이 필요한 경우 쿠키
더 큰 용량이 필요하거나, 서버 전송이 필요 없는 경우 로컬 스토리지 또는 세션 스토리지

 

이제 하나씩 자세하게 알아보자.

로컬 스토리지 (Local Storage)

• 저장한 데이터를 지우지 않는 이상 영구적으로 보관 가능
• 단순하면서도 효과적인 클라이언트 측 데이터 저장 방법 중 하나
• 최대 크기: 5MB
• 사용 예시: 사용자 설정과 같은 간단한 정보, 자동 로그인

 

세션 스토리지 (Session Storage)

• 로컬 스토리지와 비슷하게 동작하지만, 세션 종료 시 클라이언트에 대한 정보가 삭제
• 최대 크기: 5MB
• 사용 예시: 입력 폼 정보, 비로그인 장바구니

 

쿠키 (Cookie)

• 웹 브라우저에 저장되는 작은 데이터 조각, 클라이언트와 서버 간에 상태 정보를 유지하는 데 사용
• 웹 사이트에서 쿠키를 설정하면, 모든 웹 요청에는 쿠키 정보가 포함 => 서버 부담 증가
• 클라이언트 측에 저장되기 때문에 보안 문제 노출 가능성 높음
• 여러 상황에서 정보가 삭제될 수 있음
  • 만료 기간 경과, 브라우저 종료, 도메인 또는 경로 변경 등
• 최대 크기: 4KB
• 사용 예시: 팝업 창

JWT (Jason Web Token)

• 브라우저 저장소 X
• 서버와 클라이언트 간에 안전하게 정보를 전송하기 위한 토큰을 생성하는 데 사용되는 방법
• 헤더, 페이로드, 서명으로 구성되어 있음
  • 헤더 (Header): 토큰 유형과 해싱 알고림증 등의 정보가 포함
  • 페이로드 (Payload): 토큰에 포함될 클레임(Claim) 정보 포함 (클레임은 사용자 식별 정보, 권한, 유효 기간 등을 나타냄)
  • 서명 (Signature): 서버에서 발급한 비밀 키를 사용하여 헤더와 페이로드 내용을 해싱한 값, 토큰이 변조되지 않았음을 검증

 

서버 인증과 브라우저 저장소의 단점

1. 요청 헤더에 주요 정보를 넣는 경우 보안에 매우 취약
2. 세션 및 쿠키 방식은 서버 부하가 증가하고, 세션 하이재킹 공격에 취약
3. JWT 방식은 Payload 정보가 제한적이고, JWT 길이가 길다.