전통적 서버사이드 웹 애플리케이션에서 브라우저는 정적 데이터만 렌더링하며 서버 응답이 필요할 경우 페이지를 새로 작성하는 형태로 동작했다. 하지만 비동기 통신과 동적 렌더링을 위한 라이브러리, 프레임워크가 등장하며 페이지 새로고침 없이 실시간으로 페이지 전체 혹은 일부를 변경 시킬 수 있게 되었다. 로그인 상태도 마찬가지로 서버 요청을 통한 화면 변경과 같이 진행 되며 로그인 상태가 유지 되고 있는지, 어떤 이유로 로그아웃이 되었는지 확인해왔다. 그렇다면 동적 환경에서 로그인 상태를 확인 할 수 있는 효율적인 방법은 무엇이고 어떻게 효율적으로 작성할 수 있는지 알아보자.

방법 몇가지

나의 경우 로그인을 확인 해야하는 이유가 몇가지 있었다.

1. 다른 환경에서 로그인 할 경우 기존 로그인 환경에서 로그아웃 처리

2. 일정 시간 경과 후 로그아웃 처리

3. 장기간 비활성화 된 상태에서 활성화 될 경우 로그인 확인 (모바일 / 노트북 인터넷 탭)

그런데 화면 활성화 후 새로고침 전까진 계속해서 로그인 확인이 제대로 되지 않는 이슈가 계속 생겼다.

시도해본 방법은 다음과 같았다.

• 웹소켓

  • 로그인 확인만 하는데 리소스 비용이 과하며 비효율적이라 포기.

• 이벤트 리스너

  • PC, 모바일 환경에서 완벽하게 동작하는 이벤트 리스너를 구현하기 어렵다. (지속적인 이슈가 발생한 이유)

• SWR

  • 포커스, 인터벌, 재연결 시 자동으로 갱신해주며 까다로운 구현이 필요 없다.

구현

계속해서 이벤트 리스너를 통해 시도해 보았지만 모든 모바일 / PC 환경에서 적용 하기 어려워 계속 이슈가 생겼는데 SWR로 구현하니 이슈도 없고 소스도 매우 깔끔해졌다.

예시를 보자.

웹소켓 예시는 미작성

• 이벤트 리스너

useEffect(() => {
  window.addEventListener('focus', callback);

  return () => {
    window.removeEventListener('focus', callback);
  }
}, [dependency]);

• SWR

const { data, error } = useSWR('/login/check', fetcher, { refreshInterval: 10000 });

if (error) {
  // 에러 처리
}

위와 같이 SWR로 작성 할 경우 매우 간단하게 구현 할 수 있다.

#References

SWR 공식문서 - 자동갱신