메인 구성 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="./movie.js"></script>
<header>
<h1>내배캠 최고 평점 영화 콜렉션</h1>
</header>
<form class="search" onsubmit="handleSearch(event)">
<label>영화 검색 : </label>
<input type="text" id="search-input" placeholder="영화 제목을 검색해 보세요">
<button type="submit" id="search-btn">검색</button>
</form>
<section class="card-list">
</section>
</body>
</html>js
const options = {
method: 'GET',
headers: {
accept: 'application/json',
Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJhNDMzZjQ0OTQxOWJhMmJkZWRiMWJjMTNjNjYyMDY3MSIsInN1YiI6IjY2MmIxNzBmMTc1MDUxMDExZDc4YjU4ZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.aHbylSxa8vT1wF-QRKuHc6BF1rAOU7XvV1mxmCCGI-g'
}
};
//목록 출력
let url = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1'
let movie = []
fetch(url, options)
.then(response => response.json())
.then(date => {
let movie = date.results
console.log(movie)
movie.forEach(elem => {
let image = 'https://image.tmdb.org/t/p/w500' + elem.poster_path
let id = elem.id
let movieTitle = elem.title
let content = elem.overview
let rate = elem.vote_average
document.querySelector('.card-list').innerHTML += `
<div class="movie-card" id="${id}" onClick="clickCard(${id})">
<img src="${image}" alt="${movieTitle}">
<h3 class="movie-title">${movieTitle}</h3>
<p class="content">${content}</p>
<p class="rate">Rating: ${rate}</p>
</div>`;
});
})
// 검색창의 유효성 검사
const handleSearch = event => {
const searchInput = document.getElementById('search-input')
event.preventDefault();
if (!searchInput.innerText) { // 자바스크립트 : 빈문자열 -> false 반환
alert("입력하지 않았습니다.");
searchInput.focus();
return false;
}
document.getElementsByClassName('search').submit()
}
//id 출력
let clickCard = id => {
alert('id : ' + id)
}css는 지난 번과 동일하다.
fetch로 API를 가져와 목록을 출력해주었다. 또 검색 칸이 비어있을 시 alert를 해주도록 하였다. 카드를 클릭 시 해당 카드의 id값을 alert한다.
모든 카드에 각각 onClick을 부여하는 것이 메모리 낭비를 유발한다는 평가가 있어 내일은 이를 수정하고 검색 기능을 구현해볼 것이다.
