joycie416 님의 블로그

쇼핑몰에서 하는 것처럼 검색어나 필터를 입히면 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` 메소드를 사용하는 방법을 사용했지만 한 케이스..

Next.js와 TypeScript를 활용할 수 있도록 Riot에서 제공하는 API를 활용해서 챔피언, 아이템 정보를 제고하고 로테이션 정보를 제공하는 사이트를 만들었다. 사실 롤을 잘 몰라서 추가 기능을 많이 넣지는 못했지만 챔피언 스킨 이미지는 캐러셀로 모두 제공했다.  이전에 client component와 server component에 대해 이야기하면서 4가지 렌더링 방식에 대해 정리했다. 각 렌더링 방식을 활용하고 type을 다루어보려고 한다. 또한 api를 사용해 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 경험하고 라우트 핸들러를 사용해보았다. 1. 페이지 세팅하기Next.js의 App router를 사용하기로 했으므로 페이지를 폴더구조로 설정해주어야 한다.`/champions`,`/c..

제목에서 알 수 있듯이 이번 포스팅은 post id가 숫자로 이루어져야하는데 숫자 아닌 경우 post 목록으로 redirect하는 것처럼 특정 조건을 만족하는 path에서 redirect하는 방법에 대해 다룰 것이다. 미들웨어의 사용 목적은 쉽게 말하면 요청이 완료되기 전에 한 단계를 거쳐갈 수 있도록 하는 것이다. 요청에 따라 response를 rewrite, redirect, modify할 수 있다. 메들웨어를 사용하는 사용하는 경우공식 홈페이지에서 제시한 미들웨어를 사용하는 경우는 아래와 같다.인증, 인가 : user 정보와 세션 쿠키 등을 확인하고 특정 페이지 접근을 막을 수 있다.Server-Side Redirects : 서버 단계에서 특정 조건에서 redirect할 수 있다.Path rewri..