react youtube-clone youtube apis 살펴보기

다양한 api들을 사용할 때, 어떻게 문서를 보면 좋은 지, 어떤식으로 api를 알아볼 수 있는 지에 대해서 알아본다.

 

이번 영상을 통해서 다른 api를 필요로 할 때 유용하게 사용할 수 있다.

 

REST API

백엔드와 클라이언트에서 어떤 방식으로 커뮤니케이션 할 지 결정(정의) 해 놓은 api 이다.

get, post, put, delete 같은 것이다.

 

youtube api 사이트에 들어가면, 전반적으로 youtube api가 어떻게 쓰이는 지 나와있다

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

YouTube  |  Google Developers

 

 

이렇게 보면, play youtubes 에 들어가면, youtube가 어떻게 재생되는 지를 볼 수 있다. (코드 별로)

https://developers.google.com/youtube/youtube_player_demo

YouTube 플레이어 데모  |  YouTube IFrame Player API  |  Google Developers

이렇게 sample 로 볼 수 있는 것도 있다.

 

그리고 우리가 data를 받아올 수 있는 data api 에는 우리가 많이 사용하는 검색하는 것, 비디오의 목록 들을 가져올 수 있다.

https://developers.google.com/youtube/v3/docs

API Reference  |  YouTube Data API  |  Google Developers

이렇게 api reference 를 확인해보면, 우리가 사용해야 할 검색 목록, 비디오 목록 등을 불러올 수 있다.

https://developers.google.com/youtube/v3/docs/search/list?apix=true 

Search: list  |  YouTube Data API  |  Google Developers

이렇게 우리가 사용할 수 있는 search list를 사용할 수 있게 되어있다.

 

google Oauth 2.0은 사용하지 않고 우리는 api key만 사용할 것이기 때문에 체크하고 execute를 누르면,

이렇게 정보가 담긴 api를 받아올 수 있게 해준다.

 

여기서 우리가 사용해야 할 부분은 HTTP 부분인데 이 http 링크를 복사해서 우리가 아까 받아온 google api key를 안에 넣어주면 된다.

 

이렇게 google 크롬에 그냥 url을 복사하고, 아까 (google api에서) 받은 key 값을 넣어주면 api 정보가 받아와진다.

 

마찬가지로 video list 부분도 mostPopular 로 가장 인기있는 영상을 가져오고, 

snippet은 정보라는 뜻이다. 비디오에 관련된 썸네일이나 각종 정보를 가져오는 것이다.

 

https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=Key 

 

이런 url 형식으로 되어있다. videos 다음에 원하는 것을 작성하려면 ? 마크를 사용하면 query params이 시작된다.

part, chart 로 모든 params를 넘겨주면서 데이터를 받아오는 것이다.

이제 개발 툴에서 네트워크 탭에 오면, (shift + command + r) 강제새로고침 한번 하면,

모든 네트워크가 다 요청된다.

 

우리가 url을 요청하고 메서드는 GET으로 요청했고 상태 코드로 200이면 정상적으로 받아왔다는 뜻이다.

그리고 preview로  받아온 정보들을 미리 볼 수도 있다.

 

이렇게 클라이언트와 백엔드와 통신을 할 때 HTTP 라는 프로토콜을 이용하고

어떤식으로 정보를 주고받고삭제할건지를 정해놓은 것이 rest api 이다.

 

이제 한단계 위에 좀 더 간편하게 사용할 수 있는 것이 graphql 이다.