프로젝트를 진행하면서 Youtube영상을 Embed로 띄워줘야하는 상황이 있어 YoutubeAPI를 사용하여 영상의 썸네일, 타이틀, ID값들을 가져와야했다.

1. Google Cloud Platform 프로젝트 등록

1-1. 처음엔 Google Cloud Platform에 등록을 해줘야 한다.

우선 프로젝트 선택에서 새로운 프로젝트를 생성해준다.

1-2. 그후 검색란에서 Youtube를 검색해주면

원하는 API들을 가져다 쓸 수 있다!
나는 썸네일과 영상ID값이 필요하기 때문에 YouTube Data API v3를 사용할 것이다.

1-3.

사용자 인증 정보에 들어가 사용자 인증 정보 만들기를 눌러준다.

그 후 API 키를 생성해주고 이를 잘 보관해준다.

2. 테스트 해보기

제일 대표적인 매개변수를 확인해보자.
우선 내가 필요한 것은 영상의 대한 데이터이므로, part에서 snippet을 선택해준다. 또한 maxResults에 나는 너무 많은 데이터는 필요가 없으므로 10개로 제한한다. 그리고 q뒤에 검색할 쿼리값을 담는다.

https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=10&q=검색쿼리&type=video&key=API키값

그러면 위와같은 형식으로 검색을 하게되는것이다. 나는 여기서 maxResults와 검색쿼리는 내가 원할때 바꿔주고 싶으므로

import axios from "axios";

export const youtubeAPIData = async (max: number, search: string) => {
  try {
    const response = await axios.get(
      `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=${max}&q=${search}&type=video&key=${process.env.REACT_APP_YOUTUBE_API_KEY}`
    );
    return response.data;
  } catch (error) {
    console.log(error);
    throw error;
  }
};

와 같이 API를 사용할 수 있도록 선언해주었다. 그전에 URL에서도 잘 데이터가 넘어오나 시험을 해보았다.

위와 같이 검색 데이터가 잘넘어오는 것을 확인할 수 있었다! 정렬방식은 최신, 인기순 등 여러가지 방안이 있는 듯하다. 기호에 맞게 설정해서 쓰면될거같음.

최종적으로 완성할 디자인은 이랬다. 그러나 프로젝트를 진행하던 중 문제가 발생했다...
Youtube API는 하루에 사용할 수 있는 할당량이 존재한다는 것이었다..!
얘네는 하루에 10000 코스트의 할당량을 주는데 이가 정말 골 떄린다. YOUTUBE API 공식문서

위 할당표를 보면 영상 하나에 1코스트가 아닌 내가 할 행위에 따라 다 다른 것이었다. 나는 검색(search)를 사용해야하는데 단 한번 검색에 100 + 보기 + 알파를 하면 터무니 없는 코스트였다. 물론 타 블로그에서 최대한의 효율을 뽑아먹는 방법들을 잘 정리해주시긴 했지만, 우리 프로젝트는 하루에 몇명이 들어올지도 모르는 상황이기때문에 사용이 불가능했다. 또, 수익화 모델이 존재하기 때문에 크롤링도 사용하지 못하고 위 유튜브 데이터 넣기는 꿈으로 남았다.. 하하 ㅠ

---

그래서 대안으로 내세운 것이 있었으니 다음 편에 설명하도록 하겠다.