[알토르] 5주차 추가과제 : Gemini API 프론트엔드 연결 및 채팅 UI 구현

[ 기존 추가과제 완료 후 두번째 추가과제 ]

-> Gemini 메세지 주고 받는 API를 프론트엔드에 연결해보기

// 메세지를 보내면 api요청을 보내고, 값을 받아서 채팅창 레이아웃에 보이게 처리

//  gemini에 이력서 넘기고, 해당 이력서 기반으로 답장 하도록 프롬프트 작성

 

# 전체 구조

 

프론트 → API → Gemini → 응답 → 프론트 렌더링

 

// 프론트: 채팅 UI + fetch 요청

// 백엔드(필수): API 키 보호 + Gemini API 호출 + 결과 반환, 프롬포트 구성

// Gemini: 메시지 처리 + 이력서 기반 응답

 

*fetch

-> 서버와 통신해서 필요한 데이터만 비동기로 가져오는 표준 인터페이스

 

-> 브라우저에서 HTTP 요청을 보내는 비동기 API

// 응답을 Promise 기반으로 처리

// 페이지 새로고침 없이 데이터만 가져오는 AJAX 방식의 핵심 도구

 

*Promise 기반

-> 미래에 결과가 나올 작업을 객체로 다루는 방식

<상태 3가지>

pending: 대기 중

fulfilled: 성공 (결과 있음)

rejected: 실패 (에러 있음)

---

우선 Chat GPT가 알려준 순서대로 진행해보기로 함

(처음엔 'messages 구조 적용'과 '히스토리 유지'도 순서에 있었으나

대화형 챗봇이 아닌 이력서 기반 Q&A 봇이라서 삭제함)

 

**진행순서**

1. API /api/chat 완성 (이전 추가과제에서 완료)

2. 프론트 fetch 연결

3. 채팅 UI 최소 구현 (이전 과제에서 레이아웃만 만듦)

4. 이력서 연결 (핵심)

5. flask 배포, fetch URL 변경

 

2. 프론트 fetch 연결

// 기존 웹사이트 작업한 project 폴더에서(백엔드 분리)

 1) 프론트(JS)에서 fetch로 Flask /api/chat 호출

 2) POST 요청으로 { message } 전송

 3) 서버 응답 { reply } 받아서 확인

-> 프론트와 백엔드 API 연결 완료

 

# flask-cors 설치(venv 기준)

pip3 install flask-cors

-> Flask 서버 실행 -> 프론트 실행(index.html 열기)

-> 테스트(메시지 입력 -> 전송 -> 개발자도구 콘솔 확인)

-> { reply: ... } 나오면 연결 완료

 

flask-cors

-> Flask 서버에서 CORS를 허용해주는 라이브러리

CORS

-> 브라우저 보안 정책

// 다른 출처(포트/도메인) 요청을 기본적으로 막음

 

from flask_cors import CORS
CORS(app)

-> 이 코드로 외부(프론트) 요청 허용

-> fetch 요청 차단 안 당함

---

3. 채팅 UI 최소 구현

기존채팅창 레이아웃을 클로드AI로 만들어서 이어서 진행해봄

추가과제하면서 gpt한테 질문해왔기에 프롬포트 요청

 

// 기존은 입력창과 버튼만 있는 뼈대 상태
→ 채팅 메시지를 표시할 UI가 없어서
→ 최소 채팅 구조(UI)부터 추가로 구현

 

현재 상태:
- index.html에 input과 button만 있음
- 채팅 메시지를 표시할 영역(div)이 없음
- addMessage 함수도 없음

요청:
1. index.html에 채팅 메시지를 표시할 div 추가
2. main.js에 addMessage 함수 작성
3. sendMessage 함수 완성 (fetch 포함)

조건:
- 최소한의 코드로 작성
- 단순한 채팅 UI 형태 (user / bot 구분)
- 불필요한 설명 없이 코드만 작성

 

[문제 및 해결]

증상:
- 채팅창에 "Something went wrong. Please try again." 출력됨
- 서버는 정상 동작 (이전에 { reply: ... } 응답 확인됨)

// 에러는 프론트가 아니라 Flask에서 생성됨

// fetch 정상, UI 정상

핵심 문제 -> HTTP 상태코드 때문

지금 Flask 코드

return jsonify({"status": "error", "reply": str(e)}), 500

// 에러 나면 500 상태코드 반환

( 500이면 무조건 에러로 처리됨 )

→ 그래서 채팅창에 Something went wrong 뜸

//  Postman은 500이어도 그냥 응답 보여줘서 정상 작동함

 

해결 방법 ( Flask 수정 )

->  항상 200으로 보내고 reply만 사용

except Exception as e:

print(f"[ERROR] /api/chat exception: {type(e).__name__}: {e}")

return jsonify({

"reply": f"서버 오류: {str(e)}"

}), 200

---

4. messages 구조 적용 (클로드로 적용 했으나 패스)

-> 대화 히스토리를 유지하는 구조 만들기 

// 단일 message 방식에서 messages 배열 구조로 변경하여
사용자와 AI의 대화 데이터를 순차적으로 저장하도록 구현
→ 확장성을 고려한 구조로 개선
→ 이후 대화 히스토리 기능 적용 가능

---

 

4. 이력서 연결

(텍스트 기반 간단한 이력서 작성. 우선 현재에 맞춰 작성 후 업데이트 예정)

 

#클로드용 프롬포트(이력서 연결)

 

현재 Flask + Gemini API + 프론트 채팅 UI가 연결된 상태다.

 

목표:
사용자가 질문하면, 미리 정의된 이력서를 기반으로
"나"의 입장에서 답변하도록 만들고 싶다.

현재 구조:
- 프론트 → { message } 전송
- Flask → message 받아 Gemini 호출
- 응답 → { reply } 반환

요청:
1. Flask 코드에서 RESUME 텍스트를 변수로 정의
2. user_input과 RESUME를 결합한 prompt 생성
3. Gemini API 호출 시 해당 prompt를 사용하도록 수정
4. 응답을 reply로 반환

조건:
- 기존 API 구조(/api/chat)는 유지
- 프론트 코드는 수정하지 말 것
- 최소 수정으로 구현
- 불필요한 설명 없이 수정된 Flask 코드만 제시

RESUME:
(여기에 내가 작성한 이력서 텍스트 붙여넣기)

 

마지막으로 채팅찬 상단에 

<div class="chat-header">
<p>이 채팅 기능은 Gemini API를 활용하여, 제 이력서를 기반으로 질문에 답변하도록 구현했습니다.</p>
</div>

 

// 이력서 기반 답변 (한글/영문) 확인, 채팅창 상단에 위 내용 잘 배치 됐는지 확인,

채팅 말풍선, 스크롤, Enter 전송 등 UI 상태 체크

// 로컬(localhost)에서만 변경됨. 도메인 서버는 이전 코드 그대로이므로

배포 다시 해줘야함. github push(vercel 연동)

 

[문제 및 해결]

개발자도구 -> network 탭

채팅 요청 클릭 -> Request URL 확인

// 브라우저 기준 “내 컴퓨터(local)” 호출중...

 

문제 : 내 컴퓨터에서만 작동중임 ->  Flask는 별도 배포해줘야함

해결 : Flask 외부 배포 + fetch URL 변경

// 클로드 활용 : Flask 배포 + fetch 변경만 하라고 정확히 지시하는 프롬프트

// 깃허브 레포지토리에 backend push (api키는 올리면 안 됨. ".gitignore")

// push 후 Vercel에서 레포지토리를 불러와서 배포(배포할 때 환경변수 추가)

 

1. Vercel 환경 변수(Environment Variables) 추가

.gitignore에 .env를 넣었기 때문에, 로컬에 있던 API 키는 깃허브에 올라가지 않음

(깃허브에 민감 정보가 올라가는 것을 물리적으로 차단)

따라서 Vercel에서 직접 입력해줘야 함

-> 환경 변수(API 키) 등록

// Settings -> Environment Variable -> Add Environment Variable 버튼

 

Key: GEMINI_API_KEY

Value: 구글 AI 스튜디오에서 받은 키 값을 복사해서 넣기

 

2. Vercel 배포 URL 주소 확인 및 프론트엔드 수정

API키 등록 후 재배포까지 완료되면 

backend 프로젝트 Overview에서 Domains 옆

https://your-project-name.vercel.app 형태의 주소 확인

-> /api/chat 붙여서 Next.js 코드의 fetch 부분을 수정

(https://your-project-name.vercel.app/api/chat)

 

깃허브로 push 하고 핸드폰으로 도메인 접속해서 체크(모바일 테스트)

정상 작동하면 끝!

 

채팅화면 캡처