Create myYouTube with React

🌻 이번 스프린트를 가장 즐겁게 몰입했다. 항상 그러하듯, 처음에는 정말 막막했다. 하지만 처음으로 API도 적용해보고 계속 안되던 것이 결국 될 때, '역시 하면 되는구나'를 또 한번 느끼게 해준 고마운 스프린트였다.

React Sprint ⎮ Video Player App - 1

5. YouTube API와의 상호 작용 설정

---

먼저 Google's YouTube API에 접속하고

프로젝트를 만들었다.

YouTube Data API v3를 선택했다. (that provides access to YouTube data, such as videos, playli...라고 써 있길래)

API 호출 위치는 웹브라우저(자바스크립트), 데이터 유형은 public data를 선택했다.

API Key를 받았다!

이제 API를 검색하면 위 사진과 같은 화면이 나오게 된다. 그럼 성공이다. API key를 프로젝트 내의 youtube.js 파일을 만들어 변수에 담아두었다.

6. 재사용할 수 있는 API 헬퍼 만들기

---

솔직히 헬퍼 함수를 어떻게 만들어야 할지 감이 잡히지 않아서 이 부분에 시간이 정말 많이 소요됐다. YouTube 동영상을 검색하려면 API의 Search:lit 엔드포인트를 사용한다. 보다 체계적으로 코드를 관리하려면, 엔드포인트와 상호작용하는 헬퍼 함수를 작성하는 것이 좋다고 한다. 처음에는 이 말이 이해가 잘 되지 않았다. 하지만 API 문서에 그 답이 나와 있었다.

헬퍼 함수를 만들기 위해 먼저 API 문서를 유심히 살펴봤다.

일단 HTTP 요청(GET) URL은 이렇게 나와있다. 그래서 일단 Postman으로 key 값을 입력하여 GET 요청을 보내봤다.

오.. 응답을 받았다. 신기했다. '아, 응답을 받아서 이 응답을 가공하는 것이 헬퍼 함수의 역할이구나'를 깨달았다. 구현해보자. 스프린트에서 헬퍼 함수의 조건과 요구사항은 다음과 같다.

• XHR, fetch, jQuery 무엇이든 좋다. Search:list 엔드포인트에 GET 요청을 보내라. 이번 스프린트에는 XHR을 선택했다.

• callback 함수를 파라미터로 받아야 한다. 엔드포인트에 호출 후 실행하는 함수이고, 이때 콜백의 인자(argument)는 비디오 배열로 넘겨야 한다.

• 옵션을 담는 객체를 파라미터로 받는다.

• query: 검색어, 즉 API 문서의 q 매개변수에 해당한다.

• max: 가져올 동영상의 최대 개수이며, 기본값은 5이다. 그래서 Postman에서 응답이 5개가 왔구나. API 문서에서 maxResults 매개변수에 해당된다.

• key: 인증된 YouTube API키 입니다. API 요청은 key 매개변수를 항상 포함해야 한다.

• API 호출 시, 다음 매개변수를 반드시 넘겨주어야 한다.
  

• part의 값은 snippet으로 지정해야 한다.
  

• type의 값은 video으로 지정해야 한다.

그리하여, searchYouYube.js에 있는 searchYouTube 함수를 다음과 같이 작성했다. XHR을 통해 GET 요청을 보냈고 위에서 Postman의 응답을 보고 알 수 있겠지만 응답에 성공하는 경우 다음과 같은 구조로 응답 본문을 반환한다.

response

{
  "kind": "youtube#searchListResponse",
  "etag": etag,
  "nextPageToken": string,
  "prevPageToken": string,
  "pageInfo": {
    "totalResults": integer,
    "resultsPerPage": integer
  },
  "items": [
    search Resource
  ]
}

응답 객체의 items 속성에 비디오 정보들이 들어있다.

response.items

{
  "kind": "youtube#searchResult",
  "etag": etag,
  "id": {
    "kind": string,
    "videoId": string,
    "channelId": string,
    "playlistId": string
  },
  "snippet": {
    "publishedAt": datetime,
    "channelId": string,
    "title": string,
    "description": string,
    "thumbnails": {
      (key): {
        "url": string,
        "width": unsigned integer,
        "height": unsigned integer
      }
    },
    "channelTitle": string
  }
}

그러므로, callback 함수에 response.items 배열을 넘겼다.

7. 실시간 데이터로 앱 초기화

---

실시간 데이터를 통합하기 위해 searchYouTube에서 리턴하는 실시간 동영상을 이용해 앱을 렌더링 해야했다. React life cycle을 이해해야 했는데 워낙 훌륭한 그림이 있다.

componentDidMount()를 이용하여 구현했다.

// App.js 상단에 searchYouTube() 함수의 첫 번째 인자로 전달할 객체를 선언했다.
const youTube = {
  query: 'parkhyoshin'
  max: 10,
  key: YOUTUBE_API_KEY,
};

// GET 요청을 통한 응답을 배열로 반환하는 함수(searchYouTube)를 호출하고, 
// callback 함수를 통해 받은 배열 result를 setState()을 통해 상태에 적용한다.
componentDidMount() {
  searchYouTube(youTube, (result) => {
    this.setState({ videos: [...result], current: result[0] });
  });
} 

위의 그림을 봐도 그렇고 componentDidMount() 공식 문서에 따르면 componentDidMount()는 컴포넌트가 마운트된 직후 호출되고, 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치라고 나와있다.

또한, componentDidMount()에서 즉시 setState()를 호출하는 경우, 이로 인하여 추가적인 렌더링이 발생하지만, 브라우저가 화면을 갱신하기 전에 이루어질 것이다. 이 경우 render()가 두 번 호출되지만, 사용자는 그 중간 과정을 볼 수 없을 것이라고 나와 있다. 하지만 이런 사용 방식은 성능 문제로 이어지기 쉬우므로 주의가 필요하다.

8. 실시간 검색 구현

---

Search 컴포넌트를 구현하고, 다른 컴포넌트를 업데이트했다. <input> 상자에 사용자가 검색어를 입력하고, 검색 버튼을 누르면 그 때 API를 요청하여 결과를 화면에 업데이트하는 형태로 구현했다. 최종 코드는 다음과 같다.

App.js

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

const youTube = {
  query: 'parkhyoshin',
  max: 10,
  key: YOUTUBE_API_KEY,
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      videos: fakeData,
      current: fakeData[0],
    };
    this.handleSearch = this.handleSearch.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  // API를 요청하고 그에 따른 응답을 상태에 반영하는 함수
  goToSearch() {
    searchYouTube(youTube, (result) => {
      this.setState({ videos: [...result], current: result[0] });
    });
  }
  // 검색 버튼을 누르면 최종적으로 실행되는 함수
  // 새로운 검색어(newQuery)를 받아서 youTube 객체에 반영하고 goToSearch 메소드 실행
  handleSearch(newQuery) {
    youTube.query = newQuery;
    this.goToSearch();
  }

  handleChange(videoKey) {
    for (let i = 0; i < this.state.videos.length; i++) {
      if (videoKey === this.state.videos[i].id.videoId) {
        this.setState({ current: this.state.videos[i] });
        break;
      }
    }
  }
  
  componentDidMount() {
    this.goToSearch();
  }
  
  render() {
    return (
      <div>
        // Nav 컴포넌트에 handleSearch 함수 전달
        <Nav search={this.handleSearch} />
        <div className="parent">
          <VideoPlayer video={this.state.current}></VideoPlayer>
          <VideoList clickTitle={this.handleChange} videos={this.state.videos} />
        </div>
      </div>
    );
  }
}

export default App;

Nav.js

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

const Nav = (props) => (
  <nav className="navbar">
    <div className="col-md-6 col-md-offset-3">
      // App 컴포넌트로부터 전달받은 함수 그대로 Search 컴포넌트에게 전달
      <Search search={props.search} />
    </div>
  </nav>
);

export default Nav;

Search.js

import React from 'react';

const Search = (props) => {
  let query = '';
  // 검색 버튼을 클릭하는 순간 실행되는 함수
  // Nav 컴포넌트로부터 전달받은 props.search 함수 호출
  const clickSearch = () => {
    props.search(query);
  };
  // query 변수에 input의 내용을 담아놓는다
  const getInput = (e) => {
    query = e.target.value;
  };
  return (
    <div className="search-bar form-inline">
      // input의 내용이 바뀔때마다 getInput 함수 호출
      <input className="form-control" type="text" onChange={getInput} />
      // 버튼을 클릭하면 clickSearch 함수 호출
      <button className="btn hidden-sm-down" onClick={clickSearch}>
        검색
      </button>
    </div>
  );
};

export default Search;

최종 결과 화면

---

searchYouTube 함수의 초기 파라미터 값을 youTube = { query: '지드래곤', max: 10, key: YOUTUBE_API_KEY };로 설정하고, 박효신을 검색한 결과와 비디오 재생까지 나타나는 화면이다.

뿌듯하다.

Reference

---

• https://reactjs.org/docs/react-component.html#componentdidmount
• https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started
• https://developers.google.com/youtube/v3/docs/search/list
• https://www.zerocho.com/category/HTML&DOM/post/594bc4e9991b0e0018fff5ed

마치며

---

짧게나마 느낀 점을 적어보자. 정말 많이 배웠다. 새롭게 알게 된 내용이 정말 많고 리액트에 좀 더 익숙해질 수 있는 시간이었다. 단시간에 많은 개념이 머릿속으로 들어와서 혼란스럽지만 차근차근 복습해봐야겠다.

코드를 지금 다시 봐도 고치고 싶은 부분(State의 default 값에 fakeData를 담아놓은 것이라든지, 공식 문서가 render()를 두 번 해도 사용자의 눈에 안 보일 것이라 했는데 잘 보인다)이 있다. 하지만 무엇보다도 뿌듯한 감정을 숨길 수가 없다. 적어도 나에게는 개발 과정이 결코 쉽지 않았고, 결과적으로 역시 할 수 있다는 자신감을 얻은 것 같아 기쁘다. 앞으로도 하루하루 즐겁게 코딩해야겠다!

배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글 달아주시면 수정하겠습니다. 감사합니다 :)