문제 배경

• 서비스에서 로그인 액세스 토큰이 만료되면 자동으로 재발급하도록 구현했으나, 특정 시점에 1초마다 수십 건 이상의 GET 요청이 서버로 동시에 전송되는 문제가 발생하였다.
• AWS EC2 모니터링 도구에서 짧은 시간 내 네트워크 트래픽이 급증하는 이상 현상을 발견하였고, 크롬 개발자 도구의 Network 탭을 통해 accessToken 자동 재요청이 무한 재귀 호출 구조로 인해 과도하게 발생하고 있음을 확인하였다.

[참고] 브라우저 네트워크 탭

[참고] 서버 측 로그

개선

1. 토큰 검사 및 재발급 로직 분리

기존 checkTokenExp 함수는 토큰 만료 확인, accessToken 재발급 요청, 재귀 호출을 동시에 처리하여 과도한 요청의 원인이 되었다.

  // 토큰 만료 시간 측정
  const checkTokenExp = useCallback(async () => {
    const exp = getLoginExp()

    if (typeof exp !== 'number') return

    const currentTime = Math.floor(Date.now() / 1000)
    const expired60SecondsAgo = exp - (currentTime - MINUTE_TO_SEC) //  현재(sec) - 60(sec) = 1분 전 토큰 만료
    setTimeScale(Number(expired60SecondsAgo))

    if (exp <= currentTime - MINUTE_TO_SEC) {
      const isSuccess = await requestNewAccessToken()
      if (isSuccess) checkTokenExp()
    }
  }, [])
  
  // setInterval 을 통해 
    useEffect(() => {
    const timeId = setInterval(checkTokenExp, 1000)

    return () => {
      clearTimeout(timeId)
    }
  }, [checkTokenExp])

해당 함수를 토큰 만료 여부 판단 전용 함수로 수정하고, 재발급 요청은 updateToken() 함수에서 isExpire 상태 변화에 따라 처리하도록 분리하였다.

2. 재귀 호출 제거

기존에는 재발급 성공 시 checkTokenExp()를 재귀 호출하여 setInterval과 중복 실행되는 문제가 있었다.

이 부분을 제거하고, isExpire 상태가 true일 경우에만 토큰을 갱신하도록 변경하였다.