youtube api로 영상 긁어와서 내 홈페이지에 띄워보기 (스테픈 2km완료)

오늘은 제작중인 홈페이지에

youtube api를 활용해서 영상을 긁어와서 띄워보려고 합니다.

api를 다양하게 활용하면 홈페이지에 내용채우기 매우 좋은것 같군요

일단 육아관련 영상으로 홈페이지를 채워보려고 합니다.

youtube api 사용을 위해서 구글 개발자 콘솔에서 api 사용신청을 해놨습니다.

api제한사항에서 youtube data api v3 사용 허용을 해줘야합니다

자 이제 api사용설명페이지로 넘어가서

api를 어떻게 사용해야하는지 공식 문서를 읽어보려고 합니다

저는 영상을 검색해서 원하는 값만 받아와서

제작중인 페이지에 뿌려주려고 합니다

그럼 list를 가져오는 이 기능만 활용하면 될것 같네요

설명을 읽어보니 이 주소로 get방식으로 요청을 보내면 된다고 합니다

그럼 파라메터는 뭐가 필요한지 읽어보면

생각보다 지원하는 파라메터가 엄청 많네요

하나씩 내용을 보다보니 우측에 간단한 클릭으로 실험을 해볼 수 있는 창이 있네요

기본적으로 코드도 제공하고 있습니다만

여기서 제공하는 코드를 읽어보면

꼭 oauth 인증을 하도록 만들어놨습니다

저는 로그인 없이 api요청만으로 리스트를 받아오고 싶은데

예제 코드에는 로그인을 시키는 코드로만 짜여져 있습니다

예제코드를 무시하고 처음 안내해준 url을 활용해서

fetch api로 직접 요청을 보내서 자료를 받아와야할듯 합니다.

어차피 get방식으로 보내야하니 파라메터를 url에 보내줘야하니..

이런식으로 코드를 짰습니다.

함수 실행시 파라메터를 2종류 받아와서

검색어를 입력해서 값도 받아올수 있고 글의 수량도 원하는대로 조정해서 받을 수 있게 구성했다.

위 코드에서 핵심은

URLSearchParams() 이것인것 같다

키와 값으로 이루어진 데이터를 url 파라메터로 자동변환해주는데

일반적으로 steemit.com/ 뒤에 ?로 작하며 key = value & key1 = value 이런식으로 구성되는 걸 말하는데

내가 직접 파라메터를 기입해도 되지만

객체 형태로 만든뒤에 URLSearchParams() 에 넣어줘도 알아서 만들어준다
매우 유용한 api이다

아무튼 결과값을 콘솔로 찍어보면 잘 나온다

해당 값을 활용해서 페이지에 띄우면 해결 완료

---

오늘도 스테픈 2km는 가볍게 완료

저녁에 날이 풀려서 시원하고 좋군요