📃 프론트엔드 인터뷰 문제 답해보기 #7 cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요.

📃 프론트엔드 인터뷰 문제 답해보기 #7 cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요.

Prologue

깃허브를 돌아다니다가 예전에 프론트엔드 개발자 인터뷰 질문이라는 레포지토리를 본적이 있다. 사실 그 당시에는 그냥 스타만 눌러놓고 큰 관심이 없었지만 지금부터 하나씩 풀어보려 합니다.

물론 많은 답들이 이미 이 레포지토리에 작성되어 있긴 한데, 작성되지 않은 것들도 있고 내 답이랑 모범답안을 비교하는 것도 좋을 것 같아서 한번 풀어보려 합니다.

문제 선정

기존 레포지토리에는 문제의 분류가 아래와 같이 되어있습니다.

1. General Questions
2. HTML Questions
3. CSS Questions
4. JS Questions
5. Accessibility Questions (external link)
6. Testing Questions
7. Performance Questions
8. Network Questions
9. Coding Questions
10. Fun Questions

매일 1가지씩 돌아가며 풀 건데, General Questions 항목에서 너무 일반적인 문제는 풀지 않을 것이다. 너무 일반적인 문제의 정의는 사람마다 답이 다를 수 있는 문제입니다.

이를테면...

What did you learn yesterday/this week? (어제/이번주에 무엇을 배웠나요)
What excites or interests you about coding? (무엇이 당신을 코딩하고 싶게 만드나요?)
What is a recent technical challenge you experienced and how did you solve it?(최근에 겪은 기술적인 어려움과 그것을 어떻게 해결했는지 알려주세요)

이러한 것들은 답변하지 않습니다. 이런 문제는 그때그때 답이 달라질 수 있습니다.

참고

나의 답변은 높은 확률로 틀릴 수도 있으며, 아니면 맞게 가다가 중간에 이상한 길로 빠질 수도 있다. 댓글에 자신만의 답을 올려주면 매우 고마울 것 같습니다.

Q: cookie, sessionStorage, localStorage 사이의 차이점을 설명하세요.

원문 : Describe the difference between a cookie, sessionStorage and localStorage.

A: 셋 모두 클라이언트 저장소 솔루션

위 세 가지 기술은 모두 클라이언트 측에서 값을 저장하는 key-value 저장소 매커니즘입니다. 모두 문자열로만 값을 저장할 수 있습니다.

상황에 따라 3가지 중 선호되는 저장소가 달라질 수 있다고 생각합니다. 브라우저나 이용자의 기기 등에 따라 사용해야 할 저장소가 달라질 수 있습니다.

일반적으로 애플리케이션의 서버 사이드 를 이용하여 데이터를 저장하는 경우에는 DB나 XML, text, CSV와 같은 것을 이용합니다.

반면에 localStorage, sessionStorage, cookie는 모두 클라이언트 저장소 솔루션입니다. session data는 사용자가 직접 컨트롤하는 서버 내에 저장됩니다.

로컬스토리지와 세션스토리지

로컬 스토리지와 세션 스토리지는 비교적 새로운 API에 속합니다. 그래서 지원하지 않는 옛날 브라우저들도 있습니다. 그리고 두 저장소는 상당히 비슷합니다. 비슷한 API를 갖고 있습니다. 다만, 데이터 지속성 의 측면에서는 약간 다릅니다.

세션 스토리지는 브라우저 세션이 유지되는 동안만 데이터를 저장합니다. 새로운 탭으로 가거나 윈도우를 닫았을 때 데이터는 지워지게 됩니다. 하지만, 페이지를 새로고침 할 때에는 유지됩니다.

만일, 브라우저를 종료해도 데이터가 계속 유지되길 바란다면 로컬 스토리지를 쓰는 것이 좋습니다. 로컬 스토리지에 저장된 데이터는 삭제할 때까지 유지됩니다.

다만 한가지 알아두어야 할 것은 사용자가 로컬 스토리지든 세션 스토리지든 마음대로 접근하여 데이터를 보고 지우고 변조할 수 있다는 것입니다. 그래서 민감한 데이터는 로컬 스토리지나 세션 스토리지에 저장하지 않는 것이 좋습니다.

두 저장소의 저장용량은 대략 2.5mb~5mb정도로 보면 됩니다만, 가끔 브라우저나 기기별로 상이하기도 합니다.

쿠키

쿠키는 만료 기한이란 특성이 있습니다. 브라우저 개발자도구 콘솔 창에 document.cookie를 브라우저에 치면 쿠키 정보를 볼 수 있습니다. (HTTP only flag로 자바스크립트에서 쓸 수 없게 막아둔 쿠키는 나오지 않습니다.) 쿠키에는 4kb의 용량 제한이 있고, 쿠키가 저장되면 매 서버 요청마다 서버로 쿠키가 같이 전송됩니다.

위 두 저장소의 데이터는 서버로 자동 전송되지 않습니다.

쿠키의 보안 문제

만일 SSL을 사용하지 않고 있다면, 쿠키 정보는 전송 도중 탈취당할 수도 있습니다. 특히 공용 와이파이를 사용하는 경우에 그렇습니다. 긍정적인 부분을 보자면, 쿠키는 XSS(Cross Site Scripting) 인젝션과 같은 보안 위협에 대한 방어방법이 있긴 합니다. HTTP only flag를 사용하면 모던 브라우저들은 자바스크립트에 의한 쿠키와 밸류에 대한 접근을 막아줄 것입니다. 사용자의 로그인 정보와 같은 토큰을 담고 있는 인증 쿠키에게 이러한 특성은 매우 중요합니다. 만일 해당 토큰이 탈취당하고 누군가 동일한 토큰을 사용하면 그 토큰을 사용하던 사용자의 모든 권한을 가질 수 있습니다.

로컬 스토리지 vs 세션 스토리지 vs 쿠키

기능의 관점으로 봤을 때, 쿠키, 세션 스토리지, 로컬 스토리지는 모두 문자열을 저장할 수 있게 해줍니다. 암묵적으로 어떠한 값으로 변환될 수 있는 문자열도 물론 가능하지만, 오브젝트나 배열과 같은 값을 직접 넣을 수 없습니다. 그러길 원한다면 일단 JSON과 같은 직렬화가 가능한 데이터 형식으로 문자열을 저장하고 읽은 후에 파싱을 해주어야 할 것입니다.

로컬 스토리지, 세션 스토리지, 쿠키는 모두 "same-origin" 규칙에 영향을 받습니다. 이 말은 브라우저가 도메인마다 다르게 관리한다는 뜻입니다.

레퍼런스

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies
https://github.com/yangshun/front-end-interview-handbook/blob/master/contents/en/html-questions.md