[맛길] 데이터 채우기 - Youtube Data API

기획 단계에서 Serverless Function을 이용해 유튜브 영상과 상세 내용을 관리하기로 했습니다❗

 

흠.. 영상 정보를 어떻게 저장할까요🤔

직접 JSON 파일에 작성하기에는 양이 너무 많아 비효율적일 것 같습니다.

 

저는 구글링을 통해 크롤링과  Youtube Data API를 알게 되었습니다.

크롤링이 더 간단한 것 같지만, 프론트엔드 개발자라면 API를 사용하는 게 당연하겠죠👍

 

사실 크롤링이 유튜브 정책 위반이라는 내용도 있고, 크롤링 관련 재판 사례들이 있는 것 같아서 선택한 것도 없진 않습니다...😅

 

Youtube Data API

 

Youtube Data API 탐색기를 통해서 query에 "먹을텐데"를 검색하니 아래와 같은 결과가 나왔네요.

"먹을텐데" GET 요청 response

 

재생목록의 영상을 가져오려면 아래  2단계를 거쳐야해요.

1️⃣ 재생목록 API에 GET 메서드를 통해 playlistId를 알아낸다.

2️⃣ PlaylistItems API에 GET 메서드의 query Param으로 playlistId를 추가해, 영상 정보를 알아낸다.

 

데이터 요청 - 브라우저 화면

 

데이터를 JSON으로 저장하는 용도이기 때문에 UI는 간단하게 input과 button으로만 구성했습니다.

const input_search = document.getElementById("search_input");
const btn_search = document.getElementById("search_btn");

// 채널 이름으로 채널 ID를 찾고 재생목록을 가져오는 함수
async function getChannelId(name) {
  try {
    const { data, status } = await axios.get(
      "https://www.googleapis.com/youtube/v3/search",
      {
        params: {
          part: "snippet",
          key: API_KEY,
          maxResults: 50,
          type: "channel",
          q: name,
        },
      }
    );
    
    // 채널 ID 추출 및 재생목록 검색 함수 호출
    if (status === 200 && data.items.length > 0) {
      const channelId = data.items[0].snippet.channelId;
      getPlaylistId(channelId, name);
    }
  } catch (error) {
    console.log(error);
  }
}

// 채널 ID로 해당 채널의 재생목록을 가져오는 함수
async function getPlaylistId(channelId, search) {
  try {
    const {
      data: { items },
    } = await axios.get("https://www.googleapis.com/youtube/v3/playlists", {
      params: {
        part: "snippet",
        key: API_KEY,
        channelId,
        maxResults: 50,
      },
    });

    // 재생목록을 검색어를 찾으면 해당 재생목록 ID 추출
    for (let i = 0; i < items.length; i++) {
      if (items[i].snippet.title.includes(search)) {
        const playlistId = items[i].id;
        getPlaylistVideos(playlistId); // 재생목록 영상 가져오기 함수 호출
        break;
      }
    }
  } catch (error) {
    console.log(error);
  }
}

// 재생목록 ID로 해당 재생목록의 영상들을 가져오는 함수
async function getPlaylistVideos(playlistId, pageToken) {
  try {
    const { data } = await axios.get(
      "https://www.googleapis.com/youtube/v3/playlistItems",
      {
        params: {
          part: "snippet",
          key: API_KEY,
          playlistId,
          maxResults: 50,
          pageToken,
        },
      }
    );
    const json = JSON.stringify(data.items, null, 2);

    // JSON 파일 다운로드 생성
    const blob = new Blob([json], { type: "application/json" });
    const url = URL.createObjectURL(blob);

    // 링크 생성 후 자동 클릭
    const a = document.createElement("a");
    a.href = url;
    a.download = "youtube_data.json"; // 파일 이름 지정
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } catch (error) {
    console.log(error);
  }
}

btn_search.addEventListener("click", () => {
  const channelName = input_search.value;
  getChannelId(channelName);
});

 

잘 실행되는지 확인해 보겠습니다.

API 요청 성공

response로 JSON 데이터 저장 성공

JSON 데이터

 

JSON으로 데이터가 잘 저장되었습니다👍

 

Youtube Data API의 공식 문서를 참고하며, 실제 HTTP 요청을 통해 원하는 데이터를 찾다 보니 시간을 너무 많이 쓴 것 같아요. 조금 지친 것 같지만 API 문서를 파악하는 능력을 길렀으니 만족합니다🤣

 

이제 검색 키워드로 JSON 데이터를 채워 프로젝트를 진행할 일만 남았으니까 프로젝트 마무리까지 열심히 달려보겠습니다🔥

 

[맛길] 프로젝트 주제 및 기술 스택 선정