📌 쿠키(Cookie)

• 말로만 들어도 침 고이는 이 쿠키는 난 못 먹는 쿠키다..

• 단순 브라우저 저장소가 아닌 서버(백엔드)와 정보를 주고받을 때 사용하는 저장소이다. 서버와 브라우저(클라이언트) 간의 지속적인 데이터 교환을 위해 만들어졌다.

• 서버와 긴밀하게 연결되어있는 저장소로, 서버에서 쿠키로 데이터를 넣을 수 있다. 즉, 서버에서 데이터를 쿠기에 넣어 브라우저로 보내면 브라우저에 자동으로 저장된다. 쿠키에 저장된 데이터는 서버에서 요청이 있을 시 다시 백엔드로 보낼 수 있다.

• 브라우저에서 매 요청마다 연결, 해제가 반복되면서 새로운 사용자로 인식되는 단점이 있지만 쿠키와 세션을 통해 브라우저를 종료했다가 다시 접속해도 해당 로그인 상태를 유지할 수 있다.

나는 브라우저로부터 Refresh Token 발급 요청이 들어오면 해당 토큰을 발급받아 쿠키에 저장하여 응답해주었다. 그럴 때 setHeader() 메소드를 통하여 Header의 쿠키에 저장하여 보내주었다.

res.setHeader('Set-Cookie', `refreshToken=${refreshToken}`);
//결과 : 브라우저의 쿠키에 'refreshToken=asdfqwerzxcv...' 이런 식으로 저장된다.

---

📌 로컬/세션 스토리지

장점

• 서버에 불필요한 데이터를 저장해달라고 요청하지 않아도 된다.
• 용량이 크다.(브라우저마다 차이는 있음)

단점

• HTML5를 지원하지 않는 브라우저의 경우 사용이 불가하다.

로컬 스토리지, 세션 스토리지의 큰 차이점은 데이터의 영구성이다!!!

로컬 스토리지(Local Storage)

• 브라우저를 껐다가 다시 켜도 데이터가 유지된다.

• 지속적으로 필요한 데이터(자동 로그인 정보 등)는 로컬 스토리지에 저장한다.

• 'key-value'로 이루어진 저장소이다.

• 보안에 민감한 데이터는 넣어두면 안됀다.

세션 스토리지(Session Storage)

• 브라우저를 끄면 데이터가 사라진다.

• 잠깐 필요한 일회성 데이터(일회성 로그인 정보 등)는 세션 스토리지에 저장한다.

---