Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 숏츠자동화
- 주식지표
- 고수익블로그
- SEO최적화템플릿
- 티스토리포스팅템플릿
- JP모건CEO
- 유트브자동화소스코드
- JP모건
- 매수타점
- 금융파이프라인
- 판매가계산
- 쇼츠자동화
- n8n소스코드
- 아마존CEO
- 자동화툴만들기
- 로또번호생성
- 성공방정식
- AI자동화코딩
- n8n자동화
- 주식지표매수
- 주식보조지표
- 매매실패사례
- 주식분석
- 수익자동화툴
- 티스토리최적화템플릿
- npm
- 로또1등번호예측
- 주가예측
- 글쓰기자동화툴
- 급등주패턴
Archives
- Today
- Total
핫트레이딩
AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (7) 본문
AI 연동(OpenAI API 사용) → 노트 기반 코드 생성 단계로 진행하겠습니다.
이 단계가 끝나면 **"개발자 노트를 AI에게 전달 → AI가 코드 제안"**이 가능합니다.
1. 목표
- React 프론트엔드 → FastAPI 백엔드 → OpenAI API 호출
- 백엔드가 개발자 노트를 받아 AI에게 코드 요청
- 결과를 프론트엔드에서 확인 가능
2. OpenAI API 준비
- OpenAI API 키 발급
- 백엔드에서 환경변수로 저장(Windows PowerShell)
bashexport 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. 동작 흐름
- React UI에서 AI에게 코드 요청 클릭
- FastAPI 서버가 OpenAI API 호출
- AI가 코드 제안 → 프론트에 표시
6. 이제 할 수 있는 것
- 노트를 작성하면 → AI가 그에 맞는 코드 초안을 제안
- 이후 Git 자동화(버전관리)와 연결하면 개발 효율 극대화
반응형
'IT 정보 > 인공지능 Ai' 카테고리의 다른 글
| AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (최종) (1) | 2025.08.26 |
|---|---|
| AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (8) (2) | 2025.08.26 |
| AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (6) (0) | 2025.08.26 |
| AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (5) (0) | 2025.08.26 |
| AI 기반 자동 프로그래밍 시스템 – 전체 설계도 (4) (0) | 2025.08.26 |
