[Javascript 기초] 브라우저 저장소 / 세션, 쿠키, 캐시

아래 [이직하려는 친구에게 보내는 프런트엔드 개발자 면접 질문]의 글을 보고

선뜻 답이 나오지 않아 복습 & 학습 겸 적어보는 글

질문 리스트는 다음 출처에: https://joshua1988.github.io/web-development/interview/frontend-questions/

 

브라우저 저장소에 대해서 설명해 보세요

 

Web Storage

        : 데이터를 클라이언트에만 저장할 뿐 서버로 전송은 이루어지지 않는다.

        로컬 스토리지, 세션 스토리지로 구분되는데 둘은 데이터 유지 측면과 데이터 범위 측면에서 차이가 있다.

 

1) Local Storage 로컬 스토리지

: 브라우저를 닫았다가 다시 열어도 계속 유지-- 영구저장소

Windows 전역 객체의 LocalStorage 컬렉션을 통해 저장과 조회가 이루어진다.

 

데이터 유지 - 브라우저를 종료해도 데이터 보관        

데이터 범위 - 도메인만 같으면 전역적으로 데이터가 공유

 

 

2) Session Storage 세션 스토리지 

: 브라우저가 열려있는 한 페이지를 Reload해도 계속 유지 but 브라우저를 닫으면 삭제 -- 임시저장소

Windows 전역 객체의 LocalStorage 컬렉션을 통해 저장과 조회가 이루어진다.

 

데이터 유지 - 브라우저가 종료되면 데이터 삭제

데이터 범위 - 도메인이 같아도 브라우저가 다르면 데이터 공유가 안 됨.

                  탭 브라우징이나 또 다른 브라우저를 실행했을 때 각각의 Session Storage가 유지됨.

                  브라우저 컨텍스트가 다르기 때문

                  * 브라우저 컨텍스트: document를 표시하는 환경, 즉 브라우저가 불러온 웹페이지

 

 

 

 

꼬리질문 - 세션, 쿠키, 캐시에 대해 말해보시오

Cookie 쿠키

: 쿠키는 웹브라우저에 저장되는 데이터로, 클라이언트가 요청할 때마다 해당 정보를 함께 보내서 서버가 사용자를 식별할 수 있게 해줌.

 

* 쿠키의 특징

쿠키의 데이터는 String으로만 구성된 Key - Value 형태이며, 4KB가 최대이다.

 

* 쿠키의 주된 목적

1) 세션 관리 - 서버가 알아야 할 정보들 저장(ex. 로그인, 사용자정보, 접속시간, 장바구니 등)

2) 개인화 - 사용자마다 다르게 페이지 보여줌

3) 트래킹 - 사용자의 행동과 패턴 분석

 

 

 

세션(Session)

 

세션 ID 파일을 만들어 서비스가 돌아가고 있는 서버에 저장

브라우저가 종료되면 삭제

 

* 세션 ID = 세션 토큰

세션을 식별하기 위해 네트워크 통신에서 사용되는 데이터 조각

통신 인프라가 HTTP와 같은 상태 비 저장 프로토콜(stateless protocol)을 사용하는 경우 세션 식별자가 필요

쿠키 기술로 클라이언트에 저장

 

* 세션의 동작 순서

1. 클라이언트가 서버에 Request 보냄

2. (최초요청 시) 서버에서 session id 쿠키값이 없는 것을 확인하고 새로 발급해서 응답 (Header의 Set-Cookie로 전달)

3. 클라이언트는 매 요청마다 헤더 쿠키에 전달받은 session id를 넣어 요청

4. 서버는 session id를 확인하여 사용자 식별

5. 클라이언트가 로그인을 요청하면 서버는 session을 로그인한 사용자 정보로 갱신하고 새로운 session id를 발급하여 응답

6. 이후 클라이언트는 로그인 사용자의 session id쿠키를 요청과 함께 전달하고 서버에서도 로그인된 사용자로 식별 가능

7. 브라우저 종료 시 session id 제거, 서버에서도 세션 제거

 

캐시

: 캐시는 이미지나 css, js파일 등을 브라우저나 서버 앞 단에 저장해놓고 사용하는 것

 

기타

쿠키와 세션을 사용하는 이유

 

HTTP 프로토콜은 비연결성(Connectionless), 비상태성(Stateless)라는 특징을 갖는데, 이로 인해 서버의 자원을 크게 절약할 수 있지만 사용자를 식별할 수 없다는 단점이 있다. 이것을 보완하기 위한 기술이 쿠키와 세션.