프론트엔드에서 챗봇을 만들기 위해 가장 먼저 이해해야 할 것은 ChatGPT API의 동작 원리와 구조입니다. 이번 1강에서는 용어 설명부터 호출 흐름까지 기초 개념을 탄탄히 다지겠습니다.
용어 설명
- API (Application Programming Interface): 프로그램 간 데이터나 기능을 주고받는 규칙
- REST API: URL과 HTTP 메서드(GET/POST 등)를 사용한 표준적인 API 호출 방식
- 토큰(Token): GPT 모델이 텍스트를 분해하고 이해하는 단위 (1K token ≒ 약 750단어)
기본 개념
- ChatGPT API는 OpenAI에서 제공하는 클라우드 기반 대화형 언어 모델 서비스입니다.
- 개발자는 https://api.openai.com/v1/chat/completions 주소로 요청을 보내고, 응답을 받아서 활용합니다.
- HTTP 요청 방식: POST 메서드 사용
주요 사용 위치/상황
- 프론트엔드 챗봇 개발 (React, Vue 등)
- 고객센터 자동응답 시스템
- 교육용 질문-응답 인터페이스
- 개인화된 생산성 도구 챗봇 등
구체적 코드 예시
fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer YOUR_API_KEY"
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: [
{ role: "user", content: "안녕!" }
]
})
})
.then(res => res.json())
.then(data => console.log(data.choices[0].message.content));
※ YOUR_API_KEY는 OpenAI에서 발급받은 본인 키로 대체해야 합니다.
단계 요약
- ChatGPT API는 HTTP POST 방식으로 메시지를 전송
- model, messages 파라미터 필수
- 메시지는 role 기반 배열 구조 (user, assistant, system)
- 응답은 data.choices[0].message 형식으로 전달됨
💬 댓글
이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.
'프론트엔드 개발 실무 > React 기초부터 프로젝트까지' 카테고리의 다른 글
[ChatGPT 챗봇 실습 3강] ChatGPT API 연동 – 사용자 메시지에 AI 응답 받기 (0) | 2025.06.13 |
---|---|
[ChatGPT 챗봇 실습 2강] React로 챗봇 UI 만들기 – 기본 구조 설계 (0) | 2025.06.13 |
[ChatGPT API로 프론트엔드 챗봇 만들기] - 강의안 (0) | 2025.06.13 |
React 필수 용어 총정리 (2) | 2025.06.09 |
[ vite+React 기초학습 10] React Router 기초와 SPA 라우팅 (0) | 2025.06.09 |