[TIL/PLii]youtube API를 가져오기

김의진·2023년 7월 19일

React TIL youtubeapi

TIL/WIL

목록 보기

25/44

💻youtube API 유튜브 데이터 가져오기

👩🏼‍💻 YOUTUBE API-KEY 만들기

YoutubeAPI공식문서
https://console.developers.google.com

1.youtube API KEY 발급받기

https://developers.google.com/youtube/v3?hl=ko

홈화면 - 시작하기 클릭

순서대로 진행하고 APIs Console 클릭

라이브러리 이동

내리다 보면 YouTube가 보인다.

0) 자신의 구글 계정으로 로그인한다. 없으면 만든다. 전화번호인증을 통해 쉽게 만들수 있다. 동일인이 여러개의 계정생성가능하다.
1) 로그인 후에, 구글 API 콘솔 https://console.developers.google.com
접속한다. 구글 검색 이용 하자.
2) 콘솔화면 상단 GoogleAPIs 오른쪽 옆에 '프로젝트 선택'을 클릭한다.
3) 선택할 프로젝트가 없다면, 새프로젝트를 만든다.
4) 만든 프로젝트를 선택한다. 콘솔화면 상단 GoogleAPIs 옆에 선택한 프로젝트이름이 있는지 확인한다. (아래 순서 5,6은 프로젝트 선택 이후만 가능)
5) 메뉴 중에서 '사용자인증정보'를 클릭한후, 사용자인증정보를 만든다. 새로운 API-KEY가 생성된다.
6) 메뉴 중에서 '라이브러리'를 클릭한후, YouTube Data API v3를 선택하고, 이후 화면에서 상단의 '사용설정' 버튼을 클릭한다.

2.https://developers.google.com/youtube/v3/docs/videos/list

  const getYoutubeVideos = async () => {
    const response = await axios.get('https://www.googleapis.com/youtube/v3/search', {
      params: {
        key: '발급 받은 키값을 넣어준다 ',
        type: 'video',
        part: 'snippet',
        videoCategoryId: '10',
        maxResults: 10
      }
    });
    setVideos(response.data.items);
  };

❓발생한 이슈/고민

키를 발급 받아서 사용하던 중 트래픽 초과로 403오류가 떳다..

Request failed with status code 403

ㅜㅜ 몇번 쓴것 같지도 않은디

💡해결과정

데이터를 임시로 만들어서 간단하게 해결 .. 했으나 내일은 어떻게 해야 할지 팀원들과 좀 더 상의가 필요할 것 같다.
우선 API를 받아온 목록을 저장해서 사용해야 하는지 등등 다양한 의견들이 나오고 있음

👩🏼‍💻 검색기능 구현하기

( 내가 맡은 부분은 검색기능을 구현하는 것 )


import React, { useState } from 'react';
import data from './data';
const Header = () => {
 
  const [userInput,setUserInput] = useState("");
  const getSearchData = (e) => {
    setUserInput(e.target.value.toLowerCase());
    } // 영어 입력시 자동으로 소문자 변환

  return <div style={{
    backgroundColor: "#4D89E2",
    width:"100%",
    height:"600px",
    textAlign:"center",
    color:"white",
    
  }}>
    <h1>헤더입니다.</h1>
    <form >
    <input placeholder="검색어를 입력하세요"
      onChange={getSearchData}></input> 
    <button > 검색버튼 </button>
    </form>
      <div> 
        <h2>메인으로뺄거에요</h2>
          <div>
            {data.filter((val) => {
              if(userInput.trim() == "" ){
                return val
              } else if (val.name.toLowerCase().includes(userInput.toLowerCase())){
                return val
              }
            }).map((e)=>{
              return <li>{e.name}{e.age}{e.contry}</li>
            })}
          </div>
      </div>
  </div>;
};

export default Header;