2주차 유튜브 API(2) - Youtube API 받아오기

https://youngentry.github.io/week2-youtube-api/

React App

Youtube API key 발급받기

유튜브 API를 이용하기 위해서는 api key를 발급받아야 한다.

https://brunch.co.kr/@joypinkgom/52

위 블로그 포스트를 참고하여 api key를 발급받았다.

잘 따라만 하면 5분이면 발급받을 수 있다.

 

=> api key 발급에 성공하면 위와 같이 사용자 인증 정보 탭에서 api key를 확인할 수 있다.

---

Youtube API 할당량

youtube api를 무한정 사용하도록 내버려 둔다면 과도한 트래픽으로 인해 서버를 유지할 수 없게 된다.

따라서 트래픽에 제한을 걸기 위한 포인트를 이용자들에게 부여하는데,

일반적으로 1일 10,000 포인트가 부여된다.

태평양 표준시 00:00, 한국의 경우 오후 4시인 16:00에 Youtube Data API 할당량이 초기화 된다.

 

검색을 하게 되면 1 포인트

댓글을 업로드하면 50 포인트

동영상을 업로드하면 1,600 포인트

 

위의 예시와 같이 요청에 따른 포인트 사용량이 다르며

api 요청에 성공하게 되면 다음과 같이 자신이 얼마만큼 이용했는지 확인할 수 있다.

 

=> 1회 검색으로는 티가 안나는 것을 볼 수 있다.

(이론상 10초에 한 번씩 자동으로 검색하는 프로그램을 만들어 24시간 돌려도 90%가 채 되지 않는다.)

 

하지만 Live Server 익스텐션을 사용하고 있다면

무한정 ctrl + s 를 통해 매번 여러 API를 호출하면 트래픽이 빠르게 바닥날 것이다.

따라서 원하는 충분히 기능을 구현하기 전까지는 최초 1회 호출로 불러온 데이터를 복사해두어 mock data로 기능을 구현하면 좋다.

---

Youtube API 이용하기

axios를 이용하여 mostPopular 리스트를 불러와 list에 저장했다.

  const [list, setList] = useState();
  const apiKey = "발급받은 API KEY";

  useEffect(() => {

    axios

      .get(`https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${apiKey}`)

      .then((res) => {

        console.log(res);

        setList(res.data.items);

      })

      .catch((error) => console.log("error", error));

  }, []);

  console.log(list);

 

 

property 설명

 

/video 경로로

part=snippet 여기서 snippet 속성은 channelId, title, description, tags, categoryId 속성을 포함한다.

chart=mostPopular 가장 인기있는 영상을 (기본 국가 세팅은 미국이겠죠)

maxResults=25 25개

들고왔다.

 

 

 

https://developers.google.com/youtube/v3/docs/videos/list#%EC%9A%94%EC%B2%AD

위의 공식 api 문서에서 다양한 속성들을 확인할 수 있다

 

 

 

 

https://developers.google.com/youtube/v3/docs/videos/list#%EC%A7%81%EC%A0%91-%EC%82%AC%EC%9A%A9%ED%95%B4-%EB%B3%B4%EC%84%B8%EC%9A%94

위의 직접 사용해보기 기능을 통해서 웹에서 api 로 받아온 데이터들을 볼 수 있다.

어떤 속성을 어떤 type으로 입력해야 하는지 확인하기도 쉽다.

 

---

받아온 데이터로 화면 출력하기

위에서

  console.log(list);

로 브라우저에 출력한 25개의 object를 트래픽을 아끼기 위해(혹시나) mockData에 저장시켰다.  

 

=> api 요청에 성공했다면 위와 같은 형태의 object 데이터를 받아볼 수 있다.

 

kind video 요청

id (아마도)동영상 id 

snippet 

└ publishedAt 발행 시간

└ channelId 채널 소유주의 고유 식별 id

└ title 동영상 제목

└ description 동영상 설명

└ thumbnails 썸네일

　└ ─ default, medium, high, standard사이즈

└ channelTitle 채널 이름

└ tags 달려있는 태그

└ categoryId 카테고리

└ liveBroadcastContent 생방송컨텐츠

 

=> 하나하나 살펴보니 위와 같은 정보들을 받아왔다.

 

 

mockData를 list에 넣고 html로 렌더링 해보자

  const [list, setList] = useState(mockData);

  return (
    <div className="main">
      <MainFilter />
      <ul className="video-list">
        {list.map((el) => {
          return <VideoCard mockVideo={el} />;
        })}
      </ul>
    </div>
  );

=> VideoCard에 영상 하나의 정보를 전달했다.

 

미리 css style을 적용해 만들어 둔 html에 데이터를 넣어주었다.

const VideoCard = ({ mockVideo }) => {
  console.log({ mockVideo });
  return (
    <>
      <li className="video-card">
        <img src={`${mockVideo.snippet.thumbnails.medium.url}`} alt="" />
        <div className="info">
          <div className="picture"> </div>
          <div className="text">
            <p className="title">{mockVideo.snippet.title}</p>
            <span className="name">{mockVideo.snippet.channelTitle}</span>
            <div className="other">
              <div className="view">{mockVideo.snippet.view}</div>
              <div className="date">{mockVideo.snippet.publishedAt}</div>
            </div>
          </div>
        </div>
      </li>
    </>
  );
};

 

=> 반응형도 잘 적용되었다. ( ;_; )