간단한 실습용이므로 HTML 파일 하나와 JS 파일 하나씩만 사용했다.
// index.html
<!DOCTYPE html>
<html lang="en">
<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 defer src="./search.js"></script>
</head>
<body>
<div id="search" >
<input id="textBox" type="text" placeholder="검색어를 입력하세요.">
<input type="button" value="검색" onclick="getList()">
</div>
<div id="list"></div>
</body>
</html>div#search에 input 태그를 이용해 검색창을 간단히 만들어 놓고 결과값을 담을 div#list를 만들어 놓았다.
검색 버튼을 클릭하면 search.js 에서 getList() 메소드를 실행하는 onclick 이벤트를 걸어두고, HTML DOM Tree가 그려지고 스크립트가 실행되도록 script를 불러올 때, defer 옵션을 주었다.
// search.js
let input = "";
const requestOptions = {
method: "GET",
redirect: "follow",
};
function getConnection() {
const input = document.querySelector("#textBox").value;
// console.log(input);
// console.log( textBox.getAttribute);
fetch(
`https://youtube.googleapis.com/youtube/v3/search?key=${key}&type=video&part=snippet&maxResults=20&q=${input}`,
requestOptions
)
.then((response) => response.text())
.then(getList)
.catch(console.log);
}쿼리스트링은 API를 참고하여 Postman 프로그램으로 작성하고, JavaScript를 통해 받아올 key와 q value값은 EL(Expression Language) ${}을 통해 받아주었다. Fetch API를 통해 YouTube API의 URI에 접근하여 데이터를 가져와 promise의 resolve 객체를 반환해준다. 접근 실패할 경우를 대비해 rejected 객체가 반환되면 catch를 통해 console.log를 찍어놓았다.
// search.js
const getList = (result) => {
const jsonData = JSON.parse(result);
const list = document.querySelector("#list");
let listString = "<ul>";
for (let i in jsonData.items) {
const snippet = jsonData.items[i].snippet;
const url = snippet.thumbnails.default.url;
const title = snippet.title;
const desc = snippet.description;
listString += `<li>`;
listString += `<img src="${url}">`;
listString += `<div style="display: inline-block;">`;
listString += `</div>`;
listString += `<div style="display: inline-block;">`;
listString += `${title}<br>`;
listString += `${desc}`;
listString += `</div>`;
listString += `</li>`;
}
listString += `</ul>`;
list.innerHTML = listString;
};리스트를 HTML로 출력해줄 함수를 만들었다. 해당 함수는 fetch가 실행되고 나온 결과값 promise의 resolve 객체를 파라미터로 받아온다. (result = response.text). 받아온 결과값을 담아서 HTML로 보내줄 listString을 선언, 빽틱(``) 기호를 사용해서 값들을 담아준다. for문이 실행되어 데이터가 다 담기면 div#list에 innerHTML로 넣어준다.
결과화면
반응형
댓글