reference code

import React from 'react';
import Nav from './Nav';
import VideoPlayer from './VideoPlayer';
import VideoList from './VideoList';
import { YOUTUBE_API_KEY } from "../../config/youtube";
import { searchYouTube } from '../searchYouTube'; 

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      videos: [],
      currentVideo: null
    };
  }

  componentDidMount() {
    this.getYouTubeVideos('react tutorials');
  }

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

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

  handleVideoListEntryTitleClick(video) {
    this.setState({
      currentVideo: video
    });
  }

  render() {
    return (
      <div>
        <Nav handleSearchInputChange={this.getYouTubeVideos.bind(this)} />
        <div className="col-md-7">
          <VideoPlayer video={this.state.currentVideo} />
        </div>
        <div className="col-md-7">
          <VideoList
            handleVideoListEntryTitleClick={this.handleVideoListEntryTitleClick.bind(
              this
            )}
            videos={this.state.videos}
          />
        </div>
      </div>
    );
  }
}

export default App;

궁금했던 부분

첫번째 ))

VideoList와 searchYouTube를 import 해오는 방법이 왜 다른지 궁금했다

import VideoList from './VideoList';
import { searchYouTube } from '../searchYouTube'; 

export 하는 방법에 따라 import 받아오는 방식이 달라진다..!!

// videoList
export default VideoList;

// searchYouTube
export const searchYouTube;

참고블로그 - [es6] import, export, default cheatsheet

두번째 )) youtube API key 파일을 커밋하면 안되는이유?

자신의 api key가 외부에 노출되서는 안된다.
그래서 해당 프로젝트에서는 config/youtube.js에 아래와 같이 작성하여 사용하고자 하는 파일에서 import하여 YOUTUBE_API_KEY 사용이 가능하다

export const YOUTUBE_API_KEY = '이 파일을 커밋하면 패스워드가 노출되는 것과 마찬가지입니다';

세번째 )) API key로 어떻게 비디오 리스트를 불러오지?

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

Youtube API 문서에서 제공하는 쿼리 매개변수 중 필요한 매개변수(key, q, maxResult, type, videoEmbeddable)를 적절히 사용하면 원하는 결과를 원하는 형태로 응답받을 수 있습니다

https://www.googleapis.com/youtube/v3/search?key=내KEY값으로 시작하여 필요한 쿼리 매개변수를 뒤에 붙여주면 된다

https://www.googleapis.com/youtube/v3/search?part=snippet&key=${key}&q=${query}&maxResult=${max}&type=video&videoEmbeddable=true에 사용된 쿼리 매개변수를 살펴보면,

아래의 쿼리 매개변수에 대한 모든 설명은 Youtube API 문서를 참고했다

• part=snippet

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

• key=${key}
  - 자기 api key값을 넣어준다

• q=${query}

  • 매개변수는 검색할 검색어를 지정한다

• maxResult=${max}

  • maxResults 매개변수는 결과 집합에 반환해야 하는 최대 항목 수를 지정한다.
  • 허용값은 0 이상 50 이하이고 기본값은 5이다

• type=video

  • type 매개변수는 특정 리소스 유형만 검색하도록 검색 쿼리를 제한한다.
  • 값은 쉼표로 구분된 리소스 유형의 목록이고, 기본값은 video,channel,playlist이다
  • 허용값 : channel, playlist, video

• videoEmbeddable=true

  • videoEmbeddable 매개변수를 사용하여 웹페이지로 퍼갈 수 있는 동영상만 포함하도록 검색을 제한할 수 있다
  • 허용값
    • any : 퍼갈 수 있는지 여부에 관계 없이 모든 동영상을 반환한다
    • true : 퍼갈 수 있는 동영상만 검색한다

참고블로그 - 유튜브 API 사용법 - 동영상 검색하기