cover

이번에 Youtube 재생 리스트에서 데이터를 가져와서 음악에 대한 정보를 저장하고 이를 불러와서 뮤직플레이어를 만들어봤는데요. 그 과정에서 알게된 Youtube Data API v3 에 대해 다루어보려합니다.

따라하기만해도 바로 데이터를 가져와볼 수 있으니 걱정마세요! 그리고 업로드하거나 쓰는 것만 아니면 왠만해서는 돈이 안드니까, 돈이 나갈걸 걱정하지 않으셔도 됩니다. 비용 청구에 대해서도 아래에 자세히 다뤄볼게요.


Youtube Data API v3 소개

YouTube Data API v3는 Google이 제공하는 강력한 API로, YouTube의 방대한 데이터에 접근하고 이를 활용할 수 있는 다양한 기능을 제공합니다. 이 API를 통해 개발자는 YouTube의 비디오, 채널, 재생목록, 댓글 등의 정보를 검색, 조회, 수정할 수 있으며, YouTube 플랫폼과 상호작용하는 맞춤형 애플리케이션을 개발할 수 있습니다.

주요 기능

비디오 조회 및 업로드: 개발자는 API를 통해 비디오 목록을 조회하거나 새로운 비디오를 업로드할 수 있습니다.
채널 관리: 채널의 정보를 조회하고, 구독자 수 같은 통계 데이터에 접근할 수 있습니다.
재생목록 관리: 재생목록을 생성, 수정, 삭제하고, 재생목록에 비디오를 추가하거나 제거할 수 있습니다.
댓글 시스템: 비디오에 달린 댓글을 조회하거나 댓글을 작성할 수 있습니다.
검색 기능: 키워드, 카테고리, 위치 등 다양한 필터를 사용하여 비디오를 검색할 수 있습니다.

프로젝트 만들기

당연히 구글 API이기 때문에 구글 아이디가 있어야합니다. 그리고 Google API 콘솔에 접속해주세요.

loading

처음 접속하는 거라면 이렇게 서비스 약관에 동의해야하는데 두 개를 체크하고 동의 및 계속하기를 클릭합니다.

그러면 프로젝트가 없으니 처음에는 빈화면인데요. 프로젝트 선택을 클릭해주세요.

loading

그리고 새 프로젝트를 클릭!

loading

그리고 프로젝트 이름을 대략 적고 만들기를 클릭

loading

이렇게 프로젝트가 만들어졌습니다

loading

Youtube Data API v3 추가하기

우리 프로젝트에 이제 Youtube Data API v3를 추가해야합니다. 상단 검색에서 youtube data 를 검색하고 Youtube Data API v3를 클릭합니다.

loading

그리고 사용을 클릭해주시면 끝입니다! 간단하죠?

loading

그러면 이런 화면이 나오는데 우리 API 얼마나 쓰였는지 나와요!

loading

API Key 생성

이제 이 API를 사용하기 위한 key가 필요한데요. API 키(API Key)사용자나 응용 프로그램이 API를 사용할 수 있도록 인증하는 문자열입니다. API 키는 일반적으로 긴 문자열로 구성되어 있으며, 서비스 제공자에 의해 생성되어 사용자에게 제공됩니다.

좌측에서 사용자 인증 정보를 클릭해주세요.

loading

그리고 사용자 인증 정보 만들기를 클릭

loading

그리고 API 키를 클릭

loading

이렇게 key가 생성되었습니다! 이 값은 절대 다른 사람들이 알면 안되요! 저는 삭제할거라 괜찮습니다~

이제 이대로 사용해도 되지만 이 키를 이용하면 우리 아이디의 권한으로 어떤 API든 사용할 수 있어서 제한을 하는게 좋은데요. API 키를 수정을 클릭합니다.

loading

그리고 API 제한사항 - 키 제한 을 클릭해주세요

loading

그러면 이렇게 Select APIs 드롭다운이 생기는데요.

loading

이걸 클릭해서 youtube를 검색해서 Youtube Data API v3를 체크하고 확인 버튼을 클릭합니다.

loading

이제 저장을 누르면 불러올 준비가 완료된 건데요. 그 전에 API Key는 복사해두세요~

loading

안하셨더라도 여기서 키 표시를 통해서 하실 수 있습니다.

loading

API 요청 종류

호출할 수 있는 종류는 꽤 많습니다.

Videos: list  |  YouTube Data API  |  Google for Developers

https://developers.google.com/youtube/v3/docs/videos/list?hl=ko

보통 요청할 때 https://www.googleapis.com/youtube/v3/(유형) 형태로 http 요청을 하게 됩니다.

리소스 유형

1. 비디오 관련 요청
GET videos: 비디오 목록을 검색하고, 비디오 정보를 조회합니다.
POST videos: 새로운 비디오를 업로드합니다.
PUT videos: 기존 비디오의 정보를 수정합니다.
DELETE videos: 특정 비디오를 삭제합니다.
2. 채널 관련 요청
GET channels: 채널 정보를 조회하거나, 특정 조건을 만족하는 채널 목록을 검색합니다.
PUT channels: 채널 정보를 수정합니다.
3. 재생목록 관련 요청
GET playlists: 재생목록 정보를 조회하거나, 특정 조건을 만족하는 재생목록 목록을 검색합니다.
POST playlists: 새로운 재생목록을 생성합니다.
PUT playlists: 재생목록 정보를 수정합니다.
DELETE playlists: 재생목록을 삭제합니다.
4. 재생목록 항목 관련 요청
GET playlistItems: 특정 재생목록에 포함된 비디오 목록을 검색합니다.
POST playlistItems: 재생목록에 비디오를 추가합니다.
DELETE playlistItems: 재생목록에서 비디오를 제거합니다.
5. 댓글 및 댓글 스레드 관련 요청
GET commentThreads: 특정 비디오 또는 채널에 대한 댓글 스레드를 검색합니다.
POST commentThreads: 새로운 댓글 스레드를 생성합니다.
GET comments: 특정 댓글 스레드에 포함된 댓글을 검색합니다.
POST comments: 댓글 스레드에 댓글을 추가합니다.
PUT comments: 댓글 내용을 수정합니다.
DELETE comments: 댓글을 삭제합니다.
6. 검색 요청
GET search: 키워드, 카테고리, 위치 등 다양한 필터를 사용하여 비디오, 채널, 재생목록을 검색합니다.

그리고 각 유형마다 어떤 데이터를 불러올지 매개변수를 전달하는데요. 예를 들면 동영상(videos)는 다음과 같은 매개변수를 가지고 있습니다.

Videos: list  |  YouTube Data API  |  Google for Developers

https://developers.google.com/youtube/v3/docs/videos/list?hl=ko
loading

part라는 값은 어떤 값을 가져올지 지정할 수 있고, 필터는 어떤 비디오를 가져올 지 지정하는 값이에요. 예를 들어 part=contentDetails&id=7UDKo_rrQVY 라고하면 7UDKo_rrQVY 라는 아이디를 가진 유튜브 영상에서 영상 디테일 값(contentDetails)을 가져온다는 뜻이죠.

보통은 snippet과 contentDetails에 필요한 데이터가 대부분 들어있습니다.

사용 예시

글로만 보니까 이해가 잘 안되시죠? 그래서 예시를 하나 들어보겠습니다. 예를들어 Youtube 하나를 볼 때 v= 뒤에 있는 값이 id인데요.

loading

이 비디오에 대한 정보를 가져와보겠습니다.

javascript
      const videoId = "7UDKo_rrQVY"; // 조회하고자 하는 비디오의 ID를 입력합니다.
const apiKey = "AIzaSyBGvqGfOC0qoKOKBYyClxWCnbSjpvVOTso"; // 유효한 YouTube Data API 키를 입력합니다.
const apiUrl = `https://www.googleapis.com/youtube/v3/videos`; // API URL
const part = "snippet,contentDetails"; // 조회하고자 하는 항목들을 입력합니다.

const url = `${apiUrl}?part=${part}&id=${videoId}&key=${apiKey}`; // 완성된 요청 URL

fetch(url)
  .then((response) => response.json())
  .then((data) => console.log(data));
    

fetch는 기본적으로 get 요청을 합니다. 그래서 비디오 정보를 가져오게 되는데요.

loading

items 값의 첫 번째 부분을 보면 이런 식으로 들어있습니다.

loading

제목, 설명, 썸네일, 채널명, 영상 길이 등 정보가 다양합니다! 이런식으로 글에 대한 설명을 참조해서 이런 식으로 불러와서 사용하면 됩니다!