-
[WEB] 세션(Session)과 쿠키(Cookie)■ Front-End/- JavaScript & TypeScript 2019. 6. 21. 00:00
예전에 랜딩 페이지 작업을 하면서 임시로 팝업을 띄워야할 때가 있었다.
팝업 하단에는 '오늘 하루 팝업 보지 않기'와 같은 기능이 있었다.
쿠키를 사용해서 해결했는데, 개발한 김에 세션과 쿠키에 대해서 정리해보려고 한다.
세션과 쿠키를 사용하는 이유
HTTP 프로토콜 특성 상 서버와 클라이언트의 통신이 끝나면 상태 정보는 유지하지 않는다. 그래서 쿠키와 세션이 필요하다.
예를 들어, 쇼핑몰에서 옷을 구매하려고 로그인했음에도 불구하고, 세션과 쿠키가 없으면 페이지를 이동할 때마다 계속 로그인을 해야한다.
쿠키란?
클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.
사용자 인증이 유효한 시간을 지정할 수 있으며, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지된다.
(그래서 팝업창 오늘하루 다신 보지않기 기능에 쿠키를 사용한다.)
쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request할 때 Request Header를 넣어서 자동으로 서버에 전송한다.
쿠키 동작방식
- 클라이언트가 페이지를 요청
- 서버에서 쿠키를 생성
- HTTP 헤더에 쿠키를 포함시켜 응답
- 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음.
- 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
- 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때, 쿠키를 업데이트하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답.
쿠키 사용 예
팝업창 - 오늘 다시 보지 않기.
쇼핑몰 - 장바구니
세션이란?
사용자 정보 파일을 클라이언트(브라우저)가 아닌 서버에서 관리한다.
서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며, 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증 상태를 유지한다. (브라우저가 종료되면 만료시간에 상관없이 삭제된다.)
접속 시간에 제한을 두어, 일정 시간 동안 응답이 없다면 정보가 유지되지 않게 설정이 가능하다.
쿠키보다 보안에 좋지만, 사용자가 많아질수록 서버 메모리를 많이 차지하게 된다. (이 문제를 보완하기 위해 토큰 기반의 인증 방식을 사용하는 추세이다. - Json Web Token)
세션 동작 방식
- 클라이언트가 서버에 접속할 때, 세션 ID를 발급.
- 클라이언트는 세션 ID에 대해 쿠키를 사용해서 저장.
- 클라이언트가 서버에 다시 접속할 때, 이 쿠키를 이용해서 세션 ID값을 서버에 전달.
세션 사용 예
- 로그인 상태 유지
쿠키와 세션의 차이
쿠키와 세션은 비슷한 역할을 하며, 동작 원리도 비슷하다. 세션도 결국 쿠키를 사용하기 때문이다.
가장 큰 차이점은 사용자의 기록 정보가 저장되는 위치이다.
쿠키는 서버의 자원을 전혀 사용하지 않기 때문에 요청 속도가 세션보다 빠르고,
보안 면에서는 세션이 더 우수하다.
쿠키, 세션은 캐시(Cache)와 엄연히 다르다.
캐시는 이미지나 css, js 파일 등이 사용자의 브라우저에 저장되는 것이다.
'■ Front-End > - JavaScript & TypeScript' 카테고리의 다른 글
[Javascript] Closure (0) 2019.06.22 [Javascript] 실행 컨텍스트(Execution Context) (0) 2019.06.21 [ES6] iterator, generator, async/await에 대하여 (0) 2019.06.20 [WEB] CORS에 대하여 (0) 2019.06.20 [ES6] Promise에 대하여 (0) 2019.06.19