REST(Representational state transfer) API

Representational state transfer (REST)로서

back-end와 clint에서 어떤 방식으로 communication 결정해 놓은 것이다.

그래서 REST API라고 부르고 혹은 RESTful Web services라고도 불린다. 그리고 REST에는 4가지 정도의 정해놓은 메소드가 있는데 많이 쓰이는 GET POST PUT DELETE 이러한 것들이 있다.

 

GET은 사용자가 정보를 서버에서부터 받아 올 때 이미 존재하는 사용자의 정보를 받아 온다면 GET을 사용하면 된다. 그래서 정보를 읽을 때에 사용되어 진다.

POST는 새로운 사용자를 만들 때 사용되어지는 메소드이고

PUT은 이미있는 사용자의 정보를 업데이트 할 때 사용되어지는 것이다.

DELETE는 말 그대로 이미 존재하는 사용자를 삭제할 때 이용되어진다. 이 네가지가 통상적으로 많이 알려진 메소드이다.

 

REST API - Wikipedia

PATCH는 통상적으로 REST API중에 하나라고 간주되지 않고 POST GET PUT DELETE가 가장 많이 쓰인다.

 

GraphQL을 이용하지 않으면 많은 프로젝트들이 이미 REST API를 이용하고 있어서 이러한 개념을 알고 넘어가자.(유튜브 API도 REST API이다.)

 

Youtube APIs사이트의 Reference창으로 들어가서 Search 부분에서 Try it now부분을 누른다. 검색 중에서도 키워드 단위로 검색할 것이기 때문에 처음 25개의 검색 결과를 리턴할 것인데, 키워드가 surfing으로 검색된 것을 찾아라라고 되어져 있다.

키워드 단위로 검색결과를 리턴할 때

 

param 즉 part는 snippet라고 전달해 주어야 하고 

최고 결과값은 25개이고

q는 query의 약자이고 보통 검색할 때 쓰는 것이 쿼리이다.(bts를 예제로 쓴다.)

여기서 Credentials 부분에서 Google OAuth부분은 사용하지 않고 API key만 이용한다.하고 EXECUTE를 누르면 아래와 같이 검색한 결과값이 리턴해서 나오게 된다. 리퀘스트가 성공적으로 완료가 되면 200 이라는 성공의 http 코드가 반환이 되고 사용자가 요청한 리퀘스트에 응답하는 response body에 아래와 같은 결과의 데이터가 들어가게 된다. 

show code를 눌러서 실행했을 때 cURL 이용하는거 HTTP를 이용했을 때 JAVASCRIPT를 이용했을 때 이러한 형태로 요청이 된다는 것이다. HTTP 부분을 보면 URL을 googleapis를 써서 part는 snippet이고 max results는 스물 다섯 개고 쿼리는 bts로 해서 key는 위에 콘솔창에서 받았던 키를 복사해서 넣으면 된다.

 

정보를 받아오는 것은 REST API에서도 GET을 이용하고 GET은 url param을 이용해서 받아온다.

JavaScript 코드를 어떻게 할 수 있는지도 나와있다. 이렇게 확인해서 간단하게 어떤 url을 이용할 지 사용자가 원하는 데이터를 받아올 건지 확인이 된다. 

 

복사한 것을 그대로 붙이고 key 부분은 콘솔창에서 받았던 키를 넣으면 아래와 같은 데이터가 나오게 된다.

(https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=bts&key=AIzaSyCnSREoN8ecZjzCPvKg7Gi_P-bzDpf_KO8)

kind는 유튜브에도 있는 search list response 중에 하나고 pageInfo에 보면 1000000결과값 중에 요청한 최고의 데이터 숫자인 25만 나오게 된다. nextPageToken을 전달하면 알아서 다음 페이지 것을 받아온다. 간단하게 처음에 받아온 25개만 이용해서 웹 어플리케이션을 만들어 볼 것이다.

 

위에서 items 안에가 실질적으로 사용자에게 보여줄 데이터이다. 각각의 items안에는 25개의 item이 있고 item안에는 비디오에 관련된 정보가 있다. snippet부분을 보면 언제 publish가 됐는지 채널 아이디나 타이틀 디스크립션이나 썸네일도 각각의 퀄리티에 맞게끔 사이즈에 맞게 url을 받아온다. 이렇게 해서 어플을 만든다.

여기서 사용자가 다른 검색을 하게 되면 q=bts 즉 쿼리 부분만 바꿔주면 된다.

 

다음으로 videos에 가서 overview를 누르고 list를 클릭한다. list부분에서 chart가 있는데 그냥 목록을 받아오는 것이 아니라 most popular를 선택해서 가장 유행하는 것을 받아온다. 다시 extcute 누르고 part는 비디오에 대한 정보를 받아와야 하니까 snippet를 작성. max results 25로 설정해주고 show code를 누른다.

 show code 부분에서 HTTP 부분 들어가서 url 복사해주고 키값은 구글 클라우드 콘솔창에 있는 값 복사해서 넣어준다.(영상에서는 videos?뒤에 part=snippet&부분을 빼서 진행했는데 그냥 붙여주면 된다.) 

그러면 아래와 같이 데이터가 나온다.

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

즉 GET이라는 요청을 할 때는 기본 URL을 적은 다음에 ?쓰면 query param이 시작된다. 즉, 요청하는 것을 세부적으로 할 수 있다. 그래서 항상 ?쓰고 나서 part는 snippet이고 &(엔퍼센트)를 넣은 다음에 chart=mostPopular 가장 유명한 거를 넣어준다. &하고 최고의 결과값은 25이고 키는 이렇게 써야한다라고 나타내 주면 된다.

이렇게 해서 GET 리퀘스트를 요청하면 해당하는 데이터가 나온다.

 

 

 

 

<출처 : DreamCoding 리액트 개념 정리+유튜브 클론코딩: ellie>

참고: https://academy.dream-coding.com/courses/react-basic

리액트 강의 (유튜브 클론 코딩 + 실시간 전송 명함 카드 만들기 웹앱 만들기)

https://en.wikipedia.org/wiki/Representational_state_transfer 

Representational state transfer - Wikipedia