데브허브 | DEVHUB | Sync Clerk data to your app with webhooks [S2 E4]Sync Clerk data to your app with webhooks [S2 E4]
- Clerk 웹훅을 사용하여 사용자 데이터를 자체 데이터베이스에 동기화하는 방법을 설명합니다. 🔄
- 웹훅 테스트를 위해 ngrok과 같은 도구를 사용하여 로컬 서버를 공용 인터넷에 노출해야 합니다. 🌐
- Clerk 대시보드에서 웹훅 엔드포인트를 구성하고, 공개 URL을 지정하며, 수신할 사용자 관련 이벤트를 선택합니다. ⚙️
- 웹훅 요청의 유효성을 검증하기 위해 Clerk 대시보드에서 서명 비밀(Signing Secret)을 복사하여 애플리케이션에 저장해야 합니다. 🔑
@clerk/nextjs 패키지의 verifyWebhook 함수를 사용하여 수신되는 웹훅 요청이 Clerk에서 온 것인지 확인합니다. ✅
- Prisma와 같은 ORM을 사용하여 Clerk 데이터 필드(예: 이메일, 이름)에 매핑되는 사용자 모델을 포함한 데이터베이스 스키마를 정의합니다. 💾
- 웹훅 이벤트를 통해 받은 데이터를 기반으로 데이터베이스에 사용자를 생성하는 함수(예: Prisma 클라이언트를 사용하는
createUser 함수)를 작성합니다. ➕
- 웹훅 라우트 핸들러에서 검증 후,
user.created 이벤트 페이로드에서 필요한 정보를 추출하여 데이터베이스에 저장하는 함수를 호출합니다. 📤
- 애플리케이션 로그인 후 Clerk 대시보드와 로컬 데이터베이스(예: Prisma Studio)에서 사용자 데이터가 성공적으로 동기화되었는지 확인합니다. 🔬