[Develog] 타입스크립트 + 유튜브 API로 데이터 요청 후 파이어베이스로 저장하는 방법

첫 번째로 했던 작업은 타입스크립트로 유튜브 API를 요청하고

요청한 데이터를 가공해서 파이어베이스에 저장하는 방법이었다.

이 때는 API 사용법이 아직 익숙하지 않아 플레이리스트를 요청하는 방법을 몰랐고

videoId가 있는 단일 영상 데이터만 받았다.

코드 설명

1. API 요청

 axios
      .get(
        `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=자바스크립트&order=relevance&key=${구글APIkey}`
      )
      .then((res) => {
        console.log(res);
        setPlaylist(res.data.items);
      })
      .catch((err) => {
        console.log(err);
      });

axios로 유튜브 API를 요청한다.
저 링크의 뜻은 내가 자바스크립트로 검색한 연관성 높은 비디오 중 5개만 줘! 라는 뜻이다.

저게 성공하면 useState로 요청 받은 데이터를 object[] 형태로 저장한다.

1) part= id or snippet : id 이외에 다양한 데이터가 필요할 땐 snippet 속성을 사용한다.
2) maxResult : 0~50까지 설정할 수 있고 기본값은 5이다.
3) q : 검색어, 유튜브에서 검색할 내용을 입력하면 된다.
4) order: 정렬방법, date,rating, relevande, title, videoCount, viewCount 
5) key : 구글 클라우드에 요청해서 받은 API키

아래 링크에서 데이터를 확인해 볼 수 있으니 사용해 본후에 링크 적용하면 된다.

Search: list  |  YouTube Data API  |  Google Developers

 

2. 파이어베이스에 데이터 저장

  {
      playlist &&
        playlist.map((i: any, idx) => {
          if (i?.id?.videoId) { //videoId값이 있다면 데이터 추가
            addDoc(collection(dbService, 'CLASS'), {
              category: 'javascript',
              channelId: i?.snippet?.channelId,
              channelTitle: i?.snippet?.channelTitle,
              title: i?.snippet?.title,
              videoId: i?.id?.videoId,
              description: i?.snippet?.description,
              thumbnail: i?.snippet?.thumbnails.high.url,
            });
          }
        });
    }
    return null;
  };

위에서 useState로 저장한 데이터를 map으로 돌려서 데이터를 가공하고 저장한다.

그럼 파이어베이스 파이어스토어(데이터베이스)에 이런식으로 데이터가 저장된다.

 

전체 코드

const InsertData = () => {
  const [playlist, setPlaylist] = useState([]);
  const onClickHandler = (e: React.MouseEvent) => {
    e.preventDefault();
    axios
      .get(
        'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=자바스크립트&order=relevance&key=AIzaSyBInemS4UAbNOJHtXpG0OW1neY96YqyGmQ'
        // 'localhost:3000/dashboard'
        //i.id.videoId
      )
      .then((res) => {
        console.log(res);
        setPlaylist(res.data.items);
      })
      .catch((err) => {
        console.log(err);
      });

    {
      playlist &&
        playlist.map((i: any, idx) => {
          console.log(i, idx);
          if (i?.id?.videoId) {
            addDoc(collection(dbService, 'CLASS'), {
              category: 'javascript',
              channelId: i?.snippet?.channelId,
              channelTitle: i?.snippet?.channelTitle,
              title: i?.snippet?.title,
              videoId: i?.id?.videoId,
              description: i?.snippet?.description,
              thumbnail: i?.snippet?.thumbnails.high.url,
            });
          }
        });
    }
    return null;
  };
  return (
    <div>
      <Button onClick={onClickHandler}>test</Button>
    </div>
  );
};