로그인을 하고 그 후에 다른 페이지로 이동할 때,
서버는 이 사용자가 로그인된 사용자라는 걸 어떻게 알까?
또는 장바구니에 넣어놨던 리스트들은 사이트 창을 닫아도 계속 남아있거나,
다시 보지 않음을 체크하는 팝업 창은 어떻게 동작하는 것일까?
이런 과정들은 쿠키, 세션 또는 웹 스토리지를 활용한 기능들이다.
그럼 쿠키, 세션, 웹 스토리지는 무엇이며 어떻게 동작하는 지에 대해 정리해봤다.
일단 이것을 이해하기 위해서는 HTTP 프로토콜에 대해 이해를 해야한다.
HTTP 프로토콜은 Client와 Server가 통신하는 통신 규칙이다.
HTTP 프로토콜
HTTP의 특징은 대표적으로 connectionless(비연결성), stateless(무상태)가 있다.
그렇기 때문에 Client(브라우저)가 서버에서 요청을 보내고 응답을 받으면
연결을 끊고 그에 대한 상태 정보 또한 유지하지 않는다.
만약 로그인으로 예시를 들어보자
위의 HTTP 프로토콜 특성에 의해서 네이버에 접속을 하고 로그인을 하면 이렇게 될 것이다.
1. 네이버 로그인 시도 (client -> server request : 로그인 요청)
2. 로그인 완료 (client <- server response : 로그인 성공 > 해당 상태 유지 X)
3. 다시 네이버 홈페이지로 이동 (client -> server request)
4. 로그인 유지가 되지 않음 (client <- server response)
HTTP의 무상태 특성에 의해 2번에서 로그인이 성공해도 그 이후에는 로그인 상태를 유지하지 못한다.
하지만 우린 어떤 사이트를 이용하던 로그인을 하면 브라우저를 닫거나 로그아웃할 때까지 로그인 상태가 유지되어있다.
그 이유는 로그인이 되었다는 상태를 유지하기 위해 쿠키와 세션을 사용해서이다
즉, 한번 로그인을 하면 그 이후에 다른 요청에 이 요청은 로그인이 된거야 라는 것을 서버에 알려주고 있는 것이고
이 기능은 쿠키와 세션을 활용한 것이다.
그럼 쿠키란 무엇일까?
쿠키 (Cookie)
먼저 쿠키(Cookie)에 대해 설명하자면, 이것은 Client의 정보를 브라우저에 저장하는 공간이다.
쿠키는 Client의 특정 정보를 브라우저에 저장하여 서버 호출 시에 같이 전송되게 된다.
데이터 형태는 key, value로 되어 있으며 브라우저가 종료되어도 쿠키 만료기간 내에서는 지속된다
만료기간은 직접 설정도 가능하며 보통 서비스를 제공하는 측에서 지정해놓는다
그래서 주로 장바구니에 활용된다.
(장바구니에 넣어놓은 것들은 페이지를 나갔다가 들어와도 유지되어있는 이유이다.)
하지만 쿠키의 단점은 보안에 취약하다.
모든 HTTP 통신의 header에 포함되어 사용되기 때문에 해킹을 당할 가능성이 다분하다.
개인정보와 같은 중요 데이터들을 쿠키로 사용하는 것은 바람직하지 못하다.
그래서 로그인 기능은 쿠키에 세션이라는 것을 함께 사용하게 된다.
세션 (Session)
Client에서 서버로 로그인 요청을 하면 서버에서 세션 ID를 발급하여 응답으로 함께 보내주게 되는데,
이 세션 ID를 쿠키에 저장함으로서 이후 다른 요청 시, 세션 ID를 함께 서버로 전송하게 된다.
해당 요청을 받은 서버에서는 세션 ID를 확인하여 이 사용자가 누구구나 라는 것을 알게 되고 로그인 상태를 유지한다.
그리고 이때 사용되는 쿠키는 세션쿠키라고 하는데 이것은 브라우저 종료 시 사라지게 된다.
즉, 위의 이미지에서 4번부터는 로그인된 상태라고 보면 된다.
하지만 위의 사용자가 브라우저를 닫게 되면 로그아웃된다.
그럼 장바구니 기능도 세션과 쿠키를
이용하면 되는 게 아닌가?
왜 구분하는 거지 라고 생각할수 있다
이는 서버의 자원을 무분별하게 사용하는 것을 막기 위함이다.
무분별하게 사용될 수록 서버에 과부화가 올 것이고 이는 성능 저하로 이어진다.
그래서 주로 로그인 세션 ID와 같은 중요한 데이터를 기억하기 위해서 세션을 활용한다고 보면 된다.
웹 서비스는 계속해서 다양한 기능을 사용하기 위해 Client의 더 많은 정보를 저장하고 싶어했다.
예를 들어 자동로그인이나 입력한 정보를 유지되게 하고 싶다던가, 특정 팝업에 하루 동안 닫기 기능을 활용하고 싶다던가
하지만 쿠키로 사용하기에는 한계가 있었다.
쿠키는 모든 HTTP 요청에 헤더로 포함되어 전송되기 때문에 저장할 수 있는 용량에 한계가 있기 때문이다.
(또한 쿠키가 많으면 많을 수록 성능에 문제가 생길 수 있다.)
그래서 웹 스토리지라는 것이 개발되었다.
웹 스토리지 (Web Storage)
웹 스토리지는 쿠키와 다르게 서버로 전송되지 않는 브라우저 Client 데이터이다.
또한 저장 가능한 데이터의 용량과 개수가 쿠키보다 훨신 크고 많다.
웹 스토리지는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)로 구분할 수 있다.
로컬 스토리지(Local Storage)는 사용자가 별도로 삭제하지 않는 이상 계속 저장되어 있는 데이터다.
자동 로그인 기능이 로컬 스토리지를 이용한 구현이라고 보면 된다.
세션 스토리지(Session Storage)는 해당 브라우저를 닫으면 사라지는 데이터이다.
예를 들면 팝업 닫기, 사용자 입력값 유지 등으로 활용된다.
개발을 하다보면 웹 스토리지를 사용할 일이 자주 발생하는데,
어떤 기능 개발인지에 따라 로컬 스토리지와 세션 스토리지 중 선택해서 사용하면 된다.
사용법도 간단하여 활용도가 높은 편이다.
하지만 특정 웹 브라우저에서 지원하지 않는 경우가 있어 오류가 발생할 수 있음으로
예외 처리 코드를 작성해놓는 것이 좋다.
이렇게 쿠키, 세션, 웹 스토리지에 대해 간략하게 정리해봤다.
쿠키, 웹스토리지는 브라우저에서 직접 확인 가능하다
브라우저를 열어놓은 상태에서 F12를 누르면
이 웹페이지 내의 모든 네트워크 통신 정보 및 통신 상태를 확인할 수 있다
보통 웹 프론트 개발 시 많이 참고하는 개발툴이다
좌측을 보면 여기서 Local Storage, Session Storage, Cookie를 확인 할 수 있다.
이미지 참조 : https://jh2021.tistory.com/13
'개발일기' 카테고리의 다른 글
| [Git] Command 이론 정리 (Cherry-Pick, HEAD, Reset, Revert) (0) | 2023.11.09 |
|---|---|
| Redis Cache 이론 정리 (1) | 2023.10.29 |
| 이클립트(Eclipse) 다운로드 및 설치 방법 (0) | 2023.10.15 |
| 방화벽이란? ip주소, 포트번호에 대한 이론적 내용 정리 (1) | 2023.10.15 |
| WEB 서버와 WAS(Web Application Server)의 차이 (1) | 2023.10.15 |