( 이전글 )에 이어서 유튜브 데이터API를 통해 데이터를 가져와보자. 참고로 라이브러리는 Vue만 쓰고
그 외에는 최대한 ES6문법만 쓰려고 한다. 그래서 fetch API를 통해 가져올거다... 그리고 이전글에서는
.jsp였는데, html로 변경하면서 Thymeleaf 템플릿을 적용하였으니, 원하는 사람은 ( 참조글 )을 참조하자.
그럼 바로 시작해보자..
1. 1. 유튜브 데이터 API키 발급
============================================================================
우선 API키를 발급받기 위해 구글 개발자 콘솔에 접속하자.
접속 한 후 새 프로젝트를 생성해주도록 하자. 나는 이미 youtube-project를 생성해놓았다.
처음 하는 사람은 원하는 이름으로 프로젝트를 생성해준 뒤 아래와 같이 검색창에 youtube를 검색하여
Youtube Data API v3를 선택해준 뒤 [사용] 버튼을 눌러준다. ( 나는 이미 해놔서 [관리]로 나옴.. )
|
|
이제 마지막으로 사용자 인증정보 등록하기를 통해 인증정보를 등록해야한다.
이렇게 하면 아래와 같이 API키를 발급 받은 것을 확인 할 수 있다.
2. 2. fetch함수를 통해 유튜브 데이터를 가져오자.
============================================================================
2.0.1.
2.0.2. index.html
<html />
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- Vue.js -->
<script type="module" src="/js/source/youtubeInstance.js"></script> <!-- 인스턴스.js -->
</head>
<body>
<div id="youtubeList"> <!-- el 대상 -->
<youtube-list></youtube-list><!-- 컴포넌트 삽입 -->
</div>
</body>
</html>
<javascript />
import youtubeList from './youList.js' // 컴포넌트를 import 해옴
const youtube_list = youtubeList; // import해온 컴포넌트를 변수로 선언
new Vue({ // 뷰 인스턴스 생성
el : '#youtubeList',
components : {
'youtube-list' : youtube_list, // 지역 컴포넌트 생성
}
})
<javascript />
const url = 'https://www.googleapis.com/youtube/v3/search'; // URL 글로벌 변수 선언
const key = 'AIzaSyBoB2bFRIF_ooooooooo--9pEUOj5Nfo' // 인증키 글로벌 변수 선언
export default{ // 컴포넌트 생성
template : `
<div @click="getYoutubeList()">테스트</div>
`,
methods : {
getYoutubeList : () => { // [테스트] 클릭시 호출 함수 -> 실제 API통신함
let newUrl = ''; // url및 인증키, 검색어를 조합한 새로운 url
newUrl = url + '?part=snippet&q=kpop+music&key=' + key; // newUrl 수정
let loadYoutubeList = fetch(newUrl, { // fetch함수를 통한 비동기 통신
method : 'GET',
}).then(res => res.json()).then((res2)=>{ // json()을 통해 사용 가능한 데이터로 변환
console.log(res2); // 가져온 데이터를 콘솔에 출력
})
}
}
}
우선 이렇게 작성을 하였다... 나중에 웹팩을 통해 번들링을 할 예정이라, 나중에는 또 바뀌겠지만..
우선 fetch함수를 통해 비동기통신을 하여 데이터를 가져왔다. 결과는 아래와 같다..
실제로 데이터를 가져왔다. 근데 유튜브 API가 살짝 문제인게... 이게 완전 무료가 아닌지라, 돈이 든다. 하루에
요청할 수 있는 게 있는데, 적은 모양... 그래서 화면을 디자인 할 때는 data.js라는 곳에 더미데이터를 만들어
작성하고, 실제 기능 ( 검색어, 조건 ... )등을 할 때만 비동기 통신을 할 예정이다..
