[Project/Nextjs] Custom Session Id

For

• KinesisClient 를 통한 로그 데이터 수집에 있어 30분동안 사용자가 idle 하면 만료되는 session_id를 담으려고 했다.

Steps taken

• 처음에는 30개의 랜덤한 문자열로 이루어진 custom session id를 쿠키에 저장하여 가져다 쓸 수 있도록 구현 하려고 했다.
• 쿠키의 만료 시간을 30분으로 정하고, 사용자의 움직임이 있을 때 그 시간을 계속 30분씩 저장하는 방식으로 구현 했다.
• 사용자의 움직임을 detect 하기 위해 ActivityDetector 라는 모듈을 인스톨 해서 쓰게 되었다.
• 사이트 전반에 걸쳐 움직임을 detect 해야 하므로, app.js 에 ActivityDetector를 import 했다.
• ActivityDetector을 사용 하기 위해, 일단 어떤 종류의 activity 를 track 할것 인지를 다음과 같이 정해주었다.

  const customActivityEvents = [
    "click",
    "mousemove",
    "keydown",
    "DOMMouseScroll",
    "mousewheel",
    "mousedown",
    "touchstart",
    "touchmove",
    "focus",
  ];

       <ActivityDetector
      activityEvents={customActivityEvents}
      enabled={true}
      onActive={() => onActive()}
    /> 
    <Component {...pageProps} />

• onActive 함수에는 다음과 같이 코드를 짜서 사이트 로드시 useEffect 로 30분 짜리 만료 시간을 가진 session_id 를 쿠키에 저장하고, 사용자 acitivity 가 감지가 되면 함수를 돌려서 session_id 가 만료되어 undefined 라면 다시 generateSessionId 를 돌려서 발생한 새로운 난수를 주고, 그게 아니라면 session_id 는 쿠키에서 다시 가져와 동일한 난수를 주고 expires 만 30분씩 늘리도록 했다.

    const onActive = () => {
    let date = new Date();
    date.setTime(date.getTime() + 30 * 60000);
  
    if (
      document.cookie.split("session_id=")[1]?.split(" ")[0].replace(";", "") ==
      undefined
    ) {
      document.cookie = `session_id=${generateSessionId()}; expires=${date.toUTCString()}; path=/`;
    } else {
      document.cookie = `session_id=${document.cookie
        .split("session_id=")[1]
        ?.split(" ")[0]
        .replace(";", "")}; expires=${date.toUTCString()}; path=/`;
    }
  };

• 코드를 작성하고 보니 사용자 액션이 있을 때 마다 onActive 함수를 계속 호출 하는것에 대한 효율에 대한 의구심도 들고, 무엇보다 쿠키의 expire 에 대한 지식 부족으로 인해 쿠키에 GMT 기반으로 저장 되는것을 "왜 시간이 이상하게 저장되지?" 하며 한국시간과 맞춘다고 9시간을 더해버리는 만행을 저질러서(만료시간이 9시간 30분인 쿠키를 만든것이다..) 쿠키가 절대 expire 되지 않았다.. 쿠키의 만료 시간을 1분으로 정해놓고 테스트를 해보며 왜 쿠키가 삭제되지 않을까 머리를 쥐어 뜯으며 이것저것 시도를 해보았지만 절대 바뀌지 않는(expire 되지 않았으므로) session_id 값을 보며 절망에 빠졌었다. 쿠키는 GMT 를 기반으로 expires 를 저장 해야 한다!!!!!!!!!!!!!!!!!

• 쿠키 만료 시간과의 삽질 이후, google analytics가 제공하는 세션 아이디를 가져와 사용 하기로 했다. 이에 대해서는 다음 글에서 다루도록 하겠다. AcvitivyDetector는 모든 사용자 action 을 detect 해서 쿠키를 업데이트 해야 하는 니즈에 대한 비효율성과, cookie expire의 삽질로 인해 내 dead babies 폴더에 추가 되었지만 나중에 분명히 유용하게 쓸일이 있을거 같아 기록하게 되었다.