문제 정의

여러 사용자가 로그인하고 로그아웃하는 시나리오를 처리하는 과정에서 tanstack-query의 useQuery 훅을 사용하여 서버로부터 데이터를 패칭하였는데, queryKey 배열에 accessToken을 포함하지 않아 사용자 간 데이터가 섞이는 문제가 발생했습니다. 구체적으로, 사용자 A가 로그아웃하고 사용자 B가 로그인할 때, 이전 사용자 A의 데이터가 여전히 캐시에 남아 사용자 B에게 잘못된 데이터가 표시되는 상황이 발생했습니다. 이러한 문제는 데이터 일관성과 사용자 경험에 심각한 영향을 미쳤습니다.

해결 과정

문제를 해결하기 위해 tanstack-query의 queryKey 배열에 accessToken을 포함시켜, 각 사용자의 데이터 패칭을 고유하게 식별할 수 있도록 변경하였습니다. 이를 통해 사용자마다 독립적인 캐시가 생성되며, 데이터 혼합 문제를 방지할 수 있었습니다. 다음과 같은 단계를 통해 문제를 해결했습니다:

1. 문제 원인 분석

   • useQuery의 queryKey가 단순히 데이터의 유형(예: 'todos')만을 포함하고 있었기 때문에, 모든 사용자가 동일한 캐시를 공유하게 되어 데이터가 섞이는 문제가 발생했습니다.
   • 사용자 A가 로그아웃한 후 사용자 B가 로그인하면, 동일한 queryKey를 사용하여 데이터를 패칭하게 되어 이전 사용자의 데이터가 남아 있었습니다.

2. accessToken을 queryKey에 포함시키는 방법 학습

   • TanStack Query의 queryKey는 배열 형태로 구성되며, 이를 통해 각 쿼리를 고유하게 식별할 수 있습니다.
   • accessToken을 queryKey의 일부로 포함시켜, 각 사용자의 데이터를 독립적으로 캐싱하도록 설정할 수 있음을 이해했습니다.

3. 코드 수정 및 적용

   • useQuery 훅을 사용하는 모든 곳에서 queryKey에 accessToken을 포함하도록 수정했습니다.
   • 이를 통해 각 사용자의 쿼리가 고유한 queryKey를 가지게 되어, 데이터 캐싱이 사용자별로 분리되었습니다.

   수정 전 코드 예시:

   const { data: todos, error } = useQuery({
     queryKey: ['todos'], 
     queryFn: fetchTodos
   });
   

   수정 후 코드 예시:

   const accessToken = getAccessToken(); // 사용자별 accessToken을 가져오는 함수
   const { data: todos, error } = useQuery({
     queryKey: ['todos', accessToken], 
     queryFn: fetchTodos
   });
   

   • queryKey 배열에 'todos'와 accessToken을 포함시켜, 각 사용자의 쿼리가 고유하게 식별되도록 했습니다.
   • fetchTodos 함수는 accessToken을 인자로 받아, 해당 사용자의 인증 정보를 포함한 요청을 서버로 전송하도록 수정했습니다.

4. 테스트 및 검증

   • 사용자 A로 로그인하여 데이터를 패칭한 후 로그아웃하고, 사용자 B로 로그인하여 동일한 데이터를 패칭하는 과정을 테스트했습니다.
   • 각 사용자의 데이터가 독립적으로 캐시되고, 데이터가 섞이지 않음을 확인했습니다.
   • 다양한 시나리오에서 쿼리 캐시가 올바르게 동작하는지 검증하여, 문제 해결의 효과를 확인했습니다.

결과

queryKey 배열에 accessToken을 포함시킨 후 다음과 같은 개선 효과를 얻었습니다:

• 데이터 혼합 문제 해결: 사용자 A가 로그아웃하고 사용자 B가 로그인할 때, 데이터가 섞이지 않고 각 사용자에 맞는 데이터가 정확히 표시되었습니다.
• 캐시 관리 최적화: 각 사용자의 queryKey가 고유하게 설정됨으로써, TanStack Query의 캐시 관리가 더욱 효율적으로 이루어졌습니다.
• 코드 간결성 및 유지보수성 향상: queryKey를 통해 쿼리를 고유하게 식별함으로써, 코드의 가독성이 높아지고 유지보수가 용이해졌습니다.
• 성능 향상: 불필요한 데이터 패칭이 줄어들어 네트워크 요청이 최적화되고, 애플리케이션의 전반적인 성능이 향상되었습니다.
• 사용자 경험 개선: 데이터 혼합으로 인한 오류가 사라지면서, 사용자에게 일관되고 정확한 정보를 제공할 수 있게 되었습니다.

배운 점 (인사이트)

• queryKey의 중요성 이해: TanStack Query에서 queryKey는 단순한 식별자 이상의 의미를 가지며, 데이터를 고유하게 식별하고 관리하는 데 핵심적인 역할을 한다는 점을 깨달았습니다.
• 사용자별 데이터 캐싱: 사용자 인증 정보(accessToken)를 queryKey에 포함시킴으로써, 사용자별로 독립적인 데이터 캐싱이 가능하다는 점을 이해하게 되었습니다.
• TanStack Query의 유연성 활용: TanStack Query의 강력한 캐싱 및 쿼리 관리 기능을 활용하여, 전역 상태 관리 라이브러리 없이도 효율적인 데이터 관리를 구현할 수 있음을 배웠습니다.