[React]-axios와 class를 사용해서 api 호출하기(2)

이번엔 진짜 api를 호출하는 Youtube class를 만들어보자.

우선 api key를 환경변수로 저장한 .env파일을 만들고 gitignore에 추가해준다.

그리고 youtube.js 파일을 만들어주는데,

// youtube.js

import axios from "axios";

export default class Youtube {
  constructor() {
    this.httpClient = axios.create({
      baseURL: "https://www.googleapis.com/youtube/v3",
      params: { key: process.env.REACT_APP_API_KEY },
    });
  }

  async search(keyword) {
    return keyword ? this.#searchByKeyword(keyword) : this.#mostPopular();
  }

  async #searchByKeyword(keyword) {
    return this.httpClient
      .get("search", {
        params: {
          part: "snippet",
          maxResults: 25,
          type: "video",
          q: keyword,
        },
      })
      .then((res) => res.data.items)
      .then((items) => items.map((item) => ({ ...item, id: item.id.videoId })));
  }

  async #mostPopular() {
    return this.httpClient
      .get("videos", {
        params: {
          part: "snippet",
          maxResults: 25,
          chart: "mostPopular",
          regionCode: "KR",
        },
      })
      .then((res) => res.data.items);
  }
}

constructor에서 내가 실제 사용할 baseURL주소와 api key를 불러온다.
그리고 아래 private 함수에서 필요한 params들을 전달한다.

나머지는 이전 FakeYoutube 만들 때와 동일하다!