짧은코딩

프리페칭은 캐시에 아직 데이터가 없는 경우 미리 데이터를 채울 수 있다. prefetchQuery는 queryClient의 메서드이다. 그렇기에 useQuery와 달리 클라이언트 캐시에 추가된다. prefetchQuery는 일회성이다. queryClient를 반환하고 useQuery 클라이언트 hook을 사용한다. 방문할 사이트 예측하는 프리페칭 어떤 사이트에서 홈 화면을 거치고 나서 다른 페이지를 방문할 확률이 높다면 방문할 페이지의 데이터를 미리 프리페칭하는 것이 좋다. 이 예시에서는 홈 화면에 미리 데이터를 프리페칭하는 코드이다. -커스텀 훅 export function useTreatments(): Treatment[] { // fallback을 기본 값으로 둬야 처음에 잠깐 빈 값이 나왔다가 데..

queryClient와 에러 중앙화 기존에는 queryClient를 QueryClientProvider과 같은 파일 내에 선언해 줬다. 하지만 좀 더 큰 규모의 프로젝트에서는 위 사진처럼 queryClient.ts로 따로 빼서 선언해줬다. 이렇게 하면 에러 처리를 중앙화해줄 수 있다. -queryClient.ts // 에러처리 중앙화 function queryErrorHandler(error: unknown): void { // error is type unknown because in js, anything can be an error (e.g. throw(5)) // error이 Error 클래스의 인스턴스인지에 따라 비슷한 방식으로 이름을 정하도록 했다. const title = error inst..

리액트 쿼리에서 무한 스크롤을 구현하려면 useInfiniteQuery를 사용하면 된다. 전체 wrapper 컴포넌트로는 react-infinite-scroller 라이브러리의 InfiniteScroll를 사용하면 된다. -react-infinite-scroller의 npm 사이트 https://www.npmjs.com/package/react-infinite-scroller react-infinite-scroller Infinite scroll component for React in ES6. Latest version: 1.2.6, last published: a year ago. Start using react-infinite-scroller in your project by running `npm..

Mutation mutation은 서버에 데이터를 업데이트하도록 서버에 네트워크 호출을 하는 것이다. 데이터를 추가, 수정, 삭제할 때 사용된다. 그렇기에 mutation을 활용하면 optimistic update를 구현할 수 있고, 쿼리 캐시를 업데이트할 수 있으며 클라이언트에 있는 데이터를 최신 상태로 유지할 수 있다. useMutation useMutation은 useQuery와 비슷하다. 하지만 데이터를 저장하지 않아 key는 필요가 없다. 그리고 isLoading은 있지만 데이터를 저장하지 않으니까 캐시 된 항목이 없어서 isFetching은 없다. 기본값으로 재시도는 하지 않지만 설정할 수 있다. 사용법 블로그 댓글을 삭제하는 예시이다. const deleteMutation = useMutat..

isFetching vs isLoading isFetching은 비동기 쿼리가 해결되지 않았음을 의미한다. 즉, feching을 완료하지 않았다는 의미이다. async 함수가 해결되지 않았고 아직 데이터를 가져오는 중이다. isLoading은 isFetching의 하위 집합이며 데이터를 가져오는 상태라는 것을 의미한다. 쿼리 함수가 해결되지 않았고 캐시 된 데이터가 없다. 표시할 캐시 데이터도 없다는 의미이다. 즉, isLoading 상태이면 isFetching은 참이다. => 별 차이가 없어 보일 수 있지만 페이지네이션을 할 때, 캐시 된 데이터가 있을 때와 없을 때를 구분해야 한다. -예시 if (isFetching) return Loading...; 이 코드에서는 캐시 된 데이터의 존재와 상관없이 ..

prefetching페이지네이션을 하고 다음 페이지로 넘어갈 때, prefetching을 하지 않으면 "로딩중..." 이런 메시지가 보이게 된다. 이는 사용자 경험에 좋지 않다. 그렇기에 prefetching을 해야 한다. prefetching은 데이터를 캐시에 추가하며 구성할 수 있지만 기본값은 stale(만료) 상태이다. 그러고 데이터가 필요할 때 stale 상태에서 데이터를 다시 가져오고 이때 캐시에 있는 만료되지 않은 데이터를 이용한다. 그렇기에 추후에 사용자가 사용할 법한 데이터를 prefetching 하면 좀 더 개선된 사용자 경험을 제공할 수 있다. 페이지네이션에서는 다음 페이지의 데이터를 prefetchig 하면 된다.사용 방법페이지네이션을 예시로 들면 다음 페이지로 넘어가는 버튼을 눌렀을..

리액트 쿼리에서는 key를 다르게 설정해야 다른 값으로 인지한다. 위 사진은 Blog Posts의 글을 클릭하면 각각 다른 comments를 보여주는 사이트이다. 잘못된 코드 const { data, isLoading, isError, error } = useQuery("comments", () => fetchComments(post.id) ); 이 코드에서는 트리거가 발생했을 때만 data를 업데이트한다. 그렇기에 다른 블로그 제목을 클릭해도 같은 댓글이 나오게 된다. 해결 방법 const { data, isLoading, isError, error } = useQuery( ["comments", post.id], () => fetchComments(post.id) ); 이 경우 key를 ["comme..

리액트 쿼리란 클라이언트에서 서버 데이터가 필요할 때, fetch나 axios를 사용하지 않고 리액트 쿼리 캐시를 요청할 수 있다. 즉, 리액트 쿼리는 해당 캐시의 데이터를 유지 관리하는 것이다. 데이터 관리는 리액트 쿼리가 하지만 새 데이터로 캐시를 업데이트하는 시기를 개발자가 설정할 수 있다. 클라이언트 캐시에 있는 데이터가 서버 데이터와 일치하는지 확인하는 방법은 2가지가 있다. 1. 명령형: 쿼리 클라이언트에 기존에 있던 데이터를 무시하고 새 데이터를 서버에서 가져와 교체하는 것 2. 선언형: 예를 들어 브라우저 창을 다시 포커스 하면 refetch하는 트리거 조건을 구성한다. 혹은 시간을 설정하여 그 시간이 지나면 다시 데이터를 불러올 수 있게 할 수 있다. 리액트 쿼리는 서버에 대한 모든 쿼리..

http 상태 코드는 서버에서 클라이언트 요청의 처리 상태를 알려주는 기능이다. 그리고 http 상태 코드에는 100~500번대 에러가 존재한다. 100번대 100번대 상태 코드는 요청이 수신되어 처리 중이라는 의미이다. 100번대는 실무에서 거의 사용하지 않는다. 200번대 200번대는 클라이언트의 요청이 성공적으로 처리되었다는 것을 의미한다. 보통은 200이나 (200, 201) 이렇게 1~2개만 사용한다. 200 "OK"이며 요청 성공을 의미한다. 201 요청이 성공하고 새로운 리소스가 생성된 것을 의미한다. ex) 회원 가입이 성공하면 응답 Location의 필드에 "/members/50" 이런 식으로 온다. 202 요청이 접수되었지만 처리되지 않은 상태를 의미한다. ex) 요청 접수를 하고 1시..

HTTP API API URI를 설계할 때 가장 중요한 것은 리소스 식별이다. 만약 회원을 등록, 수정, 조회하면 이때 리소스는 회원이라는 개념이다. 따라서 리소스를 식별하고 그 리소스를 대상으로 하는 행위를 분리하면 된다. 예를 들면 리소스는 회원이고 행위는 조회, 등록, 삭제, 변경이다. 메서드 종류 주요 메서드는 get, post, put, patch, delete가 있다. 자주 사용하지 않는 메서드로는 head, options, connect, trace가 있다. GET get은 리소스를 조회할 수 있다. 보통 서버에 전달하고 싶은 데이터는 query(쿼리 파라미터, 쿼리 스트링)으로 전달을 한다. get도 메시지 바디를 통해 데이터를 전달할 수 있지만 실무에서는 get에 body를 넣지 않는다...