소개
두번째 사례에서 성공했던 astro 앱의 백엔드를 수정한 사례입니다.
현재 챗지피티에서 astro 앱의 ui가 정상적으로 구현이 되었는데요
문제는,
현재 백엔드 구현 상태가 다음과 같았습니다.
1️⃣ 별자리 정보 (Natal Chart) - ✅ 부분 구현됨
데이터 소스:
프론트엔드에서 직접 계산 (백엔드 없음)
src/astrology-reading/utils/astrology.ts의 calculateNatalChart() 함수
2️⃣문제점: 별자리 해석이 하드코딩되어있음.
그래서 사용자의 생년월일시별로 각기 다른 별자리 해석이 노출되도록 백엔드를 구현해야 합니다.
클로드코드가 아래 세가지 백엔드 구현 방법을 제시했습니다.
🔧 구현해야 할 백엔드
Option 1: ChatGPT API 직접 호출 (프론트엔드에서)
Option 2: MCP Server에서 처리
Option 3: 별도 백엔드 서버 구축
Node.js/Express 서버
/api/natal-chart → 별자리 해석 생성
/api/daily-reading → 일일 운세 생성
그리고 저는 두번째 방법을 선택했는데요,
그 이유는
🚫 다른 옵션의 단점:
Option 1 (프론트엔드 직접 호출):
❌ API 키가 브라우저에 노출됨 (보안 문제)
❌ 사용자가 개발자 도구로 키 탈취 가능
❌ 비용 통제 어려움
Option 3 (별도 백엔드):
❌ 새 서버 구축 및 배포 필요
❌ MCP 서버와 중복 인프라
❌ 유지보수 포인트 2배
option2로 진행하기로 하고, 오픈ai api키를 새로 발급받았습니다.
✅ MCP 서버 실행 중: http://localhost:3001
⚠️ OpenAI API 키 필요 (.env 파일에 실제 키 입력)
✅ 2개 신규 도구 추가됨
클로드 코드랑 다시 작업했고 결과는 다음과 같습니다.
🎉 ✅ MCP 서버가 OpenAI API 키와 함께 정상 실행하도록 수정
⚠️ 경고 메시지가 사라짐 (이전에는 "Warning: OPENAI_API_KEY not set" 나왔는데 지금은 없음)
✅ dotenv가 .env 파일에서 키를 성공적으로 로드
✅ 서버가 포트 3001에서 실행 중
클로드코드가 말한 이제 사용 가능한 기능:
get_daily_reading - AI가 생성하는 개인화된 일일 운세
get_chart_interpretation - AI가 생성하는 별자리 상세 해석
결과와 배운 점
클로드코드는 완성되었다고 했지만,
제가 앱 안에서 돌려보니 여전히 하드코딩되어 있었습니다;;;
매번 럭키컬러가 딥퍼플이라고;;
하지만 좀 더 트레이닝(?)해주면 고쳐주겠죠?
그래도 백엔드까지 수정해보다니 정말 신기했습니다
도움 받은 글 (옵션)
클로드코드
