사용자 계정이 있을 시 좋아요와 북마크 기능을 추가하려고 했습니다.아무래도 데이터를 저장하고 관리하려면 데이터베이스가 필요할 것 같아서, 학습도 할 겸 Prisma와 MongoDB를 사용하기로 결정했습니다.Prisma와 MongoDB 설정Prisma는 MongoDB와 같은 NoSQL 데이터베이스에서도 편리하게 데이터를 다룰 수 있도록 해줍니다.이를 위해 schema.prisma 파일을 다음과 같이 작성했습니다.// schema.prismagenerator client { provider = "prisma-client-js"}datasource db { provider = "mongodb" url = env("DATABASE_URL")}model User { id Strin..

PokeAPI는 총 1302개의 포켓몬 데이터를 제공합니다.하지만 1302개의 데이터를 한 번에 보여주는 것은 비효율적이여서 이를 해결하기 위해 페이지네이션 기능을 구현했습니다.PokeAPI 데이터 가져오기PokeAPI는 전체 포켓몬의 개수를 count로 제공합니다. 이를 활용해 데이터를 20개씩 나눠서 가져오도록 했습니다.export async function fetchPokemon(page = 1): Promise { const offset = (page - 1) * 20; const response = await fetch(`${pokemonBaseUrl}/pokemon?limit=20&offset=${offset}`); if (!response.ok) { throw n..

Auth0를 사용하여 로그인 상태를 서버 컴포넌트에서 확인하기 위해 getSession을 호출했더니 아래와 같은 오류가 발생했습니다.Route "/api/auth/[auth0]" used `params.auth0`. `params` should be awaited before using its properties공식 문서에 있는 코드를 똑같이 복사해서 사용해도 똑같은 결과가 나왔습니다.https://stackoverflow.com/questions/79270854/route-api-auth-auth0-used-params-auth0-params-should-be-awaited-before Route "/api/auth/[auth0]" used `params.auth0`. `params` should be..

https://auth0.com/ Auth0: Secure access for everyone. But not just anyone.Rapidly integrate authentication and authorization for web, mobile, and legacy applications so you can focus on your core business.auth0.comPokemon API를 활용한 포켓몬 사이트를 구현하면서 간단한 로그인 기능도 추가하기 위해 Auth0를 사용했습니다. 이번 글에서는 Auth0를 설정하고 Next.js 프로젝트에 통합하는 과정을 정리해보겠습니다. Auth0 설정하기애플리케이션 유형 선택 Next.js를 사용하기 때문에 Single Page Web Applica..

타입스크립트를 사용하는 Next.js 프로젝트에서 특정 라이브러리를 사용할 때 한 가지 오류가 발생했습니다.아래와 같이 props에서 변수를 할당하려고 했습니다.const { children, className, node ...rest } = props;그런데 ref를 할당하지 않으면 오류가 발생했습니다. 정확한 이유는 알 수 없었지만, ref를 포함하니 오류가 사라졌습니다.그러나 빌드 시점에서 ref와 node가 실제로 사용되지 않기 때문에 ESLint의 no-unused-vars 규칙에 걸려 빌드가 실패했습니다. 이 문제를 해결하기 위해, // eslint-disable-next-line @typescript-eslint/no-unused-vars 주석을 추가하여 특정 줄에서만 no-unused-va..

폰트를 설정하는 방법은 크게 두 가지가 있습니다.1. 구글 폰트 사용하기구글 폰트는 next/font/google에서 원하는 폰트를 불러와 사용할 수 있습니다.필요한 폰트, 서브셋(subsets), 두께(weight), 그리고 디스플레이(display) 옵션을 지정할 수 있습니다.const notoSans = Noto_Sans({ weight: ['400', '700'], subsets: ['latin'], display: 'swap',});subsets: 폰트가 지원하는 문자셋을 선택합니다.weight: 400(보통)과 700(굵은)을 적용해 다양한 weight을 지원합니다.display: swap으로 설정해, 폰트가 로드되지 않은 상태에서도 텍스트가 표시되며, 로드 후 폰트가 교체됩니다.2. 로..

텍스트에 Linear-gradient 적용하기텍스트에 그라데이션 효과를 주기 위해 linear-gradient를 사용하여 다음과 같이 스타일을 적용할 수 있습니다..gradient-text { display: inline-block; background-image: linear-gradient(90deg, #0ea5ea, #0bd1d1 51%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;}1. display: inline-block;텍스트 요소는 일반적으로 h1, p처럼 블록 요소이기 때문에 너비가 전체 화면을 차지합니다.inline-block으로 변경해서 ..

SSG -> ISR 으로 전환하기SSG는 빌드 시점에 정적 HTML을 생성하는 방식입니다.하지만 ISR로 전환하면, 정적 페이지의 성능을 유지하면서도 주기적으로 데이터를 새로 가져와 페이지를 업데이트할 수 있습니다.ISR로 전환하려면 revalidate 옵션을 추가하여 페이지가 일정 시간마다 다시 생성되도록 설정할 수 있습니다.// 3초마다 페이지 재생성export const revalidate = 3;Next.js에서 fetch 사용하기: SSG, ISR, SSR 결정하기Next.js에서는 서버 컴포넌트에서 fetch를 사용할 수 있습니다. fetch 함수는 두 번째 옵션에 따라 SSG, ISR, SSR 방식을 결정합니다.1. SSGfetch 호출 시 두 번째 옵션을 제공하지 않는다면, 기본적으로 SS..