POKE API에서는 기본적으로 검색 기능을 제공하지 않습니다. 따라서 전체 포켓몬 리스트를 가져와 자체적으로 필터링하여 검색 기능을 구현하기로 했습니다.검색 기능을 구현하면서, 검색 결과에 대한 페이지네이션, 필터 기능 등을 추가 구현하기 위해 포켓몬 데이터를 여러 컴포넌트에서 재사용해야 하는 상황이 발생했습니다.상위 루트에 데이터를 정의하고 props로 내려주는 방식보다는, 전역 상태 관리를 통해 구현하는 것이 가독성 면에서 더 좋고 관리하기도 편리할 것이라고 판단하여 Zustand를 사용했습니다.또한, 기존에 모든 타입 지정과 서버 API 요청 등을 하나의 파일에 작성하던 방식을 개선하여, 다음과 같이 파일을 분리했습니다.types.ts: 타입 정의.api.ts: 서버 API 요청.usePokemo..

사용자 계정이 있을 시 좋아요와 북마크 기능을 추가하려고 했습니다.아무래도 데이터를 저장하고 관리하려면 데이터베이스가 필요할 것 같아서, 학습도 할 겸 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..