youtube api 사용하기 - 서버(1)

YouTube API와의 상호 작용 설정
YouTube API를 이용해 YouTube 동영상에 액세스하려면 개발자 키가 있어야합니다. 3rd party API를 사용하는 것은 데이터에 액세스하는 사용자를 추적하거나, 속도 제한을 적용하고, 때로는 수익을 창출하기를 원하기 때문에 이는 서비스 제공에서 아주 일반적인 관행입니다. YouTube API에 대한 액세스는 무료이며 필요한 것은 Google 계정뿐입니다.

여기서 YouTube API를 신청해 받을 수 있다.)

• If prompted, select a project or create a new one. It doesn't matter what you name a new project

• Click Enable and then Go to Credentials

• Select Web browser from the drop-down and the Public data radio button
  Give your key any name, leave the optional field blank, and click Create
  Make your key available to the rest of your application from a new file, config/youtube.js

우리는 YoutubeAPI의 Search:list 엔드포인트를 이용해 동영상을 검색하고 있다.

Search: list

API 요청에 지정된 쿼리 매개변수와 일치하는 검색결과의 모음을 반환합니다. 기본적으로 검색결과의 집합은 쿼리 매개변수와 일치하는 video, channel, playlist 리소스를 식별하지만, 특정 유형의 리소스만 검색하도록 쿼리를 구성할 수도 있습니다. 지금 사용해 보거나 예를 참조하세요.

요청

HTTP 요청

GET https://www.googleapis.com/youtube/v3/search

다음 GET 요청 쿼리에서 지원하는 매개변수 목록을 보면서 원하는 요청을 전달할 수 있다.
Search:list

기본적으로 GET 요청에 필요한 매개변수들이다.
part(필수), key, q, maxResults, type, videoEmbeddable

    `https://www.googleapis.com/youtube/v3/search?
    part=snippet&
    key=${key}&
    q=${query}&
    maxResults=${max}&
    type=video&
    videoEmbeddable=true`,

• part는 string값으로 필수 매개변수이다. API응답이 포함하는 search 리소스 속성 하나 이상의 쉼표로 구분된 목록을 지정한다. 매개변수 값에 포함할 수 있는 part 이름은 id 및 snippet이다.(part="id" or "snippet")
  매개변수가 하위 속성을 포함하는 속성을 식별하는 경우, 하위 속성이 응답에 포함됩니다. 예를 들어 search 결과에서 snippet 속 속성은 결과의 제목, 설명등을 식별하는 다른 속성을 포함한다.
  part=snippet을 설정하는 경우 API응답은 중첩된 속성도 모두 포함한다.(id로 하면 snippet은 안 받는다. snippet으로 하면 둘 다 받는다.)

• key는 API에 접근할 수 있는 key를 의미한다.

• q는 string값으로 검색할 검색어(쿼리)를 지정한다.

• maxResults는 요청 결과로 반환하는 객체의 최대 수이다. unsigned integer(부호없는 정수)값으로 기본값 5, 0~50까지 허용한다.

• type은 string으로 특정 리소스 유형만 검색하도록 검색 쿼리를 제한한다. 기본값은 video, channel, playlist이다.

• videoEmbeddable은 string으로 웹페이지로 퍼갈 수 있는 동영상만 포함하도록 검색을 제한할 수 있다. any-모든 동영상 반환, true-퍼갈 수 있는 동영상만 반환

매개변수

GET 요청으로 받아오는 정보는 다음과 같다.
이런 객체들을 배열 형식으로 받아온다(검색결과 갯수 max: "n"만큼 가져온다)

다음은 위에 작성한 GET 요청으로 받아오는 정보이다.

 {
    "kind": "youtube#searchResult",
    "etag": "VKFGGFS5sCQ0nXMVHLaXkDgSoyk",
    "id": {
      "kind": "youtube#video",
      "videoId": "Mb-pqAnfaeI"
    },
    "snippet": {
      "publishedAt": "2020-02-29T03:53:07Z",
      "channelId": "UCPiLe0hwTpPdvwKqQOzgs0A",
      "title": "[코드스테이츠] 배움의 기회를 미루지 마세요",
      "description": "코드스테이츠 엔지니어 박준홍님의 불꽃연기를 감상하세요",
      "thumbnails": {
        "default": {
          "url": "https://i.ytimg.com/vi/Mb-pqAnfaeI/default.jpg",
          "width": 120,
          "height": 90
        }
      },
      "channelTitle": "Code States",
      "liveBroadcastContent": "none",
      "publishTime": "2020-02-29T03:53:07Z"
    }
  }

이제 HTTP GET 요청을 보내는 searchYouTube.js 파일을 살펴본다.
fetch함수를 사용하고 있으며 매개변수로 options, callback을 받고 있다.
options는 구조분해화로 options 속성인 {query, max, key}를 받아오고 있다.

export name 형식으로 다음 함수를 export하고 있다.

//searchYouTube.js
export const searchYouTube = ({ query, max, key }, callback) => {
  fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&key=${key}&q=${query}&maxResults=${max}&type=video&videoEmbeddable=true`
        ,{method: "GET"}
       ).then((resp)={return resp.json()})
        .then((items) =>{callback(items)})

GET 요청으로 받은 string 값(resp)을 resp.json()으로 json파일로 변환한다.
변환된 값(items)을 callback 함수에 매개변수로 넣는다. 이제 export한 searchYouTube를 사용하는 App.js로 돌아가보면 다음과 같은 메소드를 발견한다.

componentDidMount() {
    this.getYouTubeVideos("코드스테이츠");
  }

getYouTubeVideos(query) {
    var options = {
      key: YOUTUBE_API_KEY,
      query: query,
      max: 2
    };

    searchYouTube(options, videos =>
      this.setState({
        videos: videos,
        currentVideo: videos[0]
      })
    );
  }

App.js가 처음 렌더링되어 실행할 때 검색 결과값을 코드스테이츠로 하였다. 검색값이 query가 되어 options에 query속성에 들어가게 되고, key, max 속성값과 함께 searchYouTube()의 매개변가 되고 콜백함수와 함께 이 메소드를 호출한다.
호출로 인해 searchYouTube.js의 const searchYouTube함수 안에서 fetch GET 요청에 options의 값이 들어가게 되고, 요청결과(items)가 callback의 매개변수로 들어가게 되어 callback함수를 실행시킨다.
콜백함수에서는 setState로 videos, currentVideo state에 응답(videos)값과 videos의 0번째 배열 값을 전달한다.