joycie416 님의 블로그

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

1. Transition위 이미지의 tooltip, 즉 까만창이 파란색 버튼을 누르면 보였다 사라졌다 하게 만들고 싶었다. 이를 Tailwindcss로 구현하려면 어떻게 하면 될까? 이때는 `trasition`과 `duration`으로 위 효과를 나타내는 방법을 정리해보려고 한다. 위 컴포넌트 내용은 아래와 같다. `isVisible`에 따라 투명도를 조절하려고 한다.const InfoTag = ({ isVisible }: { isVisible: boolean }) => { return ( 도로명 주소를 입력해 주세요. ex. 서울특별시 중구 중림로 37 (중림동) );}; 그러면 transition은 내용의 가장 상위 컴포넌트에 적용해 하위 ..

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

프로젝트를 진행할 때 자주 사용하게 되는 색들이 있다. 그것들을 항상 헥사코드를 찾아서 작성하기에는 너무 힘들다. 따라서 tailwind css에서는 기본으로 주어진 색상처럼 사용할 수 있도록 커스터마이징할 수 있는 기능을 지원한다. 먼저 `tailwind.config.ts` 파일에 들어가보자. 그러면 얼추 아래와 같은 세팅이 작성되어 있다. (나는 create-next-app을 통해 Next.js의 App router를 사용하고 tailwind를 사용한다고 설정했으므로 자동으로 content를 작성해주었다.)import type { Config } from "tailwindcss";const config: Config = { darkMode: ["class"], content: [ "./src..

쇼핑몰에서 하는 것처럼 검색어나 필터를 입히면 query param이 추가되도록 하고 싶었다. 나중에 query param을 통해 정보를 불러올 것이므로 이 방법을 쓰는 것이 적합할 것 같았다. 그 전에 next의 `usePathname`과 `useSearchParams`에서 필요한 부분만 살펴보고 가려고 한다. `usePathname()`먼저 쿼리 스트링이 입력된 경우 pathname이 어떻게 출력될지 궁금했다.`http://localhost:3000/mypage?myKey=hihi` 이와 같은 경로에서 `usePathname`을 통해서 경로를 가져오면 어떤 값을 줄까? 쿼리 스트링은 모두 제거한 path만 깔끔하게 반환해준다.'use client'import { usePathname } from "n..

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

프로필 이미지를 수정할 때, 업로드한 이미지가 어떻게 보일지 궁금하다. 따라서 파일을 업로드하면 미리보기를 띄우기로 했다.  그러려면 JS의 `FileReader`가 필요하며, 사용할 메소드는 `readAsDataURL`, `onloadend`와 `result` 이다. `readAsDataURL`은 업로드한 파일은 컨텐츠를 읽어오는 역할을 한다. `onloadend`에는 파일을 읽는 행위가 종료되면 실행할 함수를 입력하면 된다. `onloadend`에 작성 한 함수 내부에 파일 경로 저장하는 내용이 필요한데, 이때 `result`를 통해 `readAsDataURL`의 결과로 URL로 데이터를 불러올 수 있으며, 해당 URL을 imgPath에 저장해 미리보기를 띄워주었다. 이 imgPath를 img 태그의..

'App Router'를 기준으로 supabase의 server side auth를 설정해보려고 한다. 서버와 브라우저에서 작동하는 방식이 달라 server와 client용 supabase client를 분리해야 한다. 1 단계`@supabase/supabase-js`와 `@supabase/ssr `을 먼저 설치하자. 2 단계supabase에 프로젝트를 만들고 Project Url와 Anon Key를 `.env.local`에 저장하자.  3 단계server, client component에서 사용할 supabase client를 생성하는 함수를 export하자. `src/utils/supabase` 폴더를 만들고 다음 두 파일을 저장하자.`client/ts`더보기import { createBrowserC..

`` 내부에 많은 것들을 할 수 있지만 그 안에 버튼을 넣어 클릭 이벤트를 넣었을 때는 어떻게 할까? 페이지 이동을 하지 않고 버튼 클릭 이벤트만 실행하고 싶을 때 나는 먼저 `e.stopPropagation()`을 생각했다. ``에 `onClick`을 넣고 하위 ``에도 클릭 이벤트가 있을 때 `e.stopPropagation()`을 사용했기 때문이다. 그런데 이렇게 했더니 이벤트가 너무 중구 난방으로 발생했다. 카드를 ``로 만들고 내부에 아래와 같이 ``을 넣었다. {todo.id.slice(0,4)} {todo.contents} { e.stopPropagation() updateTodo(todo); }} > {todo.isDone ? "취소" : ..

storage에 저장한 이미지를 불러오기 위해 storage에서 publicUrl을 가져오려고 했다. 그런데 url은 만들어지는데, 계속 이미지가 뜨지 않는 오류가 발생했다. 해당 url을 직접 브라우저에 입력해서 확인해보니 아래와 같은 값을 볼 수 있었다.{"statusCode":"404","error":"Bucket not found","message":"Bucket not found"} 조금 검색해보니 해당 버킷을 'public'으로 설정하지 않아서 발생한 오류였다. 해결방법 1 - 버킷을 public으로 설정하기따라서 storage의 해당 버킷 이름의 오른쪽에 토글 버튼을 눌러 'edit bucket'에 들어가서 public으로 바꿔주면 된다. 이러면 `getPublicUrl` 메소드의 값을 잘 ..