pageservice.tistory.com

프론트엔드 개발 실무/React 기초부터 프로젝트까지

[ChatGPT 챗봇 실습 1강] ChatGPT API란? 개념과 호출 흐름 이해

free21 2025. 6. 13. 22:48

프론트엔드에서 챗봇을 만들기 위해 가장 먼저 이해해야 할 것은 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 형식으로 전달됨

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.
 
▲ TOP