'오늘 하루 그만 보기' 정보는 어디에 저장이 될까?

우리는 웹 사이트에 접속했을 때 종종 모달창을 마주한다.
그리고 하단에 '오늘 하루 그만 보기' 란 버튼을 클릭한 경험이 있을 것이다.
나는 오늘 하루 그만 보기를 클릭하면, 브라우저에서는 어떤 일이 일어나는지 정리를 해보려고 한다.

출처. https://www.ktmmobile.com/main.do

 
 

'오늘 하루 그만 보기'가 있는 모달에서 예상 되는 유저 플로우는?! 

유저 플로우를 생각해 보면 아래와 같다.

 
다시 동일한 날짜에 새 탭으로 동일한 사이트에 들어갔을 때 우리가 예상하는 플로우는, 아래와 같이 예상 된다.

 
그렇다면! 
브라우저는 어떻게 이 유저가 '오늘 하루 그만 보기'를 클릭한 유저인지 알 수 있을까?

 

즉, 브라우저에서 데이터를 어떻게 주고 받고 있을까?

여기서 우리는 HTTP 프로토콜 개념을 알아야 하는데,
HTTP는 서버와 클라이언트가 서로 소통(요청/응답)할 때 지켜야 하는 규약을 말한다.
클라이언트는 서버에게 request(요청) 보내고 서버는 클라이언트에게 request에 대한 response(응답) 보내며 통신을 끝낸다.
따라서 이 통신이 끝났기 때문에, 클라이언트에서 다시 요청을 할 때마다 인증을 계속해주어야 하는 문제가 생긴다.
페이지가 바뀔 때마다 로그인을 새로 해야 한다면, 얼마나 짜증이 날까!

 

그렇다면 위 문제를 어떻게 해결할 수 있을까?

같은 유저임을 어딘가에 저장을 해두면 계속 인증을 하지 않아도 될 것이다!
여기서 저장하는 공간을 브라우저 스토리지라고 말한다. 스토리지 뜻 그대로 저장소를 의미한다.
 
브라우저 스토리지는 개발자 도구의 Application 탭에서 확인할 수 있다.

스토리지의 종류로는,
웹 스토리지인 Local storage와 Session storage가 있고 쿠키가 있다.
 
 

쿠키에 대해 좀 더 알아보자!

쿠키는 서버가 클라이언트에게 전송하는 데이터 파일이다.
이름, 값, 도메인 정보, 경로 정보, 만료 일자 등이 포함되어 있는 데이터 파일이라고 생각하면 된다. 

쿠키에 저장되는 정보

쿠키는 데이터를 서로 주고받기 때문에 서버로 계속 전송이 되는 구조이며 Request Header에 넣어서 자동으로 서버에 전송이 된다.
이로 인해서 서버에 불필요하게 계속 데이터가 전송되어서 데이터 낭비가 발생한다는 단점이 있다. 또한 보안에 취약하기 때문에 중요한 정보를 쿠키에 담아두면 안 된다.
 
쿠키의 단점을 보안해서, HTML5부터 웹 스토리지가 나오게 되었는데 오늘은 쿠키에 대해서 알아보고, 다음 블로그에 웹 스토리지에 대해 좀 더 자세하게 정리해 볼 계획이다.
 
쿠키는 만료기간에 따라 세션 쿠키와 영속 쿠키로 나뉘게 된다. 즉 만료 날짜를 지정하지 않으면 세션 쿠키로 간주된다.

• 세션 쿠키는 디스크에 기록이 되지 않기 때문에 브라우저가 종료되는 시점에 삭제된다.
• 영속 쿠키는 Expires 속성에 명시된 날짜에 삭제되거나, Max-Age 속성에 명시된 기간 이후에 삭제된다.

그럼 아까, 유저 플로우를 그리며 브라우저는 어떻게 이 유저가 '오늘 하루 그만 보기'를 클릭한 유저인지 알 수 있을까?  궁금했는데
여기서 답은 만료 날짜를 지정해서 쿠키에 저장해 두면 하루에 한 번만 모달을 띄울 수 있게 된다.
 

출처. https://thebook.io/080334/0209/

 

 

결론

처음 모달이 뜬 사이트를 다시 살펴보자.
나는 모달창이 뜬 것을 확인하였고, '오늘 하루 그만 보기'를 클릭하였다.

출처. https://www.ktmmobile.com/main.do

처음 접속 시

'오늘 하루 그만보기' 클릭 시 맨 상단에 /main.do Name인 쿠키가 생김

 
그랬더니, 쿠키 저장소를 비교해 보면 새로운 쿠키 하나가 생겨 있다.
오늘 날짜가 2024-07-22일이기 때문에 하루 만료 일자인 2024-07-23일로 되어있다. 
새 탭으로 동일한 사이트에 들어왔을 때도 쿠키는 유지가 되어 있음을 확인할 수 있다.