[WONTUBE] 구독 채널의 최신 영상 가져오기

구독 채널의 최신 영상을 가져오고싶은데, youtube API에 구독자의 최신 영상을 한 번에 가져오는 방법은 없는 듯 하다.

 

Subscriptions: list 는 현재 내가 구독중인 채널의 정보를 받아올 수 있다. 

생각하고 있는 로직은 Subscriptions: list를 통해 구독 채널 정보 리스트를 받아온 다음, 그 안에 있는 채널 id를 사용하여 해당 채널의 최신 영상을 받아오는 방법을 생각하고 있다.

 

export const getSubscriptionsList = async () => {
  const accessToken = getAccessToken();
  const params = {
    part: "snippet",
    mine: true,
    maxResults: 5,
  };

  try {
    const response = await youtubeAPI.get(`/subscriptions`, {
      headers: {
        Authorization: `Bearer ${accessToken}`,
      },
      params: params,
    });
    return response.data.items;
  } catch (error) {
    console.log(error);
  }
};

결과를 받아서 뜯어보면 아래와 같다.

id 관련 데이터가 너무 많다. channelId도 두 개나 되고... 어떤걸로 내가 원하는 결과를 얻을 수 있을까?

channelId 가 구독 채널의 id를 의미하는게 아닐까? 라고 생각하고 문서를 찾아봤다. API 문서를 찾아보면 아래와 같이 설명되어있다.

먼말 ..? 번역이 ... 개같이 되어있다 ㅠ

대략적으로 해석해보면 resourceId.channelId는 사용자가 식별하기 위함이고 channelId는 유튜브가 식별하기 위함인 것 같다.

따라서 resurceId에 있는 channelId를 사용하면 될 것 같다.

 

위에서 Subscriptions list 를 받아온 후 그 구독 채널의 정보를 토대로 채널 카드를 하나 만들고, 받아온 리스트의 snippet.resourceId.channelId를 하위 컴포넌트로 보내서 그 id로 /activities api에 최근 활동에 대한 요청을 보내서 최근 영상들을 불러왔다.  

 

export const getSubscriptionVideo = async (id: string) => {
  const params = {
    part: "snippet",
    channelId: id,
    maxResults: 3,
  };

  try {
    const response = await youtubeAPI.get(`/activities`, {
      params: params,
    });
    // console.log(response);
    return response.data.items;
  } catch (error) {
    console.log(error);
  }
};

귀엽다 만채!

 

ui랑 코드 관심사등 손봐야할데가 좀 많이 보인다. max-result도 제한해둬서 지금은 상관없지만 나중에 max-result를 늘려서 pagenation이랑 무한 스크롤도 구현해봐야겠다.