joycie416 님의 블로그

병원카드에 좋아요 기능을 추가했다. 실시간으로 하트를 누르면 업데이트 되도록하고 싶어서 일단 useState의 초기값을 likes 목록에 존재하는지 여부로 정한 후, 클릭하면 반대로 바뀌도록 했다. TanStack Query로 낙관적 업데이트할 수 있기 때문에 적용해보기로 했다. 낙관적 업에이트는 실제 데이터 업데이트가 느릴 수 있기 때문에, 그 간극을 줄이기 위해 성공할 것이라고 가정하고 변화를 주는 것이다. 이를 통해 사용자 경험을 향상시킬 수 있다. 1. `useMutation()``useMutation`는 하나의 parameter에 여러 옵션을 넣을 수 있는데, 이를 활용하면 낙관적 업데이트를 적용할 수 있다. 그 중 오늘 사용할 옵션들은 `mutationFn`, `onMutate`, `onErr..

한 페이지에 여러 데이터를 불러오게 되면 `useQuery'를 불러오는 데이터 개수만큼 사용해야 한다. 하지만 여러 데이터를 불러올수록 비슷한 코드가 여러 번 작성되고, 가독성도 떨어지는 단점이 생긴다. 이를 방지하기 위해 tanStack Query를 이용해 custom hook을 만들 수 있다. 사용자와 사용자가 등록한 아이 정보가 있다고 가정하겠다. 1. Custom Hook 만들기Custom hook을 만드는 과정은 굉장히 쉽다. 우리가 컴포넌트 내부에서 쓰던 것처럼 사용하면 된다. 예를 들어 supabase 서버에서 로그인 정보를 가져오는 코드를 살펴보자.// Schedule.tsx"use client";import { useChildrenQuery, useUserQuery } from "@/ap..

프로필 정보를 수정하는 부분을 맡았다. 그런데 프로필 정보가 수정되지만 실시간으로 반영되지 않아 새로고침을 해줘야했다. 이를 해결하기 위해 TanStack Query(React Query)를 적용했다. 그런데 수정하려면 여러 변수를 입력받아야 하는데, mutationFn에 그러한 함수를 직접 적용했더니 에러가 발생했다. 그래서 오늘은 `mutationFn`에 여러 parameter를 적용할 수 있는 방법을 정리해보려고 한다. 방법 1 - mutationFn 내부에서 호출하기이 방법을 프로젝트에 적용해 두었다. `queryFn`에서 하는 것처럼 `() => myFunc(p1, p2, ...)`로 작성하는 방법이다. `updateUser`라는 함수에 `user`, `nickname`, `profileImg`..

우리는 외부에서 데이터를 가져와서 사용해야 하기 때문에 이를 위한 관리 도구가 필요하다. 이전에 다루었던 것처럼 이번에도 역시 TanStack Query(React Query)를 사용할 것이다. 참고로 Next.js에서는 `fetch`를 최적화해서 제공하기 때문에 `axios`를 사용하지 않고 `fetch`를 사용할 것이다. 세팅 : app route 사용, src 폴더 사용 1. `server-action.ts` 만들기먼저 server component를 만들었던 것처럼 파일 맨 상단에  `"use server"`를 추가하자. 그러면 해당 `server action` 파일에 비동기 함수를 모아 api처럼 활용할 수 있다. 이러한 `server-action.ts` 파일은 서버 측에서 비동기 함수를 실행할..

어제 이야기한대로 `useState`를 사용하지 않고 테스트 결과가 수정된 경우 반영되도록 바꾸었다. 1. `queryClient` 생성하기먼저 `queryClient`를 생성하고 이를 사용할 수 있도록 `Provider`를 아래와 같이 적용해준다. (`main.jsx`나 `App.jsx`에 하면 된다. 나는 `main.jsx`에 했다.)import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import App from './App.jsx'import './index.css'import { QueryClient, QueryClientProvider } from '@tanstack/react-query'const quer..