세션과 쿠키란 무엇인가
세션이란?
세션은 사용자와 서버 간의 일시적인 연결을 유지하며, 주로 인증 상태를 관리하는데 사용됩니다. 프론트엔드에서는 세션 토큰을 이용하여 사용자를 인증하고, 서버와의 상호작용 시 세션이 유지되도록 설정합니다.
ex) JSON Web Token(JWT) 같이 토큰 기반 인증도 세션 관리의 일종으로 이해할 수 있으며, 로컬 스토리지 또는 세션 스토리지에 토큰을 저장해 인증 상태를 관리하는 방법을 익히는 것이 중요합니다.
로컬 스토리지 vs 세션 스토리지
로컬 스토리지의 주요 차이점
1. 브라우저를 닫거나, 컴퓨터를 재부팅해도 데이터가 삭제되지 않는다.
2. 사용자가 명시적으로 데이터를 삭제하거나 브라우저 캐시를 지우지 않는 한, 데이터를 계속 유지한다.
3. 장기적으로 필요한 데이터, 예를 들어 사용자 설정, 사용자 선호도 등을 저장할때 이용된다.
세션 스토리지의 차이점
1. 브라우저 탭 또는 창의 세션이 종료되면 데이터가 삭제됩니다. 해당 탭이나 창을 닫으면 데이터가 사라진다.
2. 특정 세션에서만 필요한 데이터를 저장하는데 적합합니다. 예를 들면, 잠깐 동안만 필요한 폼 데이터나 임시 상태 데이터를 저장할때 사용됩니다.
로컬 스토리지와 세션 스토리지는 대부분의 브라우저에서 5MB 정도의 데이터를 저장할 수 있는데, 로컬 스토리지와 세션 스토리지 모두 사용 가능한 공간은 브라우저나 장치에 따라 다를 수 있습니다. HTTP요청과 함께 서버로 전송되지 않으므로, 상대적으로 넉넉한 용량을 사용할 수 있습니다. (쿠키보다 넉넉한 용량)
그렇다면 로컬 스토리지와 세션 스토리지는 어디에 어떤 형태로 저장되는가?
- 로컬스토리지(Local Storage)
- 브라우저의 프로필 폴더 내에 위치한 특정 파일에 저장되는 형태, 브라우저마다 다르지만 일반적으로 Chrome에서는 Local Storage 폴더에 SQLite 데이터베이스 형식으로 저장됩니다.
개발자도구 > application > localstroage에서 확인 가능
- 각 도메인마다 별도로 저장되며, 데이터는 문자열 형식으로 저장됩니다. 즉 저장하려는 데이터가 숫자, 객체, 배열이라도 문자열로 변환하여 저장해야 합니다. 불러올 때는 JSON.parse로 다시 객체로 변환하는 것이 일반적입니다.
- 세션 스토리지(Session Storage)
- 브라우저 메모리에 임시로 저장됩니다. 로컬 스토리지와 달리 브라우저 세션 동안만 유지되기 때문에 하드디스크에 별도로 저장되지 않습니다.
- 로컬 스토리지와 마찬가지로 문자열 형식으로 데이터를 저장합니다.
// 저장
const user = { name: 'David', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
// 불러오기
const savedUser = JSON.parse(localStorage.getItem('user'));쿠키(Cookie)란?
쿠키는 사용자의 브라우저에 작은 데이터를 저장하고, 주로 세션 유지와 사용자 식별 추적에 활용됩니다. 프론트엔드에서는 쿠키에 접근해 필요한 데이터를 읽거나 쓸 수 있으며, document.cookie를 통해 다룰 수 있습니다. 쿠키 설정 시 보안 옵션을 이해하는 것이 중요합니다. 예를 들어, HttpOnly, Secure, SameSite 속성을 설정해 보안을 강화할 수 있습니다.
쿠키설정이란?
