바닐라 자바스크립트로 영화 추천 사이트 만들기
일단 처음으로 프론트쪽을 먼저 건드렸다.
기존에 flask랑 mongodb를 사용해서 만들었던 영화 사이트에서
영화 카드랑, 버튼을 가져다 쓰기로 했다.
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">
<link rel="stylesheet" href="pro8.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<title>Movie list</title>
</head>
<body style="background-color: rgb(31, 31, 35);">
<div class="mytitle">
<h1 style="margin-top: 100px" onclick="main()">The Movie</h1>
<div class="input-group mb-3" style="padding: 90px 30% 80px 30%;">
<input type="text" class="form-control" id="search-box" placeholder="영화 제목을 입력하세요" aria-label="영화 제목을 입력하세요"
aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" id="click-btn" type="button"
style="background-color: rgb(47, 46, 46)" id="button-addon2">검색</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
</div>
</div>
<script type="text/javascript" src="pro8.js"></script>
</body>
</html>대충 뼈대를 잡아주었고, css도 기존 사이트에것을 가져오고 약간만 손봤다.
css코드
.mytitle {
width: 100%;
height: 200px;
background-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url('https://www.mycity24.com.au/mycityko/pad_img/41980_1.jpg');
background-position: center;
background-size: contain;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mycards {
margin: 20px auto 0px auto;
width: 95%;
max-width: 1200px;
}
하나의 페이지로 영화 리스트들을 카드에 담아 보여주고, 영화 카드를 클릭하면
alert창을 띄워서 해당 영화의 id를 출력하는 사이트를 만든다.
아 그리고 검색기능을 추가해서 영화 제목을 검색 할 수 있게 만들었다.
자바스크립트를 건드리려니.. 엄두가 나질 않았따.. 너무 .. 나한텐 어렵다..
일단 The Movie DataBase api를 사용해서 인기 영화를 fetch요청을 날려가져왔다.
콘솔로그를 찍어보니 잘 온것이 확인 되었다.
영화포스터 카드를 보여주는 함수
function showMovieList() {
fetch(
'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1',
options
)
.then((response) => response.json())
.then((data) => {
console.log(data);
let rows = data['results'];
const movieCardBox = document.getElementById('cards-box');
movieCardBox.innerHTML = '';
rows.forEach((item) => {
let movieTitle = item['original_title'];
let movieDesc = item['overview'];
let movieRate = item['vote_average'];
let movieImg = item['poster_path'];
let movieId = item['id'];
let temp_html = `<div class="col" style="color: white">
<div class="card h-100" style="background-color: rgb(58, 58, 57)">
<img src="https://image.tmdb.org/t/p/w500${movieImg}"
class="card-img-top"/>
<div class="card-body">
<h5 class="card-title">${movieTitle}</h5>
<p class="card-text">${movieDesc}</p>
<p>⭐${movieRate}</p>
</div>
</div>
</div>`;
movieCardBox.insertAdjacentHTML('beforeend', temp_html);
const clickCardBox = movieCardBox.lastElementChild;
clickCardBox.addEventListener('click', () => clickCard(movieId));
});
});
}이걸 적느라 많은 시간을 투자했다. 그치만 내가 만든게 맞나 싶었다...
구글링 + chatgpt아저씨..의 도움을 받았기 때문이다.
그래도 gpt아저씨는 진짜 최후의 보루로 사용했다. 웬만하면 구글링과 본인의 힘으로
문제를 해결하려 노력하지만, 정말 너무나도 모르겠고 너무 막히는 문제는
gpt 아저씨한테 물어봤다. 가끔은 정말 별거 아닌데도 내가 못 봐서... gpt가 한숨을 쉬는것 같았다.
위에 있는 showMovieList() 함수를 호출하는 코드도 적고, 그 밑에
카드를 클릭하면 그 영화의 id를 출력해주는 함수도 만들었다.
function clickCard(movieId) {
alert(`id: ${movieId}`);
}
showMovieList();바닐라 자바스크립트로 만드려니 .. 제이쿼리가 그리웠다. . .
movieCardBox.innerHTML = '';이 코드는 제이쿼리로친다면 $("#cards-box").empty()와 같은 기능을 하는것 같다.
또 제이쿼리였다면
$("#cards-box").append(temp_html)라고 편하게 적을것을.. 자바스크립트로는 어떻게 구현하는지 검색하고 찾다가
팀원분이 도움될만한 블로그를 보내주셔서 이렇게 작성하였다.
movieCardBox.insertAdjacentHTML('beforeend', temp_html);다시한번 제이쿼리가 .. 그리워진다.
// 검색기능, 엔터키를 눌러도 검색버튼을 누른것과 같은 이벤트가 발생하게 만듬
function searchMovie() {
const searchBox = document.getElementById('search-box').value;
const movieCardBox = document.getElementById('cards-box');
movieCardBox.innerHTML = '';
fetch(
`https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1`,
options
)
.then((response) => response.json())
.then((data) => {
let results = data['results'];
if (searchBox.length === 0) {
alert('한글자 이상 적어주세요');
}
const filteredResults = results
.map((item) => ({
movieTitle: item['original_title'],
movieDesc: item['overview'],
movieRate: item['vote_average'],
movieImg: item['poster_path'],
movieId: item['id'],
}))
.filter((movie) =>
movie.movieTitle.toLowerCase().includes(searchBox.toLowerCase())
);
if (filteredResults.length === 0) {
alert('일치하는 검색결과가 없습니다');
window.location.reload();
}
filteredResults.forEach((movie) => {
let temp_html = `<div class="col" style="color: white">
<div class="card h-100" style="background-color: rgb(58, 58, 57)">
<img src="https://image.tmdb.org/t/p/w500${movie.movieImg}"/>
<div class="card-body">
<h5 class="card-title">${movie.movieTitle}</h5>
<p class="card-text">${movie.movieDesc}</p>
<p>⭐${movie.movieRate}</p>
</div>
</div>
</div>`;
movieCardBox.insertAdjacentHTML('beforeend', temp_html);
const clickCardBox = movieCardBox.lastElementChild;
clickCardBox.addEventListener('click', () => clickCard(movie.movieId));
});
});
}
const clickButton = document.getElementById('click-btn');
clickButton.addEventListener('click', searchMovie);
const searchBox = document.getElementById('search-box');
searchBox.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
event.preventDefault();
searchMovie();
}
});너무 많은 구글링 + chatgpt아조씨의 도움을 받아서 만들어보니..
뭔가 위작을 한 것 같은 찝찝한 기분이 들었다. 아마 내일은 이 코드를 보고 ..
html/css 부터 다시 부트스트랩도 안쓰고 만들어보려고 한다.
솔직히 못 할것 같은데 한번 해. 보. 려. 고. 한. 다.
끗.
자바스크립트부터 공부하는 사람