oops2okay: AI 기반 개발자 디버깅 도구 소개
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 대상: 프론트엔드/백엔드 개발자, AI 도구 사용자
- 난이도: 중급 (AI 통합, 기술 스택 이해 필요)
핵심 요약
- AI 기반 디버깅 툴:
Gemini 2.0 Flash를 사용해 코드 + 에러 메시지 입력 시 즉시 원인 분석 및 수정 코드 제공 - 기술 스택:
- 프론트엔드: React, Vite, Tailwind CSS
- 백엔드: FastAPI, Gemini 2.0 Flash API
- 주요 기능:
- 디버깅 히스토리 저장 (localStorage 활용)
- 에러 파싱 정리 함수 (cleanJsonResponse 함수로 마크다운/JSON 오류 처리)
섹션별 세부 요약
1. 프론트엔드 (/client)
- 기술 스택: Vite + React + Tailwind CSS
- 기능:
- 사용자가 코드 및 에러 메시지 입력 후 POST 요청으로 백엔드에 전송
- AI 생성 수정 코드 표시 및 로컬 스토리지에 디버깅 히스토리 저장
- 호스팅: Vercel
2. 백엔드 (/server)
- 기술 스택: FastAPI (Python) + Gemini 2.0 Flash API
- 기능:
- FastAPI를 통해 입력 받은 후 Gemini 2.0 Flash API 호출
- AI 제안/수정 코드 반환
- 호스팅: Render (무료 계층)
3. Gemini 통합
- 코드 예시:
```python
import google.generativeai as genai
from dotenv import load_dotenv
load_dotenv()
GOOGLE_API_KEY = os.getenv("GOOGLE_AI_API_KEY")
genai.configure(api_key=GOOGLE_API_KEY)
model = genai.GenerativeModel("gemini-2.0-flash")
```
- 선택 이유:
- 속도 및 가벼운 성능을 위해 gemini-2.0-flash 모델 사용
- JSON 형태의 응답 기대 (마크다운 코드 블록 내에서 반환)
4. 주요 도전 과제
- 백엔드 콜드 스타트:
- Render의 무료 계층에서 15–20초 지연 발생
- 사용자 경험에 영향
- AI 응답 파싱:
- Gemini의 출력이 마크다운 또는 잘못된 JSON 포함 시 cleanJsonResponse 함수로 정리
- 히스토리 관리:
- localStorage로 디버깅 히스토리 저장 → 엔트리 수 제한 필요
5. 추가 기능
- 예시 프롬프트/에러 템플릿 제공
- GitHub/Google 로그인 연동
- 참고 자료 링크 강화
결론
- 실무 적용 팁:
- AI 응답의 마크다운/JSON 오류를 cleanJsonResponse 함수로 처리
- Gemini 2.0 Flash의 가벼운 성능을 활용해 실시간 디버깅 지원
- Render 호스팅의 콜드 스타트 지연을 고려해 사용자 경험 최적화 필요
- 예시:
oops2okay는 GitHub에서 확인 가능 (라이브 데모 링크 제공)