Salangdung_i의 기록
[기술면접] 브라우저 저장소 본문
Web Storage는 무엇인가요?
sessionStorage와 localStorage는 무엇이 다른가요?
쿠키, 세션, 웹 스토리지의 차이에 대해 설명해주세요.
결론
브라우저 저장소는 클라이언트 웹 브라우저에 저장할 수 있는 기능입니다. 첫 등장은 쿠키로 시작했습니다. 쿠키의 적은 저장공간과 보안적인 문제, 성능 저하 문제를 해소하기 위해 HTML5에서 Web Stroage를 도입하였습니다. 웹 스토리지는 저장용량을 5MB으로 개선했고 저장 범위, 삭제 시기에 따라 로컬 스토리지와 세션 스토리지로 나뉩니다.
설명
브라우저 저장소의 등장
쿠키는 웹사이트가 웹 브라우저를 통해 방문자의 컴퓨터에 남기는 최대 4KB의 작은 크키의 문자열입니다. netscape사에서 방문자의 웹사이트 방문 여부를 확인하기 위해 시작되었습니다. HTTP의 특성인 비연결성, 무상태성 때문에 클라이언트의 로그인 정보나 브라우저에서 입력한 값 등이 페이지를 이동할 때마다 초기화되는 문제점을 해결하기 위해 사용되었습니다.
HTTP의 비연결성, 무상태성
|
쿠키(Cookie)
쿠키는 클라이언트 로컬에 저장되는 키와 값 형태의 작은 파일로 이름, 값, 만료시간, 경로 정보가 들어있습니다. 쿠키의 목적은 크게 3가지로 세션관리, 사용자 맞춤, 사용자 추적의 용도로 쓰입니다.
- 세션 관리(Session management) : 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
- 사용자 맞춤(Personalization) : 사용자가 선호하는 옵션이나 테마 등의 세팅
- 사용자 추적(Tracking): 사용자의 행동을 기록하고 분석하는 용도
Response Header의 Set-Cookie 속성을 사용하면 클라이언트에 쿠키를 만들 수 있으며 만들어진 쿠키는 클라이언트가 따로 설정하지 않아도 브라우저가 Request Header에 넣어서 서버로 전송하게 됩니다. 이후 클라이언트에서 보내는 모든 요청에 브라우저는 Cookie 헤더를 통해 저장된 모든 쿠키를 전송합니다.
쿠키는 만료기간에 따라 크게 두가지로 나눌 수 있습니다.
- 영구 쿠키(Permanent Cookie) : 만료기간(날짜와 시간 혹은 초)을 명시해 해당 날짜, 시간까지 쿠키를 유지할 수 있습니다.
- 세션 쿠키(Seesion Cookie) : 만료기간에 대한 정보를 명시하지 않을 경우 세션 쿠키가 되는데 브라우저 종료시 데이터가 삭제됩니다.
쿠키의 문제점
과거에 클라이언트 축 정보를 저장할때 쿠키를 주로 사용했었습니다. 하지만 모든 HTTP 요청마다 쿠키가 함께 전송되기 때문에 불필요한 트래픽이 증가되어 성능 저하가 발생하고, 보안적인 문제(CSRF, XSS), 부족한 저장용량(4KB)의 문제점 등으로 인해 HTML5에선 이 문제점을 보완한 Web Storage가 등장하게 되었습니다.
세션(Sessoion)이란 웹 사이트의 여러 페이지에 걸쳐 사용되는 사용자 정보를 저장하는 방법을 의미합니다. 사용자가 브라우저를 닫아 서버와 연결을 끝내는 시점까지를 세션이라고 합니다. 쿠키는 클라이언트 측의 컴퓨터에 모든 데이터를 저장합니다. 하지만 세션은 서비스가 돌아가는 서버 측에 데이터를 저장하고, 세션의 키값만을 클라리언트 측에 남겨둡니다.
클라이언트가 Request 를 보내면 Response에 Set-Cookie를 통해 클라이언트의 유일한 ID값을 생성해 부여하고 이를 통해 사용자 정보는 안전한 서버에 존재하며 클라이언트와 서버 간에는 ID 값만을 전달해 보안 위협을 감소시켜 줍니다.
브라우저는 필요할 때마다 이 키 값을 이용하여 서버에 저장된 데이터를 사용하게 됩니다.
웹 스토리지는 쿠키의 문제점을 해결하기 위해 HTML5에서 등장했습니다. Web Storage는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다. 저장용량이 5MB로 증가되었고, 요청 시 Header에 전송하지 않으며 문자열만 저장이 가능해졌습니다. 웹 스토리지는 저장 범위와 삭제 시기의 측면에서 2가지로 나뉩니다.
- 로컬 스토리지
- 저장 범위 : 도메인과 브라우저
- 삭제 시기 : 직접 삭제시
- 세션 스토리지
- 저장 범위 : 도메인, 브라우저, 탭
- 삭제 시기 : 탭, 브라우저 종료 시
"Icon made by Pixel perfect from www.flaticon.com"
'WEB FRONT END' 카테고리의 다른 글
| [기술면접] Webpack(+module) (1) | 2022.04.12 |
|---|---|
| FE 개발자 준비과정(강의/서적)편 (2) | 2022.03.08 |
| Fetch API cannot load file:/xxx.json. URL scheme "file" is not supported. (0) | 2021.10.24 |
| 멀티미디어 태그 (0) | 2019.09.21 |
| 테이블 태그 (0) | 2019.09.21 |
