🖥️ 개인 과제 영화 소개 사이트 만들기
- 필수 구현 과제
- 바닐라 js 사용하기 (jqery금지)
- TMDB 오픈 API를 이용하여 데이터 가져오기
- 영화정보 카드 리스트 UI 구현
- 영화 검색 UI 구현
- var 사용 금지
- 화살표 함수, 배열 메소드 사용하기
- DOM 제어하기
- 선택 구현 과제
- flex, grid 사용하기
- 대소문자 관계없이 검색 가능하게 하기
- 키보드 enter키를 입력해도 검색 실행시키기
- 추가 기능 아무거나!
⭐ 사용 스킬 - HTML CSS JS
앞서 배운 강의에서는 계속 jqery를 사용했기 때문에 바닐라 js로 모든 기능을 구현하는 게 약간 막막했지만, 그래도 뭐 어떡해... 해야지...
✨ 필수 구현 과제 목록
⭕ display flex, grid
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
/ 그리드 열 설정 - 개수는 자동으로, 각 칸마다 최소 400px, 최대 1fr(남는 만큼) 반복
gap: 50px 20px;
/ 좌우 50px 상하 20px 여유 공간
justify-content: center;
/ 그리드를 화면 가운데로 display: flex;
flex-direction: column;
/ 포스터, 제목, 내용을 세로로 정렬
justify-content: space-between;
/ 사이 간격 동일하게
justify-self: center;
/ 그리드 영역 안에서의 카드 위치
grid 속성은 처음 써봤는데 flex와는 다른 맛으로 유용한 것 같다.
⭕ TMDB API 사용
function getDate(category) {
const id = categoryIds[category];
const url = `https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}&language=ko-KR&page=1®ion=KR`;
/ 카테고리를 선택하면 해당 카테고리에 맞게 API 호출
fetch(url, options)
.then(response => response.json())
.then(data => {
const movies = data.results;
const movieContainer = document.getElementById('movie-container');
movieContainer.innerHTML = '';
/ 기존에 있던 카드는 지우고 카테고리에 맞게 카드 재생성
if (category === 'Upcoming' || category === 'Now Playing') {
movies.sort((a, b) => new Date(b.release_date) - new Date(a.release_date));
} else if (category === 'Popular' || category === 'Top Rated') {
movies.sort((a, b) => b.vote_average - a.vote_average);
}
/ 개봉예정작, 현재상영작은 빠른 날짜 순 정렬
/ 인기작, 최고평점작은 별점 높은 순 정렬
movies.forEach(movie => {
const card = createMovieCard(movie);
movieContainer.appendChild(card);
/ forEach 사용해서 미리 만들어둔 모양대로 영화 붙여넣기
});
})
.catch(err => console.error(err));
}미니 프로젝트 할땐 이해도 못하고 거의 복붙만 했는데 자바스크립트 강의 듣고 보니까 코드 구조를 이해하고 작성, 수정할 수 있다는 게 은근히 뿌듯하다.
⭕ 카드 리스트 UI
function createMovieCard(movie) {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<div>
<div class="imgbox"><img class="posterimg" src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
</div>
<p class="movietitle">${movie.title}</p>
<p class="overview">${movie.overview}</p>
</div>
<div class="mintxt">
<p>평점: ${movie.vote_average}</p>
<p>개봉일: ${movie.release_date}</p>
</div>
`;
card.addEventListener('click', () => alert(`Movie ID: ${movie.id}`));
return card;
}html과 css 작업을 먼저해서 카드 디자인을 마친 후 api에서 불러온 값을 넣어주었다. 이거는 미니프로젝트때도, 왕초보 수업때도 많이해서 이제 뚝딱뚝딱 잘한다! 다만 jqery 없이 만드는 문법은 조금 헤맸을지도...
⭕ 영화 검색 UI (DOM 제어, 화살표 함수 사용)
document.getElementById('search-btn').addEventListener('click', (search))
/ 클릭하면 발생하는 이벤트 추가
function search() {
const query = document.querySelector('.search-input').value.toLowerCase();
/ 검색창에 입력된 value 값을 받아서 소문자로 전환(대소문자 구별 없이 검색을 위해)
const movieCards = document.querySelectorAll('.card');
/ 모든 카드를 소환
movieCards.forEach(card => {
const title = card.querySelector('.movietitle').textContent.toLowerCase();
if (title.includes(query)) {
card.style.display = 'flex';
/ title에 검색어가 있으면 나타내고
} else {
card.style.display = 'none';
/ 없으면 숨긴다
}
});
};filter...가 필수로 써야하는 메소드에 있는 줄 모르고 그냥 forEach 돌려서 검색어가 포함되면 나타내고 해당없으면 숨기는 형식으로 만들었다. 내일 코드리뷰 영상 보면서 filter로 바꿔볼 예정.
✨ 선택 구현 과제 목록
⭕ 엔터로 검색하기
const input = document.querySelector('.search-input');
/ 쿼리셀렉터로 검색창 지정
input.addEventListener('keyup', (event) => {
if (event.keyCode === 13) {
/ 엔터키 = keyCode 13 입력하고 엔터를 누르는 이벤트가 발생하면
document.getElementById('search-btn').click();
/ 검색 버튼을 클릭한다
}
});⭕ 드롭다운 메뉴, 카테고리별 카드
document.querySelector('.dropbtn_click').onclick = () => {
/ 쿼리셀렉터로 드롭다운 버튼 지정
const v = document.querySelector('.dropdown-content');
v.classList.toggle('show');
/ 드롭다운 버튼을 누르면 드롭다운 콘텐츠가 나타남 (평소에는 none)
}
document.getElementsByClassName('Category').onclick = () => {
showMenu(value);
/ 선택한 카테고리로 선택창 이름도 바꿔줌
};
showMenu = (value) => {
const dropbtn_content = document.querySelector('.dropbtn_content');
dropbtn_content.innerText = value;
getDate(value);
/ 드롭다운 메뉴에서 카테고리를 클릭하면 getData 함수 안에서 api 링크가 바뀜
}
⭕ 자연스러운 업, 다운 스크롤
let rollUp = document.querySelector('#rollUp');
let rollDown = document.querySelector('#rollDown');
/ 각 버튼 변수명 설정
let body = document.documentElement;
/ 사이트의 스크롤 제어를 위해 HTML 범위를 지정
rollUp.addEventListener('click', () => {
body.scrollTo({ top: 0, behavior: 'smooth' });
});
/ 업버튼을 누르면 스크롤이 부드럽게 가장 위로
rollDown.addEventListener('click', () => {
body.scrollTo({ top: 99999, behavior: 'smooth' });
});
/ 다운버튼을 누르면 부드럽게 가장 아래로
개인 과제를 마치며
내가 할 수 있을까? 생각했던 것들을 하나씩 해내며 성취감을 얻어낸 시간이었다!! 물론 나보다 더 예쁘게, 고오급 기능을 추가하신 분들도 아주아주 많겠지만.. 화려하고 멋있는 효과를 구현해내는 것도 물론 좋겠지만, 지금은 내가 코드를 이해하고 생각해내고 작성할 수 있다는 게 제일 중요한 것 같다. 사실 오류를 좀 정리하고 싶었는데... 오류를 너무 많이 마주쳐서 뒤늦게 정리하려니 생각도 안난다. 오류같은 건 그때그때 적어서 정리하는 게 좋을 것 같다...
