2주차 유튜브 API(7 - ERROR) - async-await 이용하여 Api Class를 만들어 봅시다.

***STATE에 CLASS는 저장할 수 없습니다.***

뒤에서 에러가 생겨서 CLASS 이용 안합니다.

---

구독 페이지를 구현해보기 전에 YoutubeApi Class를 생성해봅시다. 

  useEffect(() => {
    const params = {
      key: apiKey,
      part: "snippet",
      channelId: "UCUaT_39o1x6qWjz7K2pWcgw",
      order: "date",
      maxResults: 4,
    };

    axios
      .get("/search", { params })
      .then((res) => {
        console.log(res.data);
      })
      .catch((error) => console.log("error", error));
  }, [dispatch]);

=> 채널에서 최신 영상을 검색하는 기능

 

  useEffect(() => {
    const params = {
      key: apiKey,
      part: "snippet",
      chart: "mostPopular",
      maxResults: 20,
    };

    axios
      .get("/videos", { params })
      .then((res) => {
        dispatch(setPopularVideo([...res.data.items]));
      })
      .catch((error) => console.log("error", error));
  }, [dispatch]);

=> 인기있는 동영상 가져오는 기능

 

지금은 두 가지 뿐이지만 더 늘어날 상황을 대비한다면 분리하여 관리하는 것이 더 편하겠죠.

YoutubeApi.js 파일을 만들었습니다.

 

class YoutubeApi {
  #key;
  constructor(key) {
    this.#key = key;
  }
}

=> YoutubeApi class를 생성합니다. key를 constructor에 전달하여 api 인증을 할 수 있도록 합니다.

 

import axios from "axios";

axios.defaults.baseURL = "https://youtube.googleapis.com/youtube/v3";

class YoutubeApi {
  #key;
  constructor(key) {
    this.#key = key;
  }

  /**
   * @param {number} amount 1~50 의 숫자
   * @returns res.data.items
   */
  async generalMostPopularVideos(amount) {
    const params = {
      key: this.#key,
      part: "snippet",
      chart: "mostPopular",
      regionCode: "kr",
      maxResults: amount,
    };

    try {
      const response = await axios.get("/videos", { params });
      console.log(response.data.items);
      return response.data.items;
    } catch (error) {
      console.log("error", error);
    }
  }
}

=> async로 비동기 메서드 generalMostPopularVideos 를 만들었습니다.

=> 인자로는 amount를 주어 반환받을 비디오 개수를 정할 수 있습니다.

=> 요즘 유행도 알아보고자 regionCode:"kr" 로 지역 한국으로 바꿨습니다.

 

    try {
      const response = await axios.get("/videos", { params });
      console.log(response.data.items);
      return response.data.items;
    } catch (error) {
      console.log("error", error);
    }

=> try - catch 문을 이용하여 가독성을 높였습니다.

=> await 로 데이터를 불러온 뒤 items를 반환하도록 합니다.

 

const apiKey = process.env.REACT_APP_API_KEY;
const Youtube = new YoutubeApi(apiKey);

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    (async () => {
      const mostPopularVideos = await Youtube.generalMostPopularVideos(20);
      console.log(mostPopularVideos);
      dispatch(setPopularVideo(mostPopularVideos));
    })();
  }, [dispatch]);

=> apiKey를 전달하여 Youtube class를 생성했습니다.

=> async 비동기 함수로 불러온 데이터를 mostPopularVideos에 저장하고 (JavaScript - IFFE: 함수가 정의되면 실행시킴) 

=> setPopularVideo 로 popularVideo state에 저장합니다.

---

참고 :

개발블로그 axios, await, async

stackoverflow ES6 async/await in classes

개발블로그 [React]useEffect Hook에서 async await를 사용하여 API 호출 (IFFE 참고함)

개발블로그 Axios 다양하게 활용하기: async await

앞으로는 까먹으면 다시 볼 수 있게 참고한 블로그도 기록해봅시다.

---