우리가 쿠키와 웹 스토리지를 알기 전, 알아야할 것이 있습니다.
바로 HTTP의 특징을 알아야 쿠키에 대해 더 쉽게 이해할 수 있어요.
HTTP는 클라이언트와 서버 간 통신하기 위한 프로토콜입니다. 그리고 HTTP는 HTML등의 웹페이지를 구성하기 위한 텍스트로 되어있는 데이터를 주고 받습니다.
여기서 두 가지 특징을 주목해서 볼 수 있습니다. 바로 Connectionless(비연결성)과 Stateless(무상태)입니다.
비 연결성이란?
클라이언트와 서버가 연결되어 있지 않아요.
왜? 이유는 “리소스“ 때문입니다. 반대로 연결이 되어있다면, 계속해서 리소스가 들어가겠죠?
그렇다면 연결되어있지 않고 어떻게 통신할까요?
클라이언트가 어떤 데이터를 요청하면, 서버는 응답하고 연결을 끊어버립니다.
이러한 특징의 단점도 발생하는데, 요청에 대해 새로운 연결을 해야하므로 “오버 헤드가“ 발생한다는 단점도 있습니다.
오버헤드(overhead)는 어떤 처리를 하기 위해 들어가는 간접적인 처리 시간 · 메모리 등을 말합니다.
무상태란?
상태를 가지고 있지 않는다는 의미입니다. 구체적으로는 서버가 클라이언트의 상태를 가지고 있지 않다는 것입니다.
그렇다면 왜요? 이 또한 “리소스“를 줄이기 위해서 입니다.
쉽게 예를 들면 레스토랑에 직원이 여러명이 있다고 가정해 봅시다!
A직원: 마실 거 뭐 드시겠어요?
나: 콜라 주세요.
B직원: 뭐 필요한 거 있으세요?
나: 아까 시킨거 2잔 더 주세요.
C직원: 뭐 필요한 거 있으세요?
나: 아까 2잔 더 시켰는데 그냥 1잔만 주세요.
이렇게 되면 레스토랑의 직원들은 어떤 직원이 어떤 주문을 받았는지 모두 찾아다녀야 할 것이고, 이것은 비용이 많이 들게 됩니다.
하지만 상태를 저장하지 않는다면 요청을 할 때, 모든 정보를 준다.
A직원: 마실 거 뭐 드시겠어요?
나: 콜라 주세요.
B직원: 뭐 필요한 거 있으세요?
나: 아까 A직원한테 콜라 시켰는데 거기에 콜라 2잔 더 주세요.
C직원: 뭐 필요한 거 있으세요?
나: 아까 A직원한테 콜라 시켰고, B직원한테 콜라 2잔 더 추가해달라 했는데, 추가해달라 한 콜라 1잔 취소해주세요.
이런 식으로 요청을 할 때 모든 정보를 담아서 요청하기 때문에 직원들은 쉽게 주문을 파악할 수 있고, 비용을 최소화 할 수 있다.
이러한 Stateless 방식은 요청을 할 때 모든 정보를 각 서버에게 전달해야 하기 때문에 요청이 복잡해지는 단점이 있다.
반면에 요청을 한번에 주기 때문에 많은 서버를 둬도 큰 부담이 안된다는 장점이 있다.
세 줄 요약!
클라이언트와 서버는 통신이 끝나면 상태를 유지 하지 않는다.
쿠키와 세션은 위의 두 가지 특징을 해결하기 위해서 사용한다.
예를 들어, 쿠키와 세션을 사용하지 않으면 쇼핑몰의 옷을 구매하려고 로그인해도, 페이지 이동할 때마다 계속 로그인해야한다. 쿠키 🍪
쿠키란?
요청과 응답만이 존재했던 HTTP 웹 세계에 이전에 서버와 클라이언트가 주고 받은 내역을 기억하고 불러올 수 있는 혁신적인 역할을 수행
쿠키 동작 원리
클라이언트가 서버에 HTTP 요청
서버가 HTTP 응답시 set-cookie를 통해 쿠키 생성하여 전달
클라이언트는 이제부터 매 HTTP Request시 HTTP Header에 쿠키담아서 전송
만료 기간 전이라면, 쿠키는 브라우저에 저장되어 있으며, 항상 요청시 사용 가능
만료 됐다면, 클라이언트가 새로 서버에 요청하여 쿠키 새로 발급
웹 스토리지 특징 📝
웹 스토리지란?
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
로컬 스토리지와 세션 스토리지가 존재
key와 value 쌍의 형태로 데이터 저장
window 객체의 프로퍼티로 존재
로컬 스토리지와 세션 스토리지 차이점
로컬 스토리지는 데이터 영구 저장이 가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 스토리지가 초기화
로컬 스토리지는 window.localStorage, 세션 스토리지는 window.sessionStorage 객체 사용
쿠키, 로컬 스토리지, 세션 스토리지 사용처
쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
다시 보지 않음 쿠키 팝업창 , 로그인 자동 완성
로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
자동 로그인
세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
일회성 로그인, 입력 폼 저장, 비로그인 장바구니!
