이 단계에서 하는 것: 백엔드 개발자 역할을 세우고, API 명세대로 거래·통계 API를 Next.js API route로 구현한다. 이어서 Claude API를 서버에서 호출하는 AI 기능(자동 분류·요약)을 만든다. 다음 단계로 넘길 것: Supabase의 진짜 데이터로 응답하는 API와, 서버에서 동작하는 AI 분류·요약 기능.
앞 단계에서 DBA가 Supabase에 테이블과 인증을 세웠고, 아키텍트가 API 명세서를 만들었다. 이제 그 명세를 실제로 움직이는 코드로 옮긴다. 원칙은 그대로다. 잔액·통계 같은 판정은 서버에서 하고, 클라이언트에서 Supabase를 직접 호출하지 않으며, Supabase 키와 Claude API 키 같은 비밀값은 서버 환경변수로만 다룬다.
docs/API명세.md에 인증 기준 엔드포인트와 상태코드가 정리돼 있다.docs/ERD.md대로 Supabase에 테이블·시드가 있고, 회원가입/로그인과 RLS가 동작한다.docs/가이드/에 코딩컨벤션·프로젝트구조 문서가 있다..env.local에 Supabase 접속 정보가 들어 있다. (AI API 키는 이 단계에서 발급한다.)API 명세와 ERD, 그리고 가이드 문서를 진실 원천으로 삼는 역할을 먼저 세운다.
'백엔드 개발자' 역할을 만들어줘. docs/API명세.md·docs/ERD.md와 docs/가이드/코딩컨벤션.pdf·프로젝트구조.pdf를 진실 원천으로 삼아 구현한다.
명세에 없는 걸 임의로 만들지 않고, 애매하면 먼저 묻는다.
이렇게 나오면 성공: 백엔드 개발자 역할이 만들어지고, API 명세·ERD·가이드 문서를 근거로 구현하며 애매한 것은 먼저 묻겠다고 정리된다.
명세의 핵심 엔드포인트부터 구현한다. 데이터 접근은 서버에서만 하고, 로그인한 사용자의 데이터만 다룬다.
백엔드 개발자 역할로, docs/API명세.md의 "거래 생성"과 "거래 목록 조회", "월별 통계"를 Next.js API route로 구현해줘.
데이터는 서버에서 Supabase에 접근하고(클라이언트에서 직접 접근 금지), 로그인한 사용자의 데이터만 다뤄줘.
잔액·통계는 서버에서 집계하고, 정상·경계(빈 목록) 두 경우를 실제로 호출해서 보여줘. 폴더·네이밍은 프로젝트구조 문서를 따라줘.
이렇게 나오면 성공: 거래 생성·목록 조회·월별 통계 API가 생기고, 서버에서 Supabase에 접근해 로그인 사용자의 데이터만 응답한다.
아직 화면(프론트)은 없다. 그래도 API가 진짜 도는지 내가 직접 눌러 확인할 도구를 만든다. API 문서 화면(Scalar)을 붙인다.
학생이 브라우저에서 우리 API를 직접 눌러 확인할 수 있는 API 문서 화면을 붙여줘.
Scalar(@scalar/api-reference-react)로 /api-docs 페이지를 만들고, OpenAPI 스펙은 docs/API명세.md를 근거로 /api/openapi 라우트로 제공해줘.
로그인이 필요하니, /api-docs 위에 간단한 '테스트 로그인'(이메일·비밀번호로 Supabase에 로그인해 액세스 토큰을 받아 요청에 Bearer로 자동 적용) 도우미도 넣어줘.
(swagger-ui-react는 최신 Next.js/React와 호환이 안 되니 쓰지 말고 Scalar를 써.) 시크릿 키가 이 화면·번들에 들어가지 않게 해줘.
[사람 검증] AI가 "API 만들었다"는 말 대신, 내가 눌러서 나온 응답을 증거로 삼는다. 1.
npm run dev로 앱을 켜고 브라우저에서http://localhost:3000/api-docs를 연다. 2. 위쪽 테스트 로그인에 표준 테스트 계정(demo@moneynote.dev/moneynote1234, 4장에서 만든 것)을 넣어 로그인한다(토큰이 자동 적용된다). 3.GET /api/stats를 펼쳐 Test Request → Send 를 누른다 →200 OK와 함께 잔액·카테고리별 합계가 담긴 실제 JSON 응답이 온다. 4.POST /api/transactions로 거래를 하나 만들어 보고(→201), 다시 통계를 눌러 숫자가 바뀌는지 본다. 로그아웃하고 부르면401, 금액에 음수를 넣으면400이 오는지도 눌러 확인한다.
AI 기능은 API 키가 필요하다. 이 과정은 Claude(Anthropic) API를 쓴다.
https://console.anthropic.com 에 로그인해 Billing에서 카드 등록·크레딧 충전을 먼저 한다(크레딧이 없으면 키가 동작하지 않는다). 그다음 API Keys → Create Key로 키를 발급한다..env.local에 ANTHROPIC_API_KEY=발급받은키 로 넣는다. NEXT_PUBLIC_을 붙이지 않는다(붙이면 브라우저로 노출된다).무료로 하고 싶다면 Gemini API로 대체할 수 있다. Google AI Studio(
https://aistudio.google.com)에서 카드 없이 무료 키를 발급받아.env.local에GEMINI_API_KEY=...로 넣고, 아래 단계 4의 프롬프트에서 "Claude API" 대신 "Gemini API"로 바꿔 요청하면 된다. 무료 사용량만으로도 이 과정의 AI 기능(분류·요약)을 돌리기에 충분하다.
이렇게 나오면 성공: .env.local에 AI API 키(Claude 또는 Gemini)가 서버 전용 이름으로 들어가 있다.
거래 내용을 카테고리로 추천하고, 이번 달 소비를 한 줄로 요약하는 기능을 붙인다. Claude API 호출은 서버에서 하고, 키는 서버 전용 환경변수로만 쓴다.
백엔드 개발자 역할로, "거래 내용을 입력하면 카테고리를 추천"하는 API를 Next.js API route로 만들어줘.
서버에서 Claude API를 호출하고, API 키는 .env.local의 서버 전용 환경변수로 쓴다(클라이언트 노출 금지).
비슷하게 "이번 달 소비를 한 줄로 요약·조언"하는 API도 만들어줘. 실패 시 사용자에게 안전한 메시지를 준다.
이렇게 바꿔도 좋다: 분류 카테고리 후보를 우리 카테고리 목록으로 제한해 보자.
이렇게 나오면 성공: 거래 내용을 넣으면 카테고리를 추천하는 API와, 이번 달 소비를 한 줄로 요약·조언하는 API가 생긴다. Claude API 호출은 서버에서 일어나고 키는 서버 전용 환경변수로 쓰이며, 호출이 실패해도 사용자에게 안전한 메시지가 전달된다.
.env.local의 Supabase 접속 정보와 RLS 설정을 다시 확인한다. AI 응답이 안 나오면 Claude API 키가 서버 환경변수로 들어갔는지 확인한다.다음 단계에서 프론트엔드 개발자 역할을 세워 로그인 화면과 거래·통계 화면을 만들고, 이 API를 호출해 실제 데이터를 표시한다.