Youtube Data API 사용하기, React에서 유튜브 클론코딩(with 고양이 비디오들)

카테고리 없음

Youtube Data API 사용하기, React에서 유튜브 클론코딩(with 고양이 비디오들)

쿠키는 서비스 2023. 12. 19. 12:00

유튜브 API를 사용해서 유튜브 클론코딩을 해보려고 한다.

아래의 페이지에 들어가보면 영상 리스트를 가지고 올 수 있는 data api를 제공한다.

https://developers.google.com/youtube/v3/docs/search/list

Search: list | YouTube Data API | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English Search: list 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. API 요청에 지정된 쿼리 매개변

developers.google.com

브라우저 창을 가로로 적당히 크게 열면 Try this method 배너를 확인할 수 있다.

이 배너에서 스크롤을 쭉 내린다.

Show code를 클릭해서 샘플 코드를 확인할 수 있다.

저는 JavaScript를 선택했습니다.

고양이라고 검색한 영상 데이터를 얻고 싶었기 때문에 q에 고양이를 입력해주면 다음과 같이 코드가 작성됩니다.

YOUR_API_KEY에 내가 발급받은 key를 넣어주고 코드를 가져다가 사용할 수 있습니다.

공식 사이트에서는 위와 같이 API를 확인해볼 수 있습니다.

1. 프로젝트 설정 및 의존성 설치:

먼저, React 앱을 생성하고 필요한 패키지를 설치합니다.

npx create-react-app youtube-clone 
cd youtube-clone 
npm install axios @material-ui/core

2. YouTube API 키 가져오기:

YouTube API를 사용하기 위해 Google Cloud Console에서 프로젝트를 생성하고 YouTube Data API를 활성화한 후 API 키를 발급받습니다.

3. API 호출을 위한 Axios 설정:

src 폴더 안에 api.js 파일을 생성하고 다음과 같이 YouTube API를 호출할 수 있는 Axios 인스턴스를 설정합니다.

// src/api.js

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3/',
  params: {
    part: 'snippet',
    maxResults: 5,
    key: 'YOUR_YOUTUBE_API_KEY', // 여기에 발급받은 API 키를 넣어주세요.
  },
});

export default instance;

4. YouTube 비디오 목록 가져오기:

src 폴더 안에 VideoList.js 파일을 생성하고 다음과 같이 YouTube 비디오 목록을 가져오는 컴포넌트를 작성합니다.

// src/VideoList.js

import React, { useState, useEffect } from 'react';
import api from './api';

function VideoList() {
  const [videos, setVideos] = useState([]);

  useEffect(() => {
    const fetchVideos = async () => {
      try {
        const response = await api.get('/search', {
          params: {
            q: '고양이', // 원하는 검색어를 입력하세요.
          },
        });
        setVideos(response.data.items);
      } catch (error) {
        console.error('Error fetching videos:', error);
      }
    };

    fetchVideos();
  }, []);

  return (
    <div>
      <h2>YouTube Clone</h2>
      <ul>
        {videos.map((video) => (
          <li key={video.id.videoId}>
            <img
              src={video.snippet.thumbnails.medium.url}
              alt={video.snippet.title}
            />
            <p>{video.snippet.title}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default VideoList;

5. 메인 앱 컴포넌트 작성:

src 폴더 안에 있는 App.js 파일을 수정하여 VideoList 컴포넌트를 포함하도록 합니다.

// src/App.js

import React from 'react';
import VideoList from './VideoList';

function App() {
  return (
    <div className="App">
      <VideoList />
    </div>
  );
}

export default App;

6. 실행:

프로젝트 폴더에서 다음 명령어를 실행하여 앱을 시작합니다.