인프런 커뮤니티 질문&답변
작성한 질문수
캐싱관련 질문있습니다.
해결된 질문
24.05.11 00:21 작성
·
260
1
❗질문 작성시 꼭 참고해주세요
최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.
맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다.
에러메세지는 일부분이 아닌 전체 상황을 올려주세요!
안녕하세요 저는 현재 웹으로 다른걸 개발하고 있는데, react-query로 auth를 개발하신거 참고하려고 강의내용을 따라가던중 버그같은게 있어서 질문드립니다.
저는isLoggedIn 상태를 이런식으로 설정해보았는데요.
const isLoggedIn = refreshTokenQuery.isSuccess;
예를 들어 제가 프로필 페이지에 있는데
isLoggedIn ? 개인프로필 내용 보여주기 : 로그인 버튼만 보여주기
인데요.
저는 로그인을 oauth 로그인만 구현해둔 상태입니다(google,kakao,naver)
예를들어 제 프로필페이지 isLoggedIn가 false인 상태이니
"로그인하세요" 버튼이 보일 것이고 클릭하면 bottom sheet로 올라오고 카카오 로그인 버튼을 누르면 카카오의 약관동의화면이나 아이디,비밀번호입력하는 페이지가 렌더링되겠죠
그 페이지에서 브라우저 뒤로가기버튼을 클릭하여 다시 프로필페이지로 이동하면
useGetRefreshToken을 타면서 getAccessToken함수가 호출되고 디스크 캐시로 부터 받아온 data를 가져와 isSuccess 상태가 되어버리면서 isLoggedIn은 true인 상태가 되어버리고 프로필페이지 접근 인가가 되어버립니다.
구글링해보니 백포워드 캐시때문에 그렇다고 하는데, 해결방안이 GetAccessToken api header에 Cache-control:no-store옵션을 주면 cache를 거부하게 만드는 방법이 있더라구요.
(근데 저같은경우는 이런 옵션을 주면 getAccessToken api가 호출이 안되더라구요..)
근데 의문점은 로그아웃하면서 'auth'에 해당하는 캐싱된 쿼리들을 무효화 시켰을텐데 캐싱된 데이터를 가져온다는게 좀 이해가 안됩니다. queryclient.removequeries 도 안되더라구요.
답변 2
0
2024. 05. 13. 20:25
현재는 해결되셨을까요? 구현도 다르게 하셨고 프로젝트도 다른걸 만들고 계시기도하고, 로그인 구현도 어떻게 되어있는지 제가 알 수가 없어서 도와드리기가 어렵네요! 로그아웃 onSuccess 에서 queryClient.resetQueries로 리셋도 해보시겠어요?
0
2024. 05. 11. 00:27
안녕하세요, 인프런 AI 인턴입니다.
질문자님께서 마주친 문제는 로그아웃 이후에도 캐싱된 데이터가 가져와져서 isLoggedIn 상태가 예상과 다르게 처리되는 상황에 대한 것으로 이해됩니다. 이와 유사한 문제로, 로그아웃 시 캐시를 적절히 처리하지 않아 발생하는 문제가 종종 있습니다. 질문자님의 상황에서는 "auth" 카테고리의 쿼리 데이터를 적절히 제거하지 못했을 때 발생할 수 있습니다.
캐싱된 데이터와 관련해 문제 해결 방안은 여러 가지가 있지만, 먼저 react-query를 위한 올바른 접근 방법을 다시 검토하는 것이 중요합니다. 캐싱된 데이터와 관련하여 사용되는 query를 무효화하거나 삭제하는 다양한 방법들이 예시로 있으며, 주어진 상황에서 .invalidateQueries, .removeQueries 혹은 적절한 HTTP 헤더 설정을 통해 문제를 해결할 수 있습니다.
특히, 오류 상황 해결에 도움이 될 수 있는 예시로 staleTime과 invalidateQueries에 대한 질문이 유용할 수 있습니다. 이 질문에서는 특정 상황에서 데이터 캐시를 어떻게 처리할지에 대해 논의됩니다. 해당 내용은 여러분의 상황에는 직접적으로 관련 없을 수도 있지만, react-query에서 캐싱된 데이터를 관리하는 방법에 대한 이해를 돕고자 합니다.
이 내용은 캐시 데이터의 생명 주기와 관련된 설정을 다룹니다. react-query에서는 staleTime을 통해 캐시된 데이터가 얼마나 오랫동안 “신선(fresh)“한 상태로 유지될지 설정할 수 있습니다. 이는 로그아웃 후에도 캐시 데이터가 잘못된 상태(isLoggedIn이 true로 남는 등)로 유지되는 문제를 방지하는 데 중요한 역할을 할 수 있습니다.
또한, Cache-Control 헤더 설정에 대해서는 서버 측에서 캐시 방지 정책을 구현하는 것이 중요합니다. 질문자님께서 언급한 Cache-control: no-store 옵션은 클라이언트 및 중간 캐시(예: 프록시)에 해당 응답을 캐시하지 말라는 지시어입니다. 만약 해당 설정 후 getAccessToken API 호출에 문제가 생긴다면, 서버 로그나 네트워크 트래픽을 분석하여 요청이 정상적으로 처리되고 있는지 확인해보세요.
질문자님의 경우, 로그아웃 관련 캐시 처리 시 queryClient.invalidateQueries('auth') 또는 queryClient.removeQueries('auth') 사용 방법에 대해 재검토하시는 것이 좋겠습니다. 이 메소드들은 캐시를 적절히 관리하기 위해 속성 이름(auth)이 정확해야 합니다. 또한, react-query의 최신 버전에서 더 나은 방법이 도입되었는지 확인해볼 필요가 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 05. 13. 22:27
네 resetQueries로 리셋도 해보고 removeQueries도 해봤는데 안먹히더라구요
원인은 bfcache 때문이여서 isLoggedIn은 다른 방식으로 풀긴했습니다만,
removeQueries로 삭제해도 bfcache가 삭제되지않는 것은 좀 이해가 안되네요