joycie416 님의 블로그

한 페이지에 여러 데이터를 불러오게 되면 `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` 메소드의 값을 잘 ..

초기에  페이지를 로딩할 때 성능을 최적화하기 위한 몇 가지 방법을 소개하려고 한다. 1. 함수 내부에서 import하기파일을 실행하면서 import를 하면 당장 쓰이지 않을 모듈도 모두 import된다. 이를 함수 내부에 적어주면 함수가 실행되면서 import되기 때문에 초기 실행 시간을 조금 더 단축할 수 있다.// import { getNewProducts } from "@/services/server-action";import Banner from "@/components/Banner";import NewProductList from "@/components/NewProductList";const HomePage = async () => { const { getNewProducts } = awa..

https://school.programmers.co.kr/learn/courses/30/lessons/42883 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해완전 탐색하려면 너무 시간이 오래 걸려서 다른 방법을 사용해야할 것 같았다. 조금 더 패턴을 찾기 위해 예시를 들여다보니 앞 자리에서부터 크기 비교를 통해 큰 수를 만들 수 있었고, 원하는 만큼 숫자를 제거했을 때 종료하면 될 것 같았다.다음이 키 포인트이다.현 위치 숫자가 오른쪽 숫자보다 작으면 현 위치를 제거! 먼저 String의 `slice` 메소드를 사용하는 방법을 사용했지만 한 케이스..