이번에는 유튜브 검색 기능을 구현하였다. 바뀐 건 많이 없고 헤더 부분 추가하고, component화 시킨 후 list 컴포넌트 안에 자식 컴포넌트로 추가해주었고, 기존 fetch함수의 then을 async와 await을 활용하여 기능구현 하는 쪽으로 수정해주었다. 그럼 바로 정리해보자. youHeader.js 추가 const url = 'https://www.googleapis.com/youtube/v3/search'; const key = 'AIzaSyBoB2ooooooooooooYTyuk--9pEUOj5Nfo' export default{ template : ` Carousel Home Link Disabled -- 엔터 또는 클릭시 search함수 호출 Search `, data () { retu..

( 이전글 )에 이어서 유튜브 데이터API를 통해 데이터를 가져와보자. 참고로 라이브러리는 Vue만 쓰고 그 외에는 최대한 ES6문법만 쓰려고 한다. 그래서 fetch API를 통해 가져올거다... 그리고 이전글에서는 .jsp였는데, html로 변경하면서 Thymeleaf 템플릿을 적용하였으니, 원하는 사람은 ( 참조글 )을 참조하자. 그럼 바로 시작해보자.. 1. 유튜브 데이터 API키 발급 ============================================================================ 우선 API키를 발급받기 위해 구글 개발자 콘솔에 접속하자. 접속 한 후 새 프로젝트를 생성해주도록 하자. 나는 이미 youtube-project를 생성해놓았다. 처음 하는 사람..