[Frontend] 기술면접 top30
해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!
📌쿠키, 세션, 웹스토리지의 차이를 설명해보세요
답변▶️ 웹 애플리케이션을 제작하거나 사용하면서 가장 중요한 부분 중 하나는 데이터의 저장 및 관리입니다. 이를 위해 쿠키, 세션, 웹 스토리지와 같은 기술들이 널리 사용되고 있으며 이들은 각 각 은 고유한 특징과 장,단점을 가지고 있습니다.
쿠키의 구성 요소
웹 브라우저에 저장되는 클라이언트 측에 저장되는 key와 value로 이루어진 작은 텍스트 파일로 일반적으로 쿠키는 만료일을 가지고 있으며 만료일이 지나면 자동으로 삭제되는 구조입니다. 사용자가 웹 사이트에 로그인하면 사용자의 로그인 정보를 쿠키에 저장하여 사용자가 다시 방문할때마다 로그인을 유지할 수 있습니다.
- 이름(name): 각각의 쿠키를 구별하는데 사용되는 이름
- 값(value): 쿠키의 이름과 관련된 값
- 유효 시간(expires): 쿠키의 유지 시간
- 도메인(Domain):쿠키를 전송할 도메인
- 경로(Path): 쿠키를 전송할 요청 경로
쿠키의 동작 방식
- 클라이언트가 페이지 요청
- 서버가 HTTP 응답 시 set-cookie를 통해 쿠키 생성하여 전달
- 클라이언트는 이제부터 매 HTTP Request시 HTTP Header에 쿠키를 담아서 전송
- 만료 기간 전이라면 쿠키는 브라우저에 저장되어 있으며, 항상 요청 시 사용 가능
- 만료가 됬다면 클라이언트가 새로 서버에 요청하여 쿠키 새로 발급
웹 스토리지
- 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
- 종류는 로컬 스토리지, 세션 스토리지
- key, value 쌍의 형태로 데이터 저장
- window객체의 property로 존재
세션
클라이언트가 처음 서버에 접속하면 서버는 고유한 세션 id를 생성하고 이를 클라이언트에게 전달합니다.
로컬 스토리지와 세션 스토리지 차이점
- 로컬 스토리지는 데이터 영구 저장이 가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 스토리지가 초기화
- 로컬 스토리지는 window.localStorage, 세션 스토리지는 window.sessionStorage 객체 사용
쿠키, 로컬 스토리지, 세션 스토리지 사용처
- 쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
- 다시 보지 않음 쿠키 팝업 창 , 로그인 자동 완성
- 로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
- 자동 로그인
- 세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
- 일회성 로그인, 입력 폼 저장, 비 로그인 장바구니
