[Java Script] 오픈 API를 사용해 영화 검색 사이트 제작하기 [2]

영화 데이터 및 틀은 잡아뒀으니 이제 이미지 클릭 시 해당 영화의 ID, 검색 기능을 추가해보자..!

카드 클릭 시 alert창이 노출이 되어야 하니

<Script>
const renderMovies = (movies) => {
    movieList.innerHTML = '';

    movies.forEach((movie) => {
        const li = document.createElement('div');
        })
        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>

영화 이미지를 가지고 오는 코드에서 추가를 해보자..!
위 코드에서 화살표 함수를 사용해서

<script>
li.addEventListener('click', ()=>{ 
alert(movie.id);
<script>

코드를 추가 후 확인해 보면

노출이 잘 되는 걸 확인할 수 있다!👍

사실 API에서 가지고 온 정보로 노출이 되다보니 처음에는 어디에 코드를 추가해야할지, 어떤 코드를 써야할 지 몰랐는데 미니 프로젝트 같이 하셨던 팀장님의 도움으로 해결됐다!!

1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기
2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기
이미지 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수로 들어가야함.
3. const와 let만을 이용한 변수 선언, 화살표 함수 사용, 배열 메소드 사용, dom 제어하기 기능 사용.
4. 카드 클릭시 영화 id를 나타내는 alert창을 띄움.
5. 영화 검색 ui 구현하고 검색 버튼 클릭시 실행.

html로 간단히 검색 버튼을 구현하였고, 이번에도 역시 화살표 함수를 사용하여 코드를 만들어봤다.

<script>
searchButton.addEventListener('click', () => {
    const query = searchInput.value;

    // 검색어가 비어 있으면 모든 영화 목록을 표시
    if (query === '') {
        renderMovies(allMovies);
    } else {
        // 검색어를 포함하는 영화만 필터링하여 표시
        const filteredMovies = allMovies.filter(movie => movie.title.toLowerCase().includes(query.toLowerCase()));
        renderMovies(filteredMovies);
    }
});
</script>

또 검색 버튼을 직접 눌러 검색하는거 외 엔터키를 눌러 편하게 검색하는 기능도 추가했다.

<script>
searchInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        const query = searchInput.value;

        if (query === '') {
            renderMovies(allMovies);
        } else {
            const filteredMovies = allMovies.filter(movie => movie.title.toLowerCase().includes(query.toLowerCase()));
            renderMovies(filteredMovies);
        }
    }
});
</script>

검색어를 포함한 영화 노출, 엔터 입력 시 검색 가능, 대 소문자 상관없이 검색 시 영화 노출 전부 잘 작동하는것을 확인했다!!!!!!!

사실 순수 자바스크립트로만 홈페이지를 구현해내는게 이렇게 힘든지 몰랐다..
아니.. 자바스크립트가 이렇게 힘든지 몰랐다...!!
어떤 기능을 사용하기 위해서는 어떤 코드를 사용해야 하고 또 다른 코드는 이 상황때 쓰면 안되는지 아직까지 잘 모르는 부분이 너무나도 많다.. 좀 더 공부하자