[Next.js / Supabase] 검색 결과 페이지네이션 구현하기

검색 결과 페이지네이션의 필요성검색 결과가 많아지면 슈퍼베이스의 쿼리 개수 제한(1,000개)을 초과하거나 성능이 저하될 수 있다.이를 해결하기 위해 검색 결과를 n개씩 나눠서 가져오는 페이지네이션 기능을 구현했다. page 쿼리 파라미터 추가검색 페이지의 URL을 `/search?q=hello&page=2`와 같이 변경하여 검색어와 페이지 정보를 포함하도록 설정한다. 검색어로 URL 업데이트하기import { useRouter, useSearchParams, usePathname } from "next/navigation";const { replace } = useRouter();const pathname = usePathname();const searchParams = useSearchParams()..

• format_list_bulleted JavaScript
• · 2025. 3. 30.
• textsms

[Next.js 14] OTF 로컬 폰트 적용하기

Next.js 14 프로젝트에 `.otf` 리디바탕 폰트를 추가해 보자! `public/fonts` 디렉토리에 폰트 파일을 추가했다. import localFont from "next/font/local";const ridiBatang = localFont({ src: "../../public/fonts/RIDIBatang.otf", display: "swap",});`src/app/layout.tsx`에서 `localFont`를 import하고 올바른 경로에서 폰트 파일을 불러온다. export default function RootLayout({ children,}: Readonly) { return ( {children} );} `RootLa..

• format_list_bulleted JavaScript
• · 2025. 2. 24.
• textsms

[React] react-tooltip 렌더링 성능 최적화

react-tooltip 성능 저하 이슈프로젝트 진행 중에 데이터는 빨리 불러오는데 렌더링까지 오랜 시간이 걸리는 이슈가 있었다. 코드를 살펴보다가 react-tooltip 코드가 문제였다는 것을 발견했다. React Tooltip BAD Case// ❌ BAD {myItems.map(({ id, content, tooltip }) => ( {content} ))} `events`의 모든 항목마다 `Tooltip` 컴포넌트를 생성하고 있던 것이 성능 저하의 이유였다. 불필요하게 많은 양의 컴포넌트를 사용하는 것은 피해야 합니다. 대부분의 경우 전체 애플리케이션에서 사용하는 하나의 툴팁 컴포넌트로 충분합니다.react-tooltip의 공식 문서에도 내 코드와 똑같은 ..

• format_list_bulleted JavaScript
• · 2025. 2. 1.
• textsms

Next.js & Supabase 프로젝트 생성 및 기초 세팅

슈퍼베이스를 사용하는 Next.js 프로젝트를 생성해 보자. Next.js app 생성npx create-next-app -e with-supabase다음과 같은 항목들이 미리 구성되어 있는 앱을 생성한다.Cookie-based AuthTypeScriptTailwind CSS `npm run dev`로 앱을 실행했을 때 화면이다. 스크롤 내리면 체크리스트도 있다. Supabase 프로젝트 연결슈퍼베이스 프로젝트를 생성한다. database.new `env.example` 파일 이름을 `env.local`로 변경하고 환경 변수를 입력한다. 프로젝트를 생성했다면 슈퍼베이스 공식문서 3번 항목에서 친절하게 입력할 값을 모두 알려준다. Supabase 데이터 쿼리프로젝트가 잘 연결됐는지 확인해 보기 위해 테스..

• format_list_bulleted JavaScript
• · 2024. 12. 24.
• textsms

[TIL] 2023.07.04 Vercel 배포 후 CORS 에러 해결하기

Access to XMLHttpRequest at 'http://localhost:3000/api/service' from origin 'https://test.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. dev 환경에서는 아무 문제 없었는데 Vercel로 배포한 후에 데이터를 조회화면서 CORS 에러가 발생했다. const getResvData = () => { return axios .get('http://localhost:3000/api/reservation') .then((res) => { return res.data.dat..

• format_list_bulleted JavaScript
• · 2023. 7. 4.
• textsms

[TIL] 2023.07.01 Next.js_router.push와 router.replace의 차이점

useRouter import { useRouter } from 'next/navigation'; Next.js 13부터는 `useRouter`를 'next/router'가 아닌 'next/navigation'에서 import 해서 사용해야 한다! 만약 `useRouter`를 'next/router'에서 import하면 이미지와 같은 에러가 발생한다. 잠시 router 관련 Next.js 13에서 달라진 점을 살펴보자. Migrating from the pages directory: The new useRouter hook should be imported from `next/navigation` and not `next/router` The pathname string has been removed a..

• format_list_bulleted JavaScript
• · 2023. 7. 1.
• textsms

[TIL] 2023.06.27 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다

'{ img: StaticImageData; category: string; title: string; }' 형식은 'CardType' 형식에 할당할 수 없습니다. 'img' 속성의 형식이 호환되지 않습니다. 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322) import 한 jpg 파일의 타입을 지정하는 과정에서 상단의 error가 발생했다. type CardType = { img: string; category: string; title: string; }; type CardProps = { CardInfo: CardType; }; 전달받은 props의 `type` 구조는 다음과 같다. CardType의 `img: string`에서 error가 발생한 것..

• format_list_bulleted JavaScript
• · 2023. 6. 27.
• textsms

[TIL] 2023.06.07 word-break로 문자열 줄바꿈하기

table body에 띄어쓰기 없이 영어로 텍스트를 입력했을 때 줄 바꿈이 되지 않고 테이블 레이아웃이 깨지면서 가로 스크롤이 생기는 문제가 발생했다. 테스트 삼아 일반적인 영어 텍스트를 작성했을 때는 아무 문제없는 것을 알아냈다. 그래서 띄어쓰기 없이 작성한 것이 문제인가 싶어서 관련 키워드로 검색을 해봤다. word-break: break-all; 이것저것 검색해 보다가 알게된 것이 css word-wrap 속성. word-wrap: break-all을 적용했더니 내가 원하는 대로 띄어쓰기 없이 글을 작성했을 때에도 줄 바꿈이 잘 되는 것을 확인할 수 있다. +) 근데 `word-break: break-all` 속성을 지정했더니 단어가 깨지면서 개행되는 문제가 있었다. 나는 테스트 용으로 띄어쓰기 없..

• format_list_bulleted JavaScript
• · 2023. 6. 7.
• textsms

[TIL] 2023.05.28 button 공통 컴포넌트 만들기

여러 페이지에서 공통적으로 사용하는 버튼이 있었는데 코드가 불필요하게 중복되는 느낌이라 컴포넌트 화해서 재사용하기 위해 GlobalButton 컴포넌트를 생성했다. const GlobalButton = ({ width, text, btnType }: StrProps) => { return ( {text} ); }; export default GlobalButton; GlobalButton 컴포넌트를 사용할 때 props로 3가지 요소를 받아야 했는데 버튼의 width와 type, 그리고 버튼 내부 텍스트였다. width를 props로 받아서 tailwind와 결합해야 했는데 이를 위해 className을 {}로 감싼 후 백틱(`)을 추가했다. 버튼 type의 경우 props로 받아 온 btnType을 t..

• format_list_bulleted JavaScript
• · 2023. 5. 28.
• textsms

[TIL] 2023.05.23 Prisma schema Model 생성

Prisma schema The Prisma schema file is the main configuration file for your Prisma setup. It is typically called schema.prisma and consists of the following parts: Data sources: Specify the details of the data sources Prisma should connect to (e.g. a PostgreSQL database) Generators: Specifies what clients should be generated based on the data model (e.g. Prisma Client) Data model definition: Sp..

• format_list_bulleted JavaScript
• · 2023. 5. 23.
• textsms