본문 바로가기
Frontend

쿠키, 웹 저장소, 캐시

by hyeok1235 2024. 3. 2.

HTTP 통신의 특징은 무상태성(Statelessness)을 가진다는 것입니다. 클라이언트의 상태를 유지하지 않기 때문에 필요한 정보를 매번 통신을 통해서 가져와야 한다는 것입니다. 불필요한 통신이 늘어나는 문제점을 해결하기 위해서 여러 형태의 저장소가 개발되었습니다. 

 

1. 쿠키 (Cookie)

쿠키는 유저의 웹 브라우저에 저장되는 가벼운 데이터입니다. 쿠키는 4KB까지의 데이터를 저장할 수 있으며 통신이 이루어질 때마다 서버로 전송됩니다. 쿠키를 통해 사용자를 식별할 수 있으며, 사용자의 상태와 정보를 저장할 수 있게 되었습니다. 

쿠키의 종류:

  • 세션 쿠키 (Session Cookie) : 임시 쿠키로 창이 닫히면 지워집니다. 서버 쪽에 저장되며 유효기간을 별도로 저장할 수도 있습니다.
  • 지속 쿠키 (Persistent Cookie) : 창이 닫혀도 계속해서 유지됩니다. 인증 정보, 환경 설정 등을 저장하는데 사용되어, 세션과 상관없이 사용자의 정보를 유지합니다. 별도로 지정된 유효기간이 지나거나, 사용자가 수동으로 삭제하지 않으면 계속해서 유지됩니다. 
  • 보안 쿠키 (Secure Cookie) : 암호화된 HTTPS 통신으로 전달되는 쿠키입니다. 추가적으로 암호화되기 때문에 보안성이 강화되어 민감한 정보(인증 토큰, 세션 ID 등)를 저장하는데 사용할 수 있습니다.
  • 제3자 쿠키 (3rd Party Cookie) : 유저가 방문하고 있는 도메인의 서버가 아닌 제 3자의 도메인이 설정한 쿠키입니다. 주로 웹 추적과 광고를 위해서 사용됩니다. 

 

2. 웹 저장소 (Web Storage)

HTML5부터 나온 웹 저장소는 저장할 수 있는 데이터의 크기가 작은 쿠키의 대체제로 사용될 수 있습니다. 쿠키를 사용하면 서버에 저장되어 있는 정보에 접근할 수 있다면, 웹 저장소는 클라이언트 쪽에 데이터를 저장합니다. 크게 로컬 저장소와 세션 저장소로 구분됩니다.

 

2-1. 로컬 저장소 (Local Storage)

로컬 저장소는 유저나 프로그램이 데이터를 지우지 않으면, 브라우저가 닫혀도 데이터를 계속 보관합니다. 또한, 도메인만 같다면 여러 개의 세션에서도 로그인 정보와 같은 데이터를 공유할 수 있습니다. 지속적으로 필요한 데이터를 저장하기 위해서는 로컬 저장소를 사용합니다. 

 

2-2. 세션 저장소 (Session Storage)

세션 저장소는 로컬 저장소와 달리 브라우저가 닫히면 데이터도 지워집니다. 세션 저장소를 사용하면 새로운 세션이나 브라우저마다 데이터 공유가 안되어 새롭게 데이터를 저장할 수 있습니다. 일회성으로 필요한 로그인, 세션에서의 페이지 탐색 기록과 같은 경우에 세션 저장소를 사용할 수 있습니다.

 

3. 캐시 (Cache)

캐시는 HTTP 응답에서 HTML, CSS, JS 파일이나 이미지나 기타 미디어 파일을 임시로 저장하는 역할을 합니다. 웹 브라우저가 데이터를 서버에서 가져왔을 때, 이 데이터들의 복사본을 저장해둡니다. 이러한 기능은 서버에서 계속해서 같은 내용을 다운로드하지 않아도 되게 하여 로딩 시간이나 서버의 부담을 줄일 수 있습니다. 

캐시는 클라이언트와 서버 양 쪽에서 사용할 수 있는데, 서버에서 캐시를 사용하는 경우 캐시를 관리하기가 더 용이해서 보안 측면에서 더 유리한 경향이 있습니다.

728x90
반응형

'Frontend' 카테고리의 다른 글

QueryFailedError: Unknown column '_______' in 'where clause'  (0) 2024.07.12