세션 필터

• 문제점: Searchbar에서 연도, 월, 검색어 등을 설정한 후 페이지를 이동하거나 새로고침하면 검색 조건이 초기화되어 불편함.
• 요구 사항: 사용자가 직접 검색 조건을 ‘해제’하기 전까지는 페이지를 이동하더라도 검색 조건이 그대로 유지되어야 함.
• 해결 방법
  • ClaudeCode를 통해 세션 스토리지(Session Storage)를 활용한 상태 유지 로직 구현.
  • 처음에는 Searchbar에만 적용했으나, 이후 다른 List 페이지에서도 동일한 기능을 사용하게 되면서 관련 개념과 용어를 명확히 정리할 필요성을 느낌.

---

세션 스토리지 (Session Storage)

• 특징: 브라우저 탭을 닫거나 브라우저를 완전히 끄기 전까지 데이터가 안전하게 유지됨. 페이지를 새로고침하거나 이동해도 데이터가 날아가지 않아 UI 상태 유지에 적합함.

• 확인 방법: 브라우저 개발자 도구(F12) → Application → Session Storage에서 현재 저장된 데이터 확인 가능.

---

쿠키와 세션 스토리지 차이

구분	쿠키 (Cookie)	세션 스토리지 (Session Storage)
주 목적	서버와 통신 (로그인 유지 등)	브라우저 내부 상태 유지 (UI 필터 등)
용량	매우 작음 (약 4KB)	비교적 큼 (약 5MB 이상)
데이터 전송	매번 서버로 자동 전송됨	서버로 절대 안 보냄 (브라우저에만 존재)
만료	설정한 기간 동안 유지 (브라우저 꺼도 유지 가능)	탭을 닫으면 즉시 삭제

---

Series: Today I Learn