로더에서 API 호출이 잦다

[leegwae]

현재 상황

1. 로그인했는지 검사하는 로더가 많다
2. 로그인했는지는 액세스 토큰이 유효한지로 판별한다
3. 액세스 토큰이 유효한지는 내 정보 가져오기 API 요청했을 때 성공 응답이 오는가이다

한편, 로그인 페이지랑 회원가입 페이지도 로그인했는지 로더에서 검사한다. 로그인했으면 홈 페이지로 리다이렉트해주기 위해서이다. 그런데 홈 페이지도 로그인했는지 로더에서 검사한다. 로그인 안했으면 로그인 페이지로 리다이렉트해주기 위해서이다. 그렇다면 다음과 같은 상황이 벌어진다.

인메모리에 유효한 액세스 토큰이 있다고 하자

1. 사용자가 로그인 페이지에 접근 시, 로그인 페이지 로더에서 내 정보 가져오기 API를 요청한다.
2. 액세스 토큰이 유효하므로 성공 응답이 오고 홈 페이지로 리다이렉트한다.
3. 홈 페이지 로더에서 내 정보 가져오기 API를 요청한다.
4. 액세스 토큰이 유효하므로 성공 응답이 오고 홈 페이지로 그대로 들어간다.

이건 로그인 페이지에서 로그인 성공 했을 때도 마찬가지이다. 방금 로그인 버튼 눌러서 로그인 했는데 홈 페이지로 리다이렉트하자마자 또 로그인을 검증해야한다

어떻게 API 호출 횟수를 줄일 것인가?

리다이렉트할 때 url에 정보를 넘겨줄 수도 있고... 하지만 가장 전통적인 방법은 캐싱이다.

1. 특정 시간 동안은 유효하다고 가정하고 캐싱해주기
2. 특정 횟수 동안은 유효하다고 가정하고 캐싱해주기: 예를 들어 발급받으면 캐시에 넣어놓고 그다음 요청에서 쓰면 바로 비워주는 식이다

캐시를 직접 구현할 수 있겟지만 우리는 React Query를 쓰고 있으므로 해당 캐시를 사용해볼 수 있겠다. 메인테이너 블로그에 아주 잘 나와있다...