[FE_Bootcamp] 56일차_쿠키와 세션

1. 쿠키

가끔 해외 페이지를 들어가 보면 팝업이나 배너로 'Accept All Cookie'라는 말을 볼 수 있다. 사이트별로 다르지만 모든 쿠키를 허용해야 페이지 접속이 허가되는 곳도 있고, 반대로 모든 쿠키를 거부해도 접속 가능한 곳도 있다.

대체 쿠키가 뭐길래 페이지에 들어갈 때 마다 귀찮은 설정을 해줘야 하는 것일까?

쿠키는 서버에서 클라이언트에 저장하는 정보이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있고, 이를 통해 장바구니나 로그인 유지 등의 기능을 사용할 수 있다.

서버는 쿠키를 이용하여 클라이언트에 데이터를 저장하고 이 데이터를 다시 불러와 사용할 수 있다. 하지만 아무때나 불러올 수 있는 것이 아니라, 데이터를 저장한 이후 특정 조건들이 만족되어야 다시 가져올 수 있다.

이 조건들은 HTTP 헤더를 통해 쿠키 옵션으로 설정할 수 있다.

Domain : google.com같은 서버의 도메인. 도메인이 같아야 쿠키 전송 가능
Path : 서버가 라우팅할 때 사용하는 경로. path를 포함하는 하위 경로로 요청을 하더라도 쿠키 전송 가능
MaxAge / Expires : 쿠키의 유효기간. MaxAge는 쿠키 저장으로부터 몇초 후에 삭제될지. Expires는 언제 삭제될지를 정한다
Secure : 사용하는 프로토콜에 따른 쿠키의 전송 여부를 결정하는 옵션. Secure 옵션이 true로 설정된 경우 HTTPS를 이용하는 경우에만 쿠키 전송 가능
HttpOnly : 자바스크립트로 브라우저의 쿠키에 접근이 가능한지 여부를 결정
SameSite : Cross-Site 요청을 받은 경우, 요청에서 사용한 메서드(e.g. GET, POST, PUT, PATCH …)와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부 결정

이제 왜 페이지에서 쿠키를 허용하라는지 알 것 같다.

상기한 EPL 서버에서 local(내 컴퓨터)에 정보를 저장하면, 내가 페이지 안에서 어떤 행동을 할 때 마다 쿠키에 저장된다.

예를 들면 득점 순위를 조회했다고 하자. 그럼 local에 저장된 쿠키에는 '득점 순위 조회'라는 행동이 저장된다.

이후 페이지에 다시 접속하면, 쿠키는 '득점 순위 조회'라는 행동이 담긴 쿠키를 다시 서버로 전달한다.

서버는 이 쿠키를 보고 '아하, 이 사용자는 득점 순위를 보고 있었군!'이라고 판단하여 득점 순위 관련 기사를 띄워주거나, '득점 순위 페이지로 이동할까요?' 등의 링크를 보내주게 된다.

메이플스토리는 홈페이지에서 로그인을 하고, 게임 시작을 누르면 클라이언트가 실행되는 방식이다.

따라서 일단 게임에 접속하고 나면 홈페이지를 이용할 일이 거의 없다.

약 1~2시간 정도 게임을 하다가 잠깐 확인해볼 것이 있어 홈페이지에 들어가면 위와 같은 메시지가 뜨면서 자동으로 로그아웃이 된다.

세션은 또 뭐길래 자기 멋대로 로그아웃을 시키고 그런걸까,..,,.?

세션은 쿠키와 반대로 클라이언트의 정보를 서버에 임시 저장하는 것을 뜻한다. 데이터 형태로 존재하는 쿠키와는 다르게, 세션은 '상태'이며 로그인처럼 '인증이 필요한 행위'를 통해 인증에 성공한 상태를 뜻한다.

세션이 만들어지면 서버는 세션 저장소에 새로운 세션을 저장하고, 이 세션의 id를 클라이언트에게 전달한다.

이때 쿠키가 사용되며 쿠키의 헤더에 세션 id를 추가로 넣어 전달하는 것이다.

세션은 일정 시간동안 응답이 없다면 정보가 유지되지 않도록 한다. 이것을 '세션이 만료되었다'라고 하는 것이다.

메이플스토리 홈페이지에 접속해놓고 게임을 하면, 홈페이지에서는 아무런 요청도, 응답도 생기지 않는다. 그렇다면 세션은 자동으로 사라지면서 정보를 삭제하고, 로그인 정보가 사라진 홈페이지에서는 세션 만료와 동시에 로그아웃이 되는것이다.

※장바구니로 알아보는 쿠키와 세션