핫트레이딩

AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (7) 본문

IT 정보/인공지능 Ai

AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (7)

HOTT 2025. 8. 26. 19:09

AI 연동(OpenAI API 사용) → 노트 기반 코드 생성 단계로 진행하겠습니다.
이 단계가 끝나면 **"개발자 노트를 AI에게 전달 → AI가 코드 제안"**이 가능합니다.


1. 목표

  • React 프론트엔드 → FastAPI 백엔드 → OpenAI API 호출
  • 백엔드가 개발자 노트를 받아 AI에게 코드 요청
  • 결과를 프론트엔드에서 확인 가능

2. OpenAI API 준비

  1. OpenAI API 키 발급
  2. 백엔드에서 환경변수로 저장(Windows PowerShell)
    bash
    export OPENAI_API_KEY "발급받은_키"
     
    (Windows PowerShell)
    export OPENAI_API_KEY="발급받은_키"

3. 백엔드 수정 (FastAPI → OpenAI API 연동)

backend/main.py에 추가:

python
import os
import openai
from fastapi import HTTPException

openai.api_key = os.getenv("OPENAI_API_KEY")

@app.post("/generate_code")
def generate_code(note: DeveloperNote):
    """
    개발자 노트를 받아 OpenAI API로 코드 제안 생성
    """
    try:
        prompt = f"""
        프로젝트 이름: {note.projectName}
        필수 기능: {', '.join(note.mustHave)}
        제외 기능: {', '.join(note.mustNotHave)}
        승인 필요한 변경사항: {', '.join(note.reviewRequired)}

        위 정보를 기반으로 Python(Flask) 예제 코드를 간단히 작성해 주세요.
        """
        response = openai.ChatCompletion.create(
            model="gpt-4o-mini",
            messages=[{"role": "system", "content": "당신은 전문 개발 보조 AI입니다."},
                      {"role": "user", "content": prompt}],
            max_tokens=500
        )

        ai_code = response.choices[0].message["content"].strip()
        return {"code": ai_code}

    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))
 

주의: openai 패키지 설치 필요

bash
pip install openai

4. 프론트엔드 수정 (AI 코드 요청 버튼 추가)

frontend/src/App.js 수정:

 
javascript
const handleRequestAI = async () => {
  const note = {
    projectName,
    mustHave: mustHave.split(",").map(item => item.trim()),
    mustNotHave: mustNotHave.split(",").map(item => item.trim()),
    reviewRequired: reviewRequired.split(",").map(item => item.trim())
  };

  try {
    const res = await fetch("http://127.0.0.1:8000/generate_code", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(note)
    });

    const data = await res.json();
    alert("AI가 제안한 코드:\n\n" + data.code);
  } catch (err) {
    console.error("AI 요청 실패:", err);
  }
};

 

 

그리고 버튼 UI 부분:

javascript
<button
  onClick={handleRequestAI}
  className="bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 mt-2"
>
  AI에게 코드 요청
</button>
 

5. 동작 흐름

  1. React UI에서 AI에게 코드 요청 클릭
  2. FastAPI 서버가 OpenAI API 호출
  3. AI가 코드 제안 → 프론트에 표시

6. 이제 할 수 있는 것

  • 노트를 작성하면 → AI가 그에 맞는 코드 초안을 제안
  • 이후 Git 자동화(버전관리)와 연결하면 개발 효율 극대화
 
반응형