안녕하세요, 웹 프론트엔드 개발자 가든입니다.

웹을 구현하면서 가끔씩 로그인을 다시 해야하거나, 내 정보를 여전히 기억하고 있을 때가 있는데 이는 웹 브라우저의 쿠키, 웹 스토리지, 세션 덕분에 원하는 대로 사용자의 정보를 기억하거나 만료되게 할 수 있습니다.

🍪 쿠키란?

쿠키는 웹사이트가 우리의 브라우저에 저장하는 작은 데이터 조각들입니다. 이 데이터 조각들은 여러분이 사이트를 재방문할 때 사이트가 '아, 이 사람이군요!' 하고 인식할 수 있게 해줍니다. 쿠키는 웹 개발의 핵심 요소 중 하나로, 사용자의 웹 브라우징 경험을 맞춤화하고 향상시키는 데 중요한 역할을 합니다

이 기술은 사용자 경험을 매끄럽게 하기 위해 설계되었지만, 개인 정보 보호와 관련하여 논란의 여지가 있습니다. 쿠키는 사용자의 웹 브라우징 습관을 추적하고, 광고주들이 맞춤형 광고를 제공할 수 있게 하는 정보를 수집할 수 있기 때문입니다.

쿠키의 작동 원리

쿠키는 웹 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 이 데이터를 저장하고, 사용자가 해당 서버에 다시 요청을 보낼 때마다 이 데이터를 서버에 반환합니다. 이 과정을 통해 웹 서버는 사용자를 식별하고, 이전 상호작용을 기반으로 한 맞춤형 경험을 제공할 수 있습니다.

쿠키의 다양한 사용 사례

세션 관리

로그인, 쇼핑 카트, 게임 점수 또는 서버가 사용자의 상태를 기억해야 하는 다른 어떤 것을 관리합니다.

개인화

사용자 선호도, 테마, 언어 설정 등 사용자 인터페이스 맞춤 설정을 저장합니다.

추적

사용자의 행동과 브라우징 활동을 추적하여 행동 타겟팅 광고에 사용됩니다.

쿠키의 유형

세션 쿠키

이들은 사용자가 브라우저를 닫을 때 사라지며, 주로 세션 관리에 사용됩니다.

영구 쿠키

이들은 만료 날짜가 지정되어 있어 사용자가 브라우저를 닫은 후에도 유지됩니다. 이는 사용자 선호도와 같은 정보를 기억하는 데 사용됩니다.

서드파티 쿠키

이 쿠키는 현재 방문 중인 사이트가 아닌 다른 도메인에서 생성됩니다. 이는 주로 온라인 광고에 사용됩니다.

쿠키 삭제의 의미

쿠키를 삭제하면 해당 쿠키에 저장된 모든 정보가 제거되며, 웹사이트는 이전에 수집한 어떠한 사용자 정보도 "기억"할 수 없게 됩니다. 쿠키 삭제는 사용자의 프라이버시 보호와 데이터 보안 측면에서 중요하게 다뤄 질 수 있습니다.

🔐 세션이란?

세션은 웹 애플리케이션에서 사용자의 상태와 데이터를 서버 측에서 유지 관리하는 방법입니다. 사용자가 웹사이트와 상호작용할 때, 세션 메커니즘은 이러한 상호작용을 일관되고 보안된 방식으로 추적합니다. 이 섹션에서는 세션의 작동 원리, 주요 특징, 그리고 쿠키와의 비교를 통해 세션의 중요성과 복잡성을 탐구해 보겠습니다.

세션의 작동 원리

세션 시작

사용자가 웹사이트에 로그인하면 서버는 세션을 시작합니다. 이 과정에서 서버는 고유한 세션 ID를 생성하고, 이를 사용자의 브라우저에 쿠키 형태로 저장합니다. 이 쿠키는 "세션 쿠키"라고 하며, 일반적으로 브라우저를 닫을 때까지만 유지됩니다.

서버 측 저장소

세션 ID는 사용자와 관련된 모든 데이터를 서버에 저장하는 키로 사용됩니다. 예를 들어, 사용자의 로그인 상태, 프로필 설정, 장바구니 내용 등이 이에 해당할 수 있습니다. 이 데이터는 서버의 메모리나 데이터베이스에 저장될 수 있으며, 사용자가 사이트를 탐색할 때마다 해당 세션 ID를 사용하여 데이터에 접근합니다.

상태 유지

사용자가 사이트 내에서 다른 페이지로 이동하거나, 데이터를 요청할 때마다 브라우저는 세션 쿠키를 서버에 전송합니다. 서버는 이 세션 ID를 통해 해당 사용자의 세션 데이터에 접근하고, 사용자의 요청에 따라 적절한 응답을 제공합니다.

세션 종료

사용자가 로그아웃하거나, 세션 타임아웃이 발생하면 서버는 세션 데이터를 삭제하고 세션 ID를 무효화합니다. 또한, 사용자의 브라우저에서도 세션 쿠키가 제거됩니다.

웹 스토리지 란?

웹 스토리지는 HTML5 웹 표준의 일부로, 웹 애플리케이션의 데이터를 사용자의 브라우저에 저장할 수 있는 메커니즘을 제공하고 있습니다. 이는 개발자들이 쿠키의 제한적인 용량과 모든 서버 요청에 포함되는 부담을 피하면서 클라이언트 측에서 더 많은 양의 데이터를 안전하게 저장할 수 있게 해 줍니다. 웹 스토리지는 로컬 스토리지와 세션 스토리지로 나눠볼 수 있습니다!

로컬 스토리지

로컬 스토리지는 웹 애플리케이션 데이터를 브라우저에 영구적으로 저장합니다. 이는 사용자가 브라우저나 시스템을 재시작해도 지워지지 않으며, 사용자가 직접 삭제하지 않는 이상 데이터가 유지됩니다.

영구성

데이터는 영구적으로 저장되며, 만료 날짜가 없습니다.

접근성

동일한 출처(도메인)의 모든 페이지에서 접근 가능합니다.

Used by.

로그인 상태 유지, 사용자 인터페이스 설정(예: 테마), 언어 선호도, 대규모 데이터 저장 등에 적합합니다.

세션 스토리지

세션 스토리지는 일시적인 데이터 저장을 위해 설계되었습니다. 사용자가 브라우저 탭을 닫으면 저장된 모든 데이터가 사라집니다. 세션 스토리지는 주로 현재 세션 동안 필요한 정보를 저장하는 데 사용됩니다.

세션별 분리

각 브라우저 탭은 독립된 저장 공간을 가지므로, 같은 페이지를 여러 탭에서 열어도 세션 스토리지가 서로 영향을 주지 않습니다.

접근성

데이터는 오직 생성된 탭 또는 윈도우에서만 접근 가능합니다.

Used by.

양식 데이터 임시 저장, 한 세션 동안 유지되어야 하는 사용자의 활동 기록 등에 적합합니다.

로컬 스토리지 vs 세션 스토리지

두 스토리지 옵션은 사용 목적과 데이터 유지 기간에 따라 다릅니다. 로컬 스토리지는 더 영구적이고 장기적인 데이터 저장에 적합한 반면, 세션 스토리지는 한 세션 동안만 유지되어야 하는 일시적인 데이터에 더 적합합니다. 또한, 세션 스토리지는 탭이나 윈도우가 닫히면 자동으로 지워지므로, 보안이 중요한 일시적인 정보를 저장하는 데 더 사용이 적합할 것 같아요!