왜 쿠키를 사용하였는가?
이 기능을 구현하면서 흥미로웠던 점은 데이터를 로컬에서 저장하는 방식을 사용해야 한다는 것이었다. 그렇기 때문에 쿠키를 이용해 구현하였던 것이었다. 그런데 우리가 아는 로컬 데이터 저장 방식은 또 있다. 바로 로컬 스토리지와 세션 스토리지가 그것이다. 쿠키 대신 이런 웹 스토리지를 활용할 수도 있지 않았을까?
네이버에서 웹 스토리지 대신 쿠키를 사용한 것은 만료 기한 때문일 것이다. 로컬 스토리지의 경우와는 달리 쿠키는 스스로 만료 기한을 정해서 그 기한이 지나면 자동으로 삭제될 수 있기 때문이다(세션 스토리지는 세션이 종료되면 삭제됨). 그 말은 만료 기한을 정해야 하는 경우가 아니라면 쿠키를 사용하지 않아도 된다는 것. 게다가 쿠키는 매 HTTP 요청 때마다 헤더에 담겨 같이 보내지기 때문에 가벼울수록 네트워크 성능에 유리할 것이다. 그렇기 때문에 최대 쿠키의 크기는 5kb로 한정되어 있기도 하고.
따라서 내가 최종적으로 구현한 방식은 로컬 스토리지로 구현하는 것이 더 유리할 수도 있다. 물론 지금 당장 바꾸기에는 다른 업무가 있어 할 수 없겠지만, 재정비 시 개선 사항으로 넣는 것도 좋을 것 같다.
세션 쿠키와 지속 쿠키
쿠키에 만료 시간이 있다는 것은 다 아는 내용일 것이다. 만료 시간을 정해두면 해당 시간이 지나기 전에는 없어지지 않는다. 그렇다면 만약 만료 시간을 정해두지 않는다면? 이 쿠키는 영원히 지속될까 아니면 사라질까?
쿠키에는 두 가지의 종류가 있다. 바로 세션 쿠키(Session Cookie)와 지속 쿠키(Persistent Cookie)이다.
지속 쿠키는 만료 시간이 정해져 있는 쿠키이다. 브라우저에 쿠키가 저장되어 있다가 만료 시간이 지나면 사라져버린다. 이에 반해 만료 시간을 정해놓지 않은 세션 쿠키는 세션이 종료될 때 같이 사라져버린다. 세션이 지속될 때만 존재하기 때문에 세션 쿠키라 불린다.
지속 쿠키는 따로 만료 시간이 존재하기 때문에 세션이 종료된다 해도 사라지지 않고 유지된다. 나의 경우는 세션이 종료된다 해도 업데이트에 대한 정보를 담고 있는 쿠키가 사라지면 안 되는 케이스였기 때문에, 만료 시간을 넉넉하게 1년 정도 한 지속 쿠키를 사용하게 되었다.
밑의 이미지는 지속 쿠키와 세션 쿠키를 판별할 수 있는 방식이다. 쿠키의 Expires/Max-Age의 값이 Session으로 되어 있으면 세션 쿠키, 날짜가 입력되어 있으면 지속 쿠키이다.
vue에서의 쿠키는 반응형이 아니다
vue를 사용하는 입장에서 당연히 쿠키의 값이 변경될 때마다 그 변화를 탐지하기 위해 computed를 사용하고 싶을 것이다.
<template>
<div v-if="showNotice" class="dashboard-update-notice"/>
</template>
mounted() {
if (Cookies.get('SHOW_UPDATE_NOTICE')) return
const oneMinute = 1 / 1440
Cookies.set('SHOW_UPDATE_NOTICE', 'Y', { expires: oneMinute })
},
computed: {
showNotice() {
return Cookies.get('SHOW_UPDATE_NOTICE') === 'Y'
}
},
methods: {
noCookie() {
Cookies.set('no', 'no')
Cookies.remove('hi')
}
}그런데 직접 해 보면 알겠지만, showNotice의 값이 의도한 대로 동작하지 않는다는 것을 발견하게 된다.
쿠키는 반응형이 아니기 때문에, 직접 그 변화를 감지해서 그 때마다 우리가 원하는 로직을 실행시켜줄 수는 없다. 따라서 computed로 쿠키를 감시하는 방식은 사용할 수 없다(참조).
vue-cookies라는 라이브러리가 있고(참조), 이 친구는 우리가 원하는 것처럼 반응성을 적용할 수 있을까 찾아봤지만, 어차피 weekly download 수도 적고 그렇게 믿을만한 라이브러리는 아니라 판단하였다(최대한 외부 라이브러리 사용은 제한하는 것이 좋다고 판단함).
그 대신 대시보드 페이지에 들어올 때마다 쿠키를 체크해서 해당 값이 있는지의 여부를 판단하는 것이 최선인 듯 하여 그렇게 구현하게 되었다.
