미니 프로젝트 이후 개인과제 시간이 돌아왔다.
이번 과제는 순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현
드디어 올게 왔구나..
필수 요구 사항
- jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
- TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
- 이미지 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어가야함.
- const와 let만을 이용한 변수 선언, 화살표 함수 사용, 배열 메소드 사용, dom 제어하기 기능 사용.
- 카드 클릭시 영화 id를 나타내는 alert창을 띄움.
- 영화 검색 ui 구현하고 검색 버튼 클릭시 실행.
선택 요구 사항
- CSS flex, grid 사용하기
- 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치시키기
- 대소문자 관계없이 검색 가능하게 하기
- 키보드 enter키를 입력해도 검색버튼 클릭한 것과 동일하게 검색 실행시키기
HTMl
일단 순수 자바스크립트만을 사용해야하니 간단하게 코드만 작성해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Movie Project</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="search-container">
<input id="searchInput" type="text" placeholder="영화 검색...">
<button id="searchButton">검색</button>
</div>
<div class="movie-list" id="movieList">
</div>
<script src="script.js"></script>
</body>
</html>Java Script
오픈 API를 활용하여 영화 데이터를 가지고 와야하니 요청 코드를 가지고 js.파일 내 입력해준다.
그럼 이제 모든 준비는 끝..이 아닌 이제부터 시작..!
시작 전 DOM 요소를 설정하려고 한다.
<script>
const searchInput = document.getElementById('searchInput');
const searchButton = document.getElementById('searchButton');
const movieList = document.getElementById('movieList');
</script>그리고 처음 홈페이지 진입 시 모든 영화들이 노출되어야 하기 때문에 이 부분도 작성해준다.
<script>
renderMovies(allMovies);
</script>단, 모든 영화들이 노출되어야 하기 때문에 모든 영화를 저장 하는 변수 및 초기 영화 목록도 따로 만들어 준다..!
이제 영화 목록을 렌더링 하는 코드를 작성해야 하는데 사실 이 부분이 좀 오래 걸렸고 코드를 이쁘게 적은지는 잘 모르겠지만 작성해보자..!!
<script>
const renderMovies = (movies) => {
movieList.innerHTML = '';
movies.forEach((movie) => {
const li = document.createElement('div');
li.addEventListener('click', ()=>{
alert(movie.id);
})
li.style.border = '1px solid #000';
li.innerHTML = `
<h2>${movie.title}</h2>
<img src="https://image.tmdb.org/t/p/w185${movie.poster_path}" alt="${movie.title} 포스터">
<p>${movie.overview}</p>
`;
movieList.appendChild(li);
});
};
</script>이렇게 코드를 작성하면?!
위 이미지 처럼 영화 데이터를 가지고와 노출이 잘 된다.... ⭐️
살면서 이렇게 구글링을 빡쌔게 한 적이 있었던가..? 이제 검색 기능, css 작업으로 넘어가보자....
맹구의 돌 수집품 중 하나