HTTP의 특징 그리고 쿠키와 세션
📌HTTP의 특징
1. connectionless
- 클라이언트가 요청 한 후 응답을 받으면 연결을 끊음
2. stateless
- 통신이 끝나면 상태를 유지하지 않음
→ 위 두가지 특징 때문에 서버는 요청 자체 만으로 그 요청이 누구에게서 오는지 알 수 없음
→ 이러한 특징을 해결하기 위해 쿠키와 세션을 사용
→ 쿠키와 세션을 사용하여 사용자에 대한 인증을 유지
📌쿠키
[특징]
- 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일
- 인증 유효 시간을 명시할 수 있음, 유효 시간이 정해지면 브라우저가 종료되어도 인증이 유지
- 하나의 쿠키값은 4KB까지 저장
- Response-Header에 set-cookie 속성을 사용해서 만듦
- 사용자가 따로 요청하지 않아도 브라우저가 요청시에 Request Header에 넣어서 자동으로 서버에 전송
- 지속적인 데이터 교환을 위해 만들어진 쿠키가 서버로 계속 전송되는 것
[동작원리]
1. 클라이언트가 쿠키가 없는 상태로 요청
2. 서버에서 쿠키를 생성하여 http 헤더에 쿠키를 포함 시켜서 응답
3. 쿠키가 있는 상태로 요청
4. 서버에서 쿠키를 통해 상태를 식별하고 그에 따라 응답
[활용예시]
- 로그인 시 정보 저장 기능
- 쇼핑몰의 장바구니 기능
- 자동로그인
- 팝업창, 더이상 보지 않음 체크박스
📌세션
[특징]
- 쿠키 기반, 가장 큰 차이점은 사용자 정보 파일을 브라우저에 저장하는 쿠키와 달리 세션은 서버 측에서 관리
- 서버에서 클라이언트 구분을 위한 세션 ID를 부여
- 브라우저가 종료될 때까지 인증상태 유지
- 사용자에 대한 정보를 서버에 두기 때문에 보안은 유리하지만, 사용자가 많아질수록 서버에 과부하
[동작원리]
1. 클라이언트가 세션이 없는 상태로 요청
2. 서버에서 세션 생성 및 세션 ID를 response, 클라이언트에서는 쿠키에 세션 ID를 저장
3. 세션 ID가 포함되어 있는 쿠키가 있는 상태로 요청
4. 서버에서 쿠키의 세션ID 통해 상태를 식별하고 그에 따라 응답
[활용예시]
- 보안 로그인
📌쿠키 VS 세션
- 사용자 정보의 저장 위치, 쿠키는 브라우저 세션은 서버. 따라서 보안 면에서는 세션이 우수, 속도면에서는 쿠키가 우수
- 라이프 사이클, 쿠키는 브라우저를 종료해도 정보가 남아 있음, 세션은 브라우저가 종료되면 만료시간에 상관없이 삭제됨
- 세션의 보안이 더 좋으나 서버 메모리를 사용자 수 만큼 차지 하는 문제 발생 → 이러한 문제들을 보완하기 위해 토큰 기반의 인증방식을 사용, 그 중 하나가 JWT(Json Web Token)
로컬스토리지, 세션스토리지의 등장
- html5에서 추가된 저장소
- 로컬스토리지, 세션스토리지가 나오기 이전에 브라우저에 저장소 역할을 하던 것이 쿠키임.
- 쿠키의 문제점 : 4kb 용량을 다 채운 쿠키가 있다면 요청을 할 때마다 4kb의 데이터를 사용하여 데이터 낭비 발생 → 이러한 데이터들을 로컬 스토리지, 세션 스토리지에 저장할 수 있게 됨
- 서버로 자동 전송되지 않음
- 간단한 키-값 스토리지 형태
- window 객체 안에 들어 있으며, Storage 객체를 상속받아 메소드가 공통적으로 존재
📌로컬스토리지
[특징]
- 지우기 전까지 데이터가 유지되므로 유저 커스텀에 적합(보안에 민감하지 않은 데이터)
- 페이지 프로토콜별로 구분, http로 방문한 페이지에서 저장한 데이터는 같은 페이지의 https와는 다른 로컬스토리지에 저장
- window.localStorage에 위치하며 값으로 문자열, 불린, 숫자, null, defined 등을 저장할 수 있지만 키와 값 모두 문자열로 변환됨
- localStorage.setItem(키,값)으로 저장 후, localStoarge.getItem(키)로 조회가능.
- localStorage.removeItem(키)하면 해당 키가 지워지고, localStorage.clear()하면 스토리지 전체가 비워짐
[활용예시]
자동 로그인
📌세션스토리지
[특징]
- 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남음
- 하지만 페이지를 새로운 탭이나 창에서 열면 세션 쿠키의 동작과는 다르게 최상위 브라우징 값을 가진 새로운 세션 스토리지를 생성
- 탭/창을 닫으면 세션이 끝나고 sessionStorage 안의 객체를 초기화
- 페이지 프로토콜별로 구분, http로 방문한 페이지에서 저장한 데이터는 같은 페이지의 https와는 다른 로컬스토리지에 저장
- window.sessionStorage에 위치하며 값으로 문자열, 불린, 숫자, null, defined 등을 저장할 수 있지만 키와 값 모두 문자열로 변환됨
- 모든 메소드는 로컬스토리지와 동일
[활용예시]
일회성 로그인 정보
📌 로컬스토리지 vs 세션스토리지
- 가장 큰 차이점은 데이터의 영구성
- 로컬 스토리지는 사용자가 지우지 않는 이상 영구적, 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거 - 지속적으로 필요한 데이터는 로컬 스토리지에 저장하고, 잠깐 동안 필요한 정보는 세션 스토리지에 저장
- 하지만 주의! 비밀번호 같은 중요 정보는 클라이언트에 저장하면 절대 안됨하면 되겠습니다.
참고
1. 제로초, 로컬스토리지와 세션스토리지
https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
www.zerocho.com
2. 라이언서버, 쿠키와 세션 개념
'CS 공부 - front' 카테고리의 다른 글
| [JS] 동기 처리와 비동기 처리 (0) | 2023.02.02 |
|---|---|
| [JS] 콜백 함수 (0) | 2023.02.02 |
| [JS]변수 선언의 실행 시점과 변수 호이스팅 (0) | 2023.01.31 |
| [웹] cors, Cross-origin resource sharing (0) | 2023.01.29 |
| [웹] SSR vs CSR 그리고 Next.js (0) | 2023.01.24 |