할당량 생각하며 YouTube API로 원하는 데이터 얻기

김나연·2023년 3월 16일

YouTube API

YouTube에는 YouTube 기능을 자체 웹사이트 및 애플리케이션에 삽입할 수 있는 다양한 API와 도구가 있다. 나는 YouTube API로 가능한 작업 중 YouTube Data API (v3)로 YouTube 기능을 활용해 웹사이트를 만들어보았다. 내가 만들고 싶은 기능은 Yotube channel 별로 최근 동영상을 보여 주는 것이다.

YouTube API Key

YouTube Data API를 사용하기 위해서는 Key를 발급 받고 Google에 애플리캐이션 등록을 해야한다. 자세한 방법은 안내 문서에 나와있다. 참조 문서에서 API Explorer를 사용하여 실시간 데이터에서 이 메소드를 호출하고 API 요청 및 응답을 확인할 수 있다.

Postman

Youtube 참조 문서에서 응답 확인 후 API 테스트와 사용할 API를 모아 보기 위해 Postman에 API를 등록해 주었다.

새로운 Collection을 만든 후에 Auth와 Var를 위와 같이 설정해 준다.

React에서 key 사용하기

.gitignore

.env

.env

REACT_APP_YOUTUBE_API_KEY=발급 받은 KEY
REACT_APP_NEWS_API_KEY=발급 받은 KEY

gitignore 파일에 env를 추가한다. env 파일에서 변수 이름은 REACT_APP 으로 시작해야한다. 발급 받은 KEY는 큰 따옴 표나 작은 따옴 표 없이 그대로 써주면 된다. ex) REACT_APP_YOUTUBE_API_KEY=abcde123

VideoComponent.js

const apiKey = process.env.REACT_APP_YOUTUBE_API_KEY;

그 다음 api key가 필요한 곳에서 위와 같이 변수에 담아준 후 사용하면 된다.

Quota Calcultor (할당량)

Quota Calculator 페이지에 들어가보면 api 당 할당량 비용을 볼 수 있다. YouTube Data API (v3)는 하루에 10,000 할당량만 사용할 수 있다.

api 중 특정 채널과 동영상을 찾을 수 있는 api는 search/list 이다. 하지만 할당량이 100이나 된다. 하루에 100번 까지 밖에 검색을 못하는 것이다. 물론 나 혼자 100번 검색할 일은 없겠지만 너무 낭비이다.

그래서 발견한 방법이 channel에 playlist를 가저와 data를 활용하는 방식이다.

Youtube 특정 Channel playlist 가져오기

먼저, 특정 Channel playlist를 가져오기 위해서는 channel id가 필요하다. channel id는 videos/list 결과 값에서 가져올 수 있다. Quota는 1이다. channel id가 필요한 채널에 들어간 후 아무 동영상을 클릭한다. 그러면 url에 동영상 id가 맨 끝에 있는데 id에 이 값을 넣어주면 된다.

결과 값 중에 channelId를 어딘가에 메모 해놓고 playlistItem/list에 channelId 값을 넣어준다. 이때 두 번째 알파벳 C를 U로 바꿔주면 최근 영상 리스트를 불러올 수 있다. ex) UCkinxxxxx -> UUkinxxxxx 이 때 할당량 비용은 1이다.

그 다음 url이 잘 작동하는 지 보기 위해 postman에서 확인해보았다. 이 정보들 중 원하는 정보만 뽑아서 사용하면 된다.

내가 사용하고 싶은 데이터는 publishedAt, title, description, thumbnails, channelTitle 이다. 그런데 내가 사용하고 싶은 데이터 중 영상 길이는 없었다. 유튜브 동영상을 보면 영상 길이도 썸네일 오른쪽 아래에 표시 되는데 아무리 찾아봐도 없었다.

API 여러번 사용으로 원하는 데이터 얻기

열심히 문서를 읽어본 결과 videos/list에서 part를 contentDetails로 api 응답을 요청하면 영상 길이인 duration을 얻을 수 있는 것을 발견하였다. quota는 마찬가지로 1이다.

const [videoId, setVideoId] = useState([]);

const { data: allData } = useQuery(["allData", category], () => {
      return axios
        .get(
          `${base}/playlistItems?part=snippet&playlistId=${playlistId}&maxResults=48&key=${apiKey}`
        )
        .then((res) => {
          let copy = [];

          res.data.items.forEach((item) => {
            copy.push(item.snippet.resourceId.videoId);

            setVideoId(copy);
          });
          copy = [];
        })
        .catch(() => {
          console.log("fail");
        });
    }
  });

 const { data: videoList, isLoading: videoListLoading } = useQuery(
    ["videoList", videoId],
    () => {
      let id = videoId.join(",");
      return axios(
        `${base}/videos?part=snippet&part=contentDetails&id=${id}&key=${apiKey}`
      );
    }
  );