개발자도 골치 아픈 '카카오톡 로그인', 커서 AI와 Clerk으로 10분 만에 뚫는 법(포트폴리오 홈페이지 제작 7탄) скачать в хорошем качестве

개발자도 골치 아픈 '카카오톡 로그인', 커서 AI와 Clerk으로 10분 만에 뚫는 법(포트폴리오 홈페이지 제작 7탄)

안녕하세요, 바이브랩스입니다. 단순히 코드를 짜는 것을 넘어, AI와 함께 일하는 방식을 혁신하는 '바이브 워킹', 그 생산성의 세계로 여러분을 초대합니다. "코딩 몰라도 만드는 나만의 포트폴리오 홈페이지" 시리즈 일곱 번째 영상입니다. 홈페이지 만들 때 가장 골치 아픈 기능, 바로 '회원가입 및 로그인'입니다. 보안도 신경 써야 하고, 구글/카카오 같은 소셜 로그인까지 붙이려면 개발자들도 며칠을 고생하곤 하죠. 이번 영상에서는 인증 전문 서비스인 Clerk과 커서 AI를 활용해서, 복잡한 로그인 기능을 구축하는 방법을 보여드립니다. 💡 이번 영상의 핵심 포인트 Clerk 도입: 복잡한 인증 로직(세션, 보안 등)을 직접 짜지 않고, 전문 서비스에 위임하여 생산성을 극대화하는 전략. 카카오톡 로그인 연동 (꿀팁): Clerk에서 공식 지원하지 않는 '카카오 로그인'을 커스텀 프로바이더(OpenID Connect) 설정을 통해 뚫어내는 비법 공개. SDD 실전 (Phase 2): tasks.md에 정의된 인증 작업을 /speckit implement 명령어 한 줄로 AI에게 구현시키는 과정. 실전 디버깅: "카카오로 가입하려는데 구글로 로그인되는 문제?" AI와 함께 에러 로그를 분석하고 해결하는 개발자의 찐 문제 해결 방식을 보여드립니다. 이제 로그인 기능 때문에 포기하지 마세요. 바이브랩스가 가장 쉬운 길을 알려드립니다. 📨 비즈니스 및 작가 제안 futurewave@gmail.com 타임라인 00:00 인트로: 개발자처럼 일하는 법, SDD(스펙 주도 개발) 리마인드 00:33 왜 직접 만들지 않고 'Clerk'을 써야 하는가? 00:53 Clerk 프로젝트 생성 및 API 키 발급 (기초 공사) 02:10 Next.js 프로젝트에 환경변수(.env.local) 설정하기 02:28 [핵심] 카카오톡 로그인 연동 시작 (카카오 개발자 센터 설정) 04:07 Clerk에서 'OpenID Connect' 활성화 및 커스텀 프로바이더 등록 05:02 카카오와 Clerk 연결을 위한 '비밀 출입증(Client Secret)' 교환 06:36 SDD 실전: AI에게 Phase 2(인증 기능) 구현 명령하기 (/speckit implement) 09:26 구현 결과 확인: 디자인이 깨졌다? UI 수정 요청하기 11:55 디자인 개선: 로고 배치 및 내비게이션 바 위치 수정 13:23 [디버깅] 카카오 로그인이 구글로 연결되는 버그 발생? 15:26 시크릿 모드와 브라우저 검사 도구로 원인 파악하기 17:08 AI에게 에러 로그 전달 및 수정 요청 19:04 카카오 로그인 최종 성공 및 DB(Supabase) 연동 확인 22:03 아웃트로: 시스템 완성, 다음 단계 예고