React-query

useQuery를 이용하여 쿼리를 만들 때 다양한 내장 객체를 이용할 수 있다.오늘 다룰 것들은 isFetching과 isLoading이다.이들은 boolean값을 반환하는 객체로 다소 비슷해보여 조금 자세하게 정리하려 한다.아래는 useQuery를 이용하여 isFet

유효기간이 만료된 데이터(오래된 데이터)데이터가 stale로 표시돼도 캐시에서 삭제된 건 아님단지 데이터를 다시 굼증해야 한다는 뜻.Vercel에서 만든 SWR(Stale, While Revalidating)은 서버에서 새 데이터를 가져와 최신 데이터를 보장함쿼리를 포

종속성ex) 'comments', post.id배열의 두번째 인자가 종속성각각의 post.id는 개별적인 staleTime과 캐시 시간을 갖는다.종속성 배열이 다르면 완전히 다른 것으로 간주!때문에 데이터를 가져올 때 쓰는 쿼리 함수의 모든 값은 키의 일부여야 함현재

서버에 네트워크를 호출해 서버에서 실제 데이터를 업데이트하는 것ex) 블로그 포스트 추가, 삭제, 제목 변경 등서버 호출이 성공적이라 가정하고, 잘 안됐을 경우 되돌리는 방법서버에서 받은 데이터를 가져오는 것, Mutation 호출을 실행할 때 업데이트 된 데이터를 가

소규모 앱에서는 useQuery 반환 객체에서 isFetching을 이용했다.reminder!isLoading은 isFetching과 동일하지만 캐시된 데이터가 없다!so~ isFetching은 더 큰 카테고리이고 isLoading\`은 가져오는 작은 카테고리!더 큰

prefetch next page사용자가 현재 페이지를 보고 있는 동안 다음 페이지를 미리 가져옴사용자가 다음 페이지 버튼을 클릭할 때까지 기다릴 필요가 없도록 함PrefetchQuery는 일회성fetch Custom hook에서 함께 작성같은 쿼리 함수와 쿼리 키를

select option을 이용한 filter가 유용한 이유리액트 쿼리는 실제로 이를 최적화하기 때문(불필요한 계산을 줄임)상세 동작리액트 쿼리는 select 함수의 삼중 등호 비교를 수행데이터가 마지막으로 데이터를 검색했을 때와 동일하고 select 함수가 동일한 경

JWT(Json Web Token)동작 방식사용자 이름, 비밀번호를 서버로 전송사용자 인증 정보가 데이터베이스에서 있는 정보와 일치하는지 확인일치한다면 서버가 Token을 반환함클라이언트는 서버에서 반환받은 Token을 이용하여 로그인을 요구하는 서버의 자원을 요청할

전역 에러 핸들링과 로딩 중앙 집중화와 동일한 방식으로 설정useQuery와 유사차이점no cache datano retriesno refetchno isLoading vs isFetching반환 객체에서 mutation을 실행하는데 실제 사용하는 mutate 함수를