선정 이유
- 면접에서 종종 등장하는 키워드
- 곧 있을 최종 프로젝트에 도움이 될 수 있을만한 키워드
Cookie?
쿠키는 브라우저에 저장되는 작은 크기의 문자열로, HTTP 프로토콜의 일부이다.
보통은 웹 서버에 의해 만들어지며, 서버가 HTTP 응답 헤더의 Set-Cookie에 내용을 넣어 전달하면 브라우저에서 자체적으로 저장한다.
동일한 도메인(서버)로 요청을 할 때마다 쿠키의 내용을 함께 전달한다.
클라이언트 식별과 같은 인증에 가장 많이 쓰인다.
읽기
document.cookie 로 값을 읽을 수 있다.name - value 쌍으로 이루어져 있으며 ; 로 구분된다.
원하는 값을 찾기 위해 정규식이나 배열 관련 메서드를 사용할 수 있지만… 글쎄?
쓰기
접근자 프로퍼티인
document.cookie 에 값을 할당하면 된다.document.cookie = "user=minjong;"; // 이름이 'user'인 쿠키의 값만 갱신함 console.log(document.cookie);
이름과 값에 제약이 없기 때문에 유효성을 일관성 있게 처리하기 위해
encodeURIComponent() 로 이스케이프 하는 것이 좋다.쿠키의 제약사항
name=value쌍은 4KB를 넘을 수 없습니다. 이 용량을 넘는 정보는 쿠키에 저장할 수 없다.
- 도메인 하나당 저장할 수 있는 쿠키의 개수는 한정되어있다.
domain
쿠키는 도메인 별로 관리된다.
domain 옵션에 아무 값도 넣지 않았다면, 쿠키를 설정한 도메인에서만 쿠키에 접근할 수 있다.blog.minjongdev.com 에서 쿠키가 설정됐다면 www.github.com 에서는 접근할 수 없다.
domain 옵션에 루트 도메인을 설정하는 경우 서브도메인에서 접근가능하다.minjongdev.com 라고 명시적으로 설정했다면 blog.minjongdev.com 에서도 접근 가능하다.
path
path 옵션과 일치하는 경로나 하위 경로에 있는 페이지만 쿠키에 접근 가능하다.path=/ 처럼 루트로 설정하는 경우 해당 도메인의 모든 페이지에서 쿠키에 접근이 가능하다.백엔드 API 주소가 api.devcourse.com 인 경우
- localhost 에서는 확인할 수 없다.
- devcourse.vercel.app 주소로 웹사이트 배포한 경우 확인할 수 없겠지만 프록시 설정을 통해 동일한 도메인으로 보내는 것 처럼 처리할 수 있다면 확인 가능하다.
Set-Cookie할 때 도메인 옵션을 명시적으로 넣었는지,path옵션은 제대로 설정했는지 확인이 필요하다.samesite=strict옵션을 확인해야한다.
expires, max-age
expires 나 max-age 옵션이 지정되어있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 삭제된다.expires 나 max-age 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제되지 않는다.secure
HTTPS로 통신하는 경우에만 쿠키를 전송하는 옵션이다.
httpOnly
클라이언트 측 스크립트가 쿠키를 사용할 수 없게 하는 옵션으로,
document.cookie 를 통해 쿠키를 볼 수도 없고 조작할 수도 없게된다.Storage?
브라우저에서 제공하는 저장공간으로
localStorage 와 sessionStorage 를 사용하면 브라우저에 key - value 형태로 값을 저장할 수 있다.쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.
웹 스토리지 객체는 오리진별로 관리 되기 때문에 프로토콜이나 서브 도메인이 다르면 데이터에 접근할 수 없다.
localStorage
오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
브라우저나 OS가 재시작하더라도 데이터가 삭제되지 않는다.
sessionStorage
현재 활성화 되어 있는 탭 내에서만 데이터가 유지된다.
하나의 탭에 여러 iframe이 있는 경우엔 데이터가 공유된다.
페이지를 새로 고침할 때는 데이터가 보존 되지만, 탭을 닫는 경우에는 삭제된다.
storage event
localStorage 나 sessionStorage의 데이터가 갱신되면 storage 이벤트가 발생한다.
storage 이벤트는 이벤트를 직접 발생시킨 스토리지를 제외하고, storage에서 접근 가능한 window 객체 전부에서 일어난다.
같은 페이지가 두 개의 브라우저 창에 띄워 있는 경우 아래 코드를 실행하면?
// window.addEventListener('storage', () => {})와 같다. window.onstorage = event => { if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); }; localStorage.setItem('now', Date.now());
