오늘 한 일
✔️개인과제 - 인기 영화 검색 페이지
- 영화카드 클릭 시 alert로 id값 알려주는 기능 구현
- 받아온 영화 중에서 검색하는 기능 구현
- 데이터를 한글로 받아오기
✔️알고리즘 세션
- 조금씩이라도 매일 하는게 좋다.
- 알고리즘을 공부하면 컴퓨터적 사고를 기를 수 있다.
검색하는 기능 구현
처음에는 fetch의 url부분을 변수url에 담고, 검색어에 따라 쿼리가 들어간 url을 만들어서
그 url로 데이터를 받아오는 방식을 생각했다. 그런데 이렇게 하면 요구사항과 어긋난다. TMDB에 있는 다른 영화들 중에서 검색하고 그 결과를 가져오기 때문이다. 우리가 해야하는건 받아온 데이터 중에서 검색하는 것이다.
그래서 영화 객체의 배열에서 입력된 문자열을 포함하는 영화 객체들을 filter()를 이용해서 새로운 배열로 반환받는다.그리고 객체들로 화면에 띄운다. 띄우기 전에 처음 사이트를 로드할 때 띄운 영화카드들을 innerText = '' 로 다 날리게 했다.
<form class="search">
<input type="text" id="searchInput" placeholder="영화 제목을 검색해 보세요" />
<button type="submit" id="search-btn">검색</button>
</form>document.querySelector('.search').addEventListener('submit', (event) => {
event.preventDefault();
const inputValue = $searchInput.value;
searchMovie(inputValue);
});검색을 해도 검색결과가 표시되지 않았다. 계속 메인 화면으로 돌아갔다.
form태그는 submit을 하면 자동으로 페이지를 새로고침한다.
event.preventDefault(); 를 사용해서 그걸 막아줘야 한다.
그래야 검색한 결과가 화면에 뜬채로 유지된다. 검색한 후에 새로고침을 하면 처음 화면, 즉 처음에 받아온 모든 영화 카드가 표시된다.
