쿠키, 세션 ,캐시, 웹 스토리지

GY·2022년 4월 10일
0

Basic CS

목록 보기
25/28
post-thumbnail
post-custom-banner

쿠키 & 세션 & 캐시

쿠키와 세션은 왜 사용할까?

HTTP 프로토콜의 단점을 보완하기 위해서 사용한다

HTTP 프로토콜의 특징

  1. Connectionless 프로토콜 (비연결 지향)
    클라이언트가 서버에 요청을 보내면, 응답을 보낸 후 연결을 끊는 처리방식이다.
    *HTTP가 TCP를 기반으로 구현되어 연결지향적이라고 할 수 있다는 의견도 있으나, 서버측에서 커넥션 관리에 대한 비용을 줄이는 것이 명확한 장점으로 보기 때문에 비연결 지향으로 알아두었다.

  2. Statelesss 프로토콜
    커넥션을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태정보는 유지하지 않는 특성이 있다.
    이전 데이터를 유지해야 하는 경우 쿠키와 세션을 사용한다.


1. 쿠키

HTTP의 일종으로 방문한 사이트가 사용하는 서버에서 사용자의 컴퓨터에 저장하는 기록정보 파일이다.
HTTP에서 클라이언트의 상태정보를 클라이언트의 PC에 저장했다가 필요시 정보를 참조하거나 재사용할 수 있다.

  • 쿠키에는 key-value형태의 한쌍의 문자열 형태의 데이터를 저장할 수 있다.
  • 데이터가 만료될 시간 제한을 설정할 수 있다.

언제 사용할까?

클라이언트에서 데이터를 보관하기 때문에 보안에 취약하다는 단점이 있다.
따라서 사용자의 편의성을 주되 보안이 중요하지 않은 데이터를 관리하는데 쓰인다.

예를 들면...

  • 로그인 시 아이디를 자동완성 기능
  • 팝업창을 하루 동안 보지 않기 기능
  • 로그인하지 않고 장바구니에 상품 담기

동작 방식

  • 클라이언트가 페이지를 요청한다.
  • 웹 서버는 쿠키를 생성한다.
  • 생성한 쿠키에 정보를 담아 HTTP 화면을 돌려줄 때, 같이 클라이언트에게 돌려준다.
  • 넘겨받은 쿠키는 클라이언트가 가지고 있다가(로컬 PC에 저장) 다시 서버에 요청할 때 요청과 함께 쿠키를 전송한다.
  • 동일 사이트 재방문 시 클라이언트의 PC에 해당 쿠키가 있는 경우, 요청 페이지와 함께 쿠키를 전송한다.

2. 세션

방문자가 웹 서버에 접속해있는 상태를 하나의 단위, 세션으로 본다.
이것을 유지시키는 기술이 세션이다.

클라이언트에서 관리하여 삭제되거나 조작되지 않도록 보호해야 하는, 서버 측에서 직접 관리해야 하는 정보들을 세션에서 다룬다. 하지만 세션을 남발하면 접속자가 많을 때 서버에 부하가 걸릴 수 있으므로 쿠키와 세션을 적절히 사용할 수 있어야 한다.


3. 캐시

가져오는데 비용이 드는 데이터를 한번 가져온 뒤에는 임시로 저장해두는 것
사용자가 여러번 방문할 법한 사이트는 중간 역할을 하는 서버 혹은 사용자의 컴퓨터에 저장해두는 것을 말한다.


웹 스토리지

브라우저의 저장소를 말한다.
클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소로, key,value형태로 데이터를 저장한다.

웹 스토리지와 쿠키의 차이점

쿠키웹 스토리지
서버 전송 여부자동으로 서버에 전송된다.서버에 전송되지 않아 서버에 부담이 가지 않는다
도메인 단위로 접근이 제한되는 특성 이 있어 다른 도메인에서 요청해도 값을 꺼내 쓸 수 없다

웹 스토리지에는 로컬 스토리지와 세션 스토리지가 있다.
이 둘은 window객체의 프로퍼티로서 존재하며, 같은 스토리지 객체를 상속하기 때문에 동일한 메서드를 가진다.
이 둘의 차이점은 데이터의 영구성이다.


Local Storage

로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있어 데이터의 영구성이 보장된다.
따라서 지속적으로 필요한 데이터를 저장할 때 활용할 수 있다.

예시

  • ID 저장하기 항목 체크시 저장할 아이디, 비회원 카트 정보 등
  • UI 정보: 에어비앤비와 같은 사이트의 검색 항목 유지
    key-value 형태의 한 쌍의 객체 형태로 데이터가 저장된다.

Session Storage

세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.
따라서 창이 닫기기전 세션이 만료되기 전까지만 유지할 정보를 저장하는데 활용할 수 있다.

예시

  • 보안이 중요한 정보: 은행 사이트 등에 사용되는 정보
  • 구체적인 유저의 개인 정보
  • 사이트 언어

비밀번호와 같은 중요 정보는 스토리지에 저장하지 않는 것이 좋다.
로컬 스토리지/ 세션 스토리지는 클라이언트 사이드이므로 쉽게 해킹당할 수 있다.
서비스/회사마다 유저 정보를 처리하는 방식은 다르기 때문에 그에 맞게 처리해야 한다.


Reference

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.
post-custom-banner

0개의 댓글