API란 무엇인가? Youtube Data API 와 생성형 AI Gemini API 사용해보기

🔑A thousand theories are not worth one practical experience

💡 API란 무엇인가?

📃 API(Application Programming Interface)는 서로 다른 프로그램들이 상호작용할 수 있게 하는 인터페이스입니다. 쉽게 말해서, 레스토랑의 메뉴판과 같은 역할을 합니다. 손님(개발자)이 메뉴판(API)을 보고 주문(요청)을 하면, 주방(서버)에서 음식(데이터)을 만들어 제공하는 것과 같은 원리입니다. API를 통해 개발자들은 복잡한 기능을 직접 구현할 필요 없이, 이미 만들어진 기능을 쉽게 활용할 수 있습니다.

💻CODE

// API 요청의 기본 구조
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_API_KEY'
  }
})
.then(response => response.json())
.then(data => console.log(data));

⬆️ API를 사용하면 외부 서비스의 기능을 쉽게 통합할 수 있으며, 개발 시간을 크게 단축할 수 있습니다

💡 YouTube Data API 활용하기

📃 YouTube Data API는 YouTube의 다양한 기능을 프로그래밍 방식으로 활용할 수 있게 해주는 인터페이스입니다. 플레이리스트 정보 가져오기, 비디오 검색, 채널 정보 조회 등 다양한 작업을 수행할 수 있습니다.

💻CODE

// 1. API 설정
import axios from 'axios';
const API_KEY = import.meta.env.VITE_YOUTUBE_API_KEY;
// 환경변수에서 API 키를 가져옵니다. 보안을 위해 직접 코드에 키를 작성하지 않습니다.

// 2. axios 인스턴스 생성
export const youtubeApi = axios.create({
  baseURL: 'https://youtube.googleapis.com/youtube/v3',  // YouTube API의 기본 URL
  params: { key: API_KEY },  // 모든 요청에 API 키를 포함
});

// 3. 플레이리스트 비디오 정보 가져오기
export const allVideoIdPromises = Company_PlayList.map(async ({ company, playlistId }) => {
  // Company_PlayList 배열의 각 항목에 대해 비동기 요청을 수행
  const res = await youtubeApi.get('playlistItems', {
    params: {
      part: 'snippet',  // 비디오의 기본 정보를 요청
      playlistId: playlistId,  // 가져올 플레이리스트 ID
      maxResults: 25,  // 최대 25개의 결과를 가져옴
      fields: 'items(snippet/title,snippet/resourceId/videoId)'  // 필요한 필드만 선택적으로 가져옴
    }
  });

  // 4. 응답 데이터 가공
  return res.data.items.map(item => ({
    id: item.snippet.resourceId.videoId,  // 비디오 ID
    title: item.snippet.title,  // 비디오 제목
    company: company,  // 회사 정보
  }));
});

⬆️ YouTube Data API를 사용하면 YouTube 콘텐츠를 자신의 애플리케이션에 쉽게 통합할 수 있습니다

💡 YouTube Data API 유의할 점

📃 YouTube Data API를 사용할 때 가장 중요하게 고려해야 할 점은 쿼리당 할당되는 비용(quota cost)입니다. 각 API 엔드포인트마다 서로 다른 비용이 발생하며, 이는 일일 할당량에 영향을 미칩니다

search 쿼리: 비용 100 units
- 일반적인 검색 기능을 사용할 때 호출
- 하루에 처리할 수 있는 요청이 매우 제한적
- 신중하게 사용해야 함
playlistItems 쿼리: 비용 1 unit
- 플레이리스트의 영상 정보를 가져올 때 사용
- 매우 효율적인 비용
- 대량의 데이터 처리에 적합

💻CODE

// 플레이리스트 ID를 사용한 효율적인 조회 (비용: 1 unit)
const getPlaylistVideos = async (playlistId) => {
  const response = await youtubeApi.get('playlistItems', {
    params: {
      part: 'snippet',
      playlistId: playlistId,
      maxResults: 50  // 한 번의 요청으로 최대한 많은 데이터를 가져옴
    }
  });
  return response.data.items;
};

// 비용이 많이 드는 검색 방식 (비용: 100 units)
const searchVideos = async (query) => {
  const response = await youtubeApi.get('search', {
    params: {
      part: 'snippet',
      q: query,
      maxResults: 50
    }
  });
  return response.data.items;
};

⬆️ 따라서 가능하다면 search 쿼리 대신 playlistItems를 활용하는 것이 비용 효율적입니다. 예를 들어, 특정 채널의 영상들을 가져오고 싶다면 해당 채널의 playlist ID를 활용하는 것이 좋습니다

💡 Gemini API 활용하기

📃 Gemini API는 Google의 최신 AI 모델을 활용할 수 있게 해주는 인터페이스입니다. 텍스트 생성, 질문 답변, 코드 작성 등 다양한 AI 기능을 애플리케이션에 통합할 수 있습니다

💻CODE

// 1. Gemini API 초기화
import { GoogleGenerativeAI } from "@google/generative-ai";
const api_key = import.meta.env.VITE_GEMINI_API_KEY;  // 환경변수에서 API 키 가져오기
const genAI = new GoogleGenerativeAI(api_key);  // Gemini API 인스턴스 생성

// 2. AI 콘텐츠 생성 함수
export const generateContentFromGemini = async (prompt, setMessages, setIsLoading) => {
  try {
    // 3. 로딩 상태 설정
    setIsLoading(true);
    
    // 4. AI 모델 설정
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });
    
    // 5. 프롬프트 강화
    const enhancedPrompt = `${prompt} Explain in detail and make it easy to understand.`;
    
    // 6. 메시지 상태 업데이트 (사용자 입력)
    setMessages(prev => [...prev, { role: 'user', content: prompt }]);
    
    // 7. AI 응답을 위한 빈 메시지 추가
    setMessages(prev => [...prev, { role: 'ai', content: '' }]);
    
    // 8. AI 응답 생성
    const result = await model.generateContent(enhancedPrompt);
    const response = await result.response;
    const text = response.text();
    
    // 9. AI 응답으로 메시지 업데이트
    setMessages(prev => {
      const newMessages = [...prev];
      newMessages[newMessages.length - 1].content = text;
      return newMessages;
    });
    
  } catch (error) {
    // 10. 에러 처리
    console.error('Error:', error);
    setMessages(prev => [...prev, {
      role: 'error',
      content: 'Sorry, something went wrong. Please try again.'
    }]);
  } finally {
    // 11. 로딩 상태 해제
    setIsLoading(false);
  }
};

⬆️ Gemini API 구현의 주요 특징:

환경변수를 통한 안전한 API 키 관리
사용자 입력에 대한 실시간 상태 관리
에러 처리와 로딩 상태 관리
AI 응답의 비동기 처리
채팅 형식의 메시지 관리 구현

💡 Gemini API 유의할 점

📃 토큰은 생성형 AI 모델이 텍스트를 처리하는 기본 단위입니다. 영어를 기준으로 대략적으로:

1개의 토큰 ≈ 4글자
75-100 토큰 ≈ 1분 길이의 대화
250-300 토큰 ≈ 1페이지 분량

예시로 보는 토큰 수:

"Hello" = 1 토큰
"I love programming" = 3 토큰
"안녕하세요" = 2-3 토큰 (언어에 따라 다름)

토큰의 중요성:

비용 계산
- API 사용료는 주로 토큰 단위로 계산
- 입력(프롬프트)과 출력(응답) 모두 토큰으로 측정
컨텍스트 제한
- 모델마다 최대 토큰 제한이 있음
- Gemini-1.0 Pro: 최대 32k 토큰
- GPT-4: 최대 128k 토큰
최적화 전략
- 불필요한 설명 제거
- 핵심 정보 위주로 프롬프트 작성
- 토큰 수를 고려한 청크 단위 처리

저작자표시 비영리 변경금지

💡 API란 무엇인가?

💻CODE

⬆️ API를 사용하면 외부 서비스의 기능을 쉽게 통합할 수 있으며, 개발 시간을 크게 단축할 수 있습니다

💡 YouTube Data API 활용하기

📃 YouTube Data API는 YouTube의 다양한 기능을 프로그래밍 방식으로 활용할 수 있게 해주는 인터페이스입니다. 플레이리스트 정보 가져오기, 비디오 검색, 채널 정보 조회 등 다양한 작업을 수행할 수 있습니다.

💻CODE

⬆️ YouTube Data API를 사용하면 YouTube 콘텐츠를 자신의 애플리케이션에 쉽게 통합할 수 있습니다

💡 YouTube Data API 유의할 점

📃 YouTube Data API를 사용할 때 가장 중요하게 고려해야 할 점은 쿼리당 할당되는 비용(quota cost)입니다. 각 API 엔드포인트마다 서로 다른 비용이 발생하며, 이는 일일 할당량에 영향을 미칩니다

💻CODE

⬆️ 따라서 가능하다면 search 쿼리 대신 playlistItems를 활용하는 것이 비용 효율적입니다. 예를 들어, 특정 채널의 영상들을 가져오고 싶다면 해당 채널의 playlist ID를 활용하는 것이 좋습니다

💡 Gemini API 활용하기

📃 Gemini API는 Google의 최신 AI 모델을 활용할 수 있게 해주는 인터페이스입니다. 텍스트 생성, 질문 답변, 코드 작성 등 다양한 AI 기능을 애플리케이션에 통합할 수 있습니다

💻CODE

⬆️ Gemini API 구현의 주요 특징:

💡 Gemini API 유의할 점

📃 토큰은 생성형 AI 모델이 텍스트를 처리하는 기본 단위입니다. 영어를 기준으로 대략적으로:

티스토리툴바