[Nuxt3] useCookie가 만료(expired)되어도 남는 문제

Tags

Created

2023-12-11 오후 14:03

Updated

2023-12-29 오후 18:25

Nuxt3에는 cookie를 편하게 읽고 쓸 수 있도록 해주는 useCookie라는 Composables이 있는데요. 저는 블로그에서 1시간 동안은 쿠키에 방문자 수를 기록해서 일정 시간동안에는 새로운 방문자 수를 보여주지 않으려고 했습니다. firebase에 부담을 줄이기 위해서죠

그래서 cookie를 1시간 뒤에 만료되도록 하기 위해 maxAge 옵션을 넣어줬고

javascript

      // 1시간뒤에 만료되는 쿠키
const cookie = useCookie("bc6109-visitor", {
  path: "/",
  maxAge: 60 * 60,
});

실제로 만료가 되었음에도 사라지지는 않았습니다.

그래서 제가 생각한 방법은 쿠키 값을 새로 넣을 때 현재 시간을 넣는 거였어요.

javascript

      cookie.value = {
  // ...
  timestamp: Date.now(),
};

그래서 쿠키가 없거나 현재 시간과 어느정도 차이가 나면 새로 cookie를 발급하고 다시 기록을 하는거죠.

javascript

      // 쿠키가 없거나 1시간이 지났다면 
if (!cookie.value || Date.now() - cookie.value.timestamp > 60 * 60 * 1000) {
  // 방문자수를 새롭게 기록
	const newVisitors = // ...
  cookie.value = {
    visitors: newVisitors,
    timestamp: Date.now(),
  };
}

만약에 쿠키가 있다면 그 값을 가져와서 그대로 사용하면 되겠죠.

javascript

      else {
	const visitors = cookie.value.visitors;
}

정리하면 이렇게 사용하시면 됩니다.

javascript

      // 1시간뒤에 만료되는 쿠키
const cookie = useCookie("bc6109-visitor", {
  path: "/",
  maxAge: 60 * 60,
});

// 쿠키가 없거나 1시간이 지났다면 
if (!cookie.value || Date.now() - cookie.value.timestamp > 60 * 60 * 1000) {
  // 방문자수를 새롭게 기록
	const newVisitors = // ...

	// cookie 덮어쓰기
  cookie.value = {
    visitors: newVisitors,
    timestamp: Date.now(),
  };
} else {
	const visitors = cookie.value.visitors;
}