Petflix - 유튜브 프로필 사진 (API 호출 함수)

🌼 채널 프로필 사진 가져오기 

 

게시자(채널)의 프로필 사진은 동영상 데이터에 포함되어 있지 않기 때문에, 채널 정보를 따로 요청해야 한다. 

게시자 프로필 사진 가져오는 방법

1. **video.snippet.channelId**로 게시자(채널)의 ID를 가져옵니다.
   예: UC_x5XG1OV2P6uZZ5FSM9Ttw
2. channelId를 사용해 channels 리소스를 요청하면, 해당 채널의 정보를 가져올 수 있다.
   여기서 **snippet.thumbnails.high.url**을 통해 채널 프로필 사진을 얻는다.

 

 

YouTube Data API로 동영상 데이터를 요청하고 channelId를 가져올 수 있는데 까지는 했다. 

그다음은 채널 API로 프로필 사진 요청을 해야 한다. 

---

 

🌼 < API 호출 함수 - fetchChannelDetails 함수의 동작 >

 

1. axios 클라이언트 설정 

import axios from "axios";

const apiClient = axios.create({
  baseURL: "https://youtube.googleapis.com/youtube/v3",
});

 

axios는 HTTP 요청을 쉽게 처리할 수 있도록 도와주는 라이브러리로

axios.create()를 사용하면 기본 설정을 포함한 axios 인스턴스를 생성할 수 있다.

 

baseURL: 모든 요청 URL 앞에 자동으로 추가되는 기본 URL.

 

2. fetchChannelDetails 함수 정의

export const fetchChannelDetails = async (channelIds: string[]) => {

 

채널 ID의 배열 (channelIds)을 인자로 받아서 해당 채널들의 정보를 가져오는 비동기 함수

 

3. API 요청

 

try {
  const response = await apiClient.get("channels", {
    params: {
      part: "snippet",
      id: channelIds.join(","),
      key: import.meta.env.VITE_REACT_APP_API_KEY,
    },
  });

 

"https://youtube.googleapis.com/youtube/v3/channels" 엔드포인트에 요청

params 객체: 쿼리 파라미터를 URL에 포함시킨다. 

- part: "snippet": 채널의 주요 정보(이름, 설명, 썸네일 등)를 요청

- id: channelIds.join(","): 배열 형태로 받은 channelIds를 쉼표로 연결하여 하나의 문자열로 변환

- key: import.meta.env.VITE_REACT_APP_API_KEY: API 요청에 사용되는 개인 API 키를 환경 변수에서 불러온다. 

 

4. 에러 처리

catch (error) {
  console.log("channelIds error", error);
  throw error;
}

 

API 요청이 실패할 경우 catch 블록이 실행한다.

발생한 에러를 다시 호출한 쪽으로 전달 (throw error)한다. => 호출한 쪽에서 에러 처리가 필요할 때 사용

 

<전체 코드>

 

//cannelApi.tsx

import axios from "axios";

const apiClient = axios.create({
  baseURL: "https://youtube.googleapis.com/youtube/v3",
});

export const fetchChannelDetails = async (channelIds: string[]) => {
  try {
    const response = await apiClient.get("channels", {
      params: {
        part: "snippet",
        id: channelIds.join(","),
        key: import.meta.env.VITE_REACT_APP_API_KEY,
      },
    });
    console.log("fetchChannelDetails", response);
    return response.data.items;
  } catch (error) {
    console.log("channelIds error", error);
    throw error;
  }
};