먼저 쿠키, 세션, 캐시를 사용하는 이유를 알아보자면,
사용자가 로그인을 하고 다른 페이지로 이동을 했을 때, 그 로그인을 유지하기 위해서, 같은 사이트를 방문 시, 여러 개의 이미지들을 불필요한 로드를 없애기 위해서 등의 여러가지 이유가 있다.
세밀하게 보면, HTTP와 관련이 있는데 쿠키와 세션을 사용하는 이유는 HTTP 프로토콜의 특징이자 약점을 보완하기 위해서이다.
HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인해야 하고, 그 이유는 HTTP 프로토콜이 connectionless, stateless(무상태 즉, 요청에 대한 응답만 처리)한 특성이 있기 때문이다.
HTTP 프로토콜의 특징
Connectionless 프로토콜 (비연결 지향)
클라이언트가 서버에 요청(Request)을 했을 때, 그 요청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다.
HTTP 1.1 버전에서 커넥션을 계속 유지하고, 요청(Request)에 재활용하는 기능이 추가되었다. (HTTP Header)에 keep-alive 옵션을 주어 커넥션을 재활용하게 한다. HTTP 1.1 버전에선 디폴트(default) 옵션이다.
HTTP가 TCP위에서 구현되었기 때문에(TCP : 연결 지향, UDP : 비연결 지향) 연결 지향적이라고 할 수 있다는 얘기가 있어 논란이 있지만, 아직까진 네트워크 관점에서 keep-alive는 옵션으로 두고, 서버 측에서 비연결 지향적인 특성으로 커넥션 관리에 대한 비용을 줄이는 것이 명확한 장점으로 보기 때문에 비연결 지향으로 알아두었다.
Stateless 프로토콜 (요청에 대한 응답만 처리)
커넥션을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보는 유지하지 않는 특성이 있다.
클라이언트와 첫 번째 통신에서 데이터를 주고받았다 해도, 두 번째 통신에서 이전 데이터를 유지하지 않는다.
하지만, 실제로는 데이터 유지가 필요한 경우가 많다.
✨
정보가 유지되지 않으면, 매번 페이지를 이동할 때마다 로그인을 다시 하거나,
상품을 선택했는데 구매 페이지에서 선택한 상품의 정보가 없거나 하는 등의 일이 발생할 수 있다.
👉🏻 따라서, Stateful 경우를 대처하기 위해 쿠키와 세션을 사용한다.
쿠키와 세션의 차이점은 크게 상태 정보의 저장 위치이다.
쿠키는 '클라이언트(=로컬 PC)'에 저장하고, 세션은 '서버'에 저장한다.
✨
🍪 쿠키
- 쿠키는 클라이언트 측에 저장된 키와 함께 들어있는 작은 파일
- 클라이언트의 상태정보를 로컬에 저장
- 그래서, 장바구니 기능, '오늘 더이상 창을 보지않음 창 팝업' 등에 사용된다.
- 클라이언트가 페이지를 요청하면
- 서버에서 쿠키를 생성해, http 헤더에 쿠키를 포함시켜 응답
- 클라이언트는 이 쿠키를 로컬 pc에서 갖고 있다가, 다시 서버에 요청할 때 HTTP 헤더에 이 쿠키를 함께 전송
- 서버에서는 이 쿠키를 읽어 이전 상태정보를 변경할 필요가 있으면 쿠키를 업데이트해 HTTP 헤더에 변경된 쿠키를 넣어 반환한다.
🔑 세션
- 세션은 사용자 정보를 서버측에서 관리한다
- 즉, 보안성이 좋아 로그인같은 보안중요작업에 사용
- 서버는 클라이언트 구분을 위해 세션 ID라는 것을 부여한다. 웹 브라우저가 서버에 접속하고, 브라우저를 종료할 때 까지 인증상태를 유지한다.
- 클라이언트가 페이지를 요청하면
- 서버는 접근한 클라이언트의 request-header필드의 쿠키를 확인해 클라이언트가 세션id를 보냈는지 확인
- 만약 세션id가 존재하지 않으면 서버는 세션id를 생성해 클라이언트에 함께 돌려줍니다.
이 때, 서버측에서는 세션 저장소에 해당 id를 저장해, 차후 구분할 수 있도록 한다. - 클라이언트는 세션id를 받으면, 이걸 쿠키를 사용해 저장하고 가지고 있다.
- 클라이언트는 이제 같은 요청으로 서버에 접속할 때, HTTP요청에 이 세션ID를 같이 서버에 전달해 요청한다.
- 서버는 세션 ID를 전달 받고, 세션저장소에서 해당 세션 ID값을 찾아 클라이언트 정보를 가져와서 클라이언트를 구분한다. 그리고 요구에 맞는 서비스를 제공한다.
⚖️ 쿠키와 세션의 차이
- 데이터의 저장위치 : 쿠키-브라우저, 세션-서버
- 보안성은 쿠키가 저장위치가 클라이언트라는 점에서 스니핑을 당할 우려가 있기 때문에 세션측이 좀 더 좋다.
- LifeCycle은 쿠키는 브라우저가 종료되어도 쿠키에 저장된 만료일(저장기간) 값이 남아있으면 존재하고, 세션은 브라우저 종료 시, 만료기한에 상관없이 종료
- 속도측은 세션이 서버에 정보가 있기 때문에, 쿠키측이 더 빠르다. 하지만, 사용자가 많아질수록 서버 메모리를 많이 차지한다.
🗃 브라우저 저장소(웹 스토리지)
- 서버전송 없이 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소로, 오직 문자형 데이터 타입만 지원
- 쿠키는 서버가 클라이언트에게 전송하는 데이터 파일로, [이름/값/만료일자] 등 데이터를 포함한다. 모든 브라우저에서 지원되나, 매번 서버에 전송되고, 저장용량이 작으며, 보안에 취약하다.
- 웹 스토리지는 쿠키의 단점을 보완하려 등장한 개념
- 웹 스토리지는 클라이언트에서 저장만 할 뿐, 서버로 전송하지 않기 때문에 전송에 따른 위험이 없다.
- 웹 스토리지는 지속성에 따라 두 가지로 나뉘는데, 로컬 스토리지(Local Storage)는사용자가 데이터를 지우지 않는 이상, 브라우저나 OS를 종료해도 계속 브라우저에 남아있다. 즉, 영구적 저장 특성을 가진다.
- 하지만, 세션 스토리지는 데이터가 브라우저 탭에 종속되기 때문에, 윈도우나 브라우저 탭을 닫을 경우 제거된다.
💰 캐시
- 리소스 파일들의 임시저장소
- 같은 웹페이지에 접속할 때, 이전에 사용되었던 데이터는 다시 사용될 가능성이 높다라는 생각을 기초로 해서 다시 사용될 확률이 있는 데이터들을 빠르게 접근 가능한 저장소에 저장하는 것
- 보통 이러한 리소스의 대상은 이미지, 비디오 오디오, CSS/JS 등
- 이런건 데이터 사용량도 좀 들고, 시간도 걸리니까 매번 서버에서 불러오면 시간이 너무 오래 걸리는 걸 대상으로 한다.
- 또, 변경사항이 크지 않다.
⚖️ 쿠키/세션은 캐시와 엄연히 다르다!
캐시는 이미지나 css, js파일 등을 브라우저나 서버 앞 단에 저장해놓고 사용하는 것이다.
한번 캐시에 저장되면 브라우저를 참고하기 때문에 서버에서 변경이 되어도 사용자는 변경되지 않게 보일 수 있는데 이런 부분을 캐시를 지워주거나 서버에서 클라이언트로 응답을 보낼 때 header에 캐시 만료시간을 명시하는 방법등을 이용할 수 있다.
보통 쿠키와 세션의 차이를 물어볼 때 저장위치와 보안에 대해서는 잘 말하는데 사실 중요한 것은 라이프사이클(LifeCycle)에 대해 얘기할 줄 아는 것이다. 😎
📍 출처
완벽정리-쿠키,세션,토큰,캐시 그리고 cdn
https://dev-coco.tistory.com/61
https://zorba91.tistory.com/163
네트워크 스터디 2주차 - 쿠키, 세션, 토큰, 캐시
📍 참고하면 좋을 사이트
https://www.youtube.com/watch?v=OpoVuwxGRDI
