사용하는 이유
HTTP 프로토콜의 한계를 보완하기 위해 사용한다.
HTTP의 특징
- Connectionless
클라이언트가 서버로 Request를 보내면 서버는 Response를 한 후 연결을 끊는다.
서버 입장에서는 Connectionless로 연결에 대한 관리를 줄이는 것이 이점이기 때문에 이러한 특징을 갖는다.
- Stateless
서버와 클라이언트 간의 연결이 끝나는 순간 통신이 끊기며 상태 정보는 유지하지 않는다. 즉 첫 번째 통신 후 두 번째 통신이 이루어질 때 첫 번째 통신의 정보를 알 수 없게된다.
즉 한 번 통신이 이루어지면 연결이 끊기고, 이전의 통신에서 만들어진 정보가 유지되지 않아서 Auth가 필요한 웹사이트에서 클라이언트는 서버에게 자신이 누구인지 매번 알려줘야하는 번거로움이 발생한다.
이것을 해결하기 위해 등장한 것이 쿠키, 세션과 웹 스토리지이다.
쿠키
HTTP의 일종으로 사용자가 어떤 웹사이트에 방문할 경우, 그 사이트의 서버가 클라이언트 PC에 저장하기 위해 전송하는 정보 파일이다.
HTTP는 클라이언트 PC에 저장된 쿠키를 참조하고 재사용할 수 있다.
특징
- 클라이언트 로컬에 key-value 형태로 저장된다.(이름, 값, 유효시간, 도메인, 경로)
- 한 클라이언트 로컬에는 최대 300개의 쿠키를 저장할 수 있다.
- 하나의 도메인당 20개의 쿠키를 저장할 수 있다.
- 쿠키 하나의 최대 크기는 4KB이다.
- Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있다.
- 쿠키는 사용자가 따로 요청하지 않아도 Request Header에 넣어서 자동으로 서버에 전송한다.
작동 방식
- 클라이언트가 페이지를 요청한다.(페이지를 방문한다)
- 서버는 쿠키를 만들어 HTTP 화면과 함께 클라이언트에게 응답한다.
- 클라이언트는 쿠키를 받고 로컬에 저장한다.
- 클라이언트가 페이지를 다시 요청한다. 이때 쿠키가 있다면 Request Header에 쿠키를 담아 요청한다.
- 서버는 쿠키를 보고 그에 따른 알맞은 응답을 하고, 또다른 쿠키를 만들어 전송한다.
장점과 단점
장점
- 대부분 브라우저가 지원한다.
- 서버 용량 절약에 도움이 된다.
단점
- 쿠키 자체를 그대로 보내므로 보안에 취약하다.
- 4KB밖에 저장을 못하여 용량의 한계가 있다.
- 도메인마다 쿠키가 저장이되므로 도메인이 변경되면 기존 쿠키를 사용할 수 없다.
- 쿠키의 크기가 크면 Request의 부하가 커진다.
사용예시
- 아이디, 비밀번호 저장
- 오늘은 이 페이지를 표시하지 않음 등
세션
사용자가 페이지를 방문하고 페이지에서 나가는 동작을 하나의 상태로 보고, 그 상태를 유지시키는 기술이다. 쿠키와 달리 사용자 정보를 서버에 저장한다.
특징
- 서버에 상태를 유지하기 위한 정보를 저장한다 -> 세션 쿠키라고도 불림
- 요청한 클라이언트의 Request Header의 Cookie를 보고 고유한 ID인 Session ID를 보냈는지 확인한다.
- Session ID가 없다면 서버는 Session ID를 생성하여 클라이언트에게 돌려준다.
- 클라이언트가 페이지를 요청하면 쿠키에 Session ID를 담아 보내고, 서버는 Session ID를 보고 각 클라이언트에 맞는 정보를 처리하여 클라이언트에게 전송한다.
장점과 단점
장점
- Session ID만 클라이언트에 저장되고 나머지는 서버에 저장되므로 보안성이 높다.
- 서버에 저장이 되므로 저장 용량의 한계가 없다.
- Request에 Session ID만 담아 보내므로 네트워크 부하가 적다.
단점
- 서버에 데이터를 저장하므로 서버의 부하가 커진다.
사용예시
한 페이지에서 페이지를 닫지 않고 다른 페이지로 이동한다면 로그인 상태가 유지된다.
쿠키 vs 세션
세션도 결국 쿠키를 이용하므로 동작의 방식은 비슷하다.
가장 큰 차이는 쿠키는 클라이언트의 로컬에, 세션은 서버에 저장이 된다는 것이다.
보안 측면에선 서버에 저장이 되는 세션이 더 우수하다. 쿠키는 전체 정보를 담고 있어서 request를 보낼 때 중간에 가로채진다면 개인정보 유출 등의 위험이 있다. 반면 세션은 Session ID만 보내므로 보안성이 우수하다.
속도 측면에선 쿠키가 더 우수하다. 전체 정보를 담고 있으므로 서버에서 따로 처리할 필요없이 바로 알맞은 응답을 보내면 되지만 세션은 Session ID를 확인하고 서버에서 따로 처리한 후 클라이언트에게 보내기 때문이다.
쿠키와 세션 모두 만료 기간이 있지만 세션은 만료 기간에 상관없이 브라우저가 종료되면 서버에서 삭제된다.
속도, 보안성 및 서버 자원의 측면에서 서로의 이점이 있기 때문에 둘 다 적절하게 사용하는 것이 좋다.
캐시?
쿠키, 세션은 클라이언트의 정보를 담아 서버와 통신을 할 때 정보의 유지를 위한 목적이고, 캐시는 페이지의 다시 방문한 페이지의 빠른 렌더링을 위해 리소스 파일을 임시로 저장하는 곳이다.
웹 스토리지
쿠키처럼 클라이언트 내에서 데이터의 저장을 지원하는, HTML5에서 추가된 저장소이다.
특징
- key-value 쌍으로 저장된다. 이때 value는 string만 지원한다.
- 쿠키보다 큰 용량을 지원한다(~5MB)
- 쿠키와 달리 네트워크 요청시 서버로 전송되지 않는다.
- 도메인 별로 따로 웹 스토리지를 유지한다.
- 같은 스토리지 객체를 상속하는 두 가지 종류의 웹 스토리지가 있다
-> 같은 스토리지 객체를 상속하여 메서드가 같음
Local Storage
만료기간이 존재하지 않으며 페이지를 변경하거나 브라우저를 닫아도 반 영구적으로 유지되는 저장소이다.
데이터를 지울려면 직접 스토리지를 초기화하거나 찾아서 지워야한다.
자동로그인, 다크모드/라이트모드 유지 등에 이용된다.
Session Storage
브라우저의 탭 안에서 유효한 저장소로, 브라우저를 끄면 스토리지가 초기화된다.
같은 도메인이라도 세션이 다르면 각기 다른 스토리지가 운영된다 -> 한 브라우저에 로그인을 해도 다른 탭으로 브라우저에 접속하면 서로 다른 스토리지가 운영됨
비로그인 장바구니 등에 이용된다.
참고
https://dev-coco.tistory.com/61
https://jjongins.tistory.com/25
https://adjh54.tistory.com/56
