개인프로젝트 회고(2)

9. 검색 바 기능 만들기

 response.results.forEach((movie) => {
      const movieCard = createMovieCard(movie);
      movieContainer.appendChild(movieCard);

      movieCard.addEventListener("click", () => {
        const movieId = movieCard.getAttribute("id");
        alert(`영화 ID는 ${movieId}입니다!`);
      });

검색창 관련 코드가 들어가기 전 카드 표출을 했던 초안 코드이다. 이 또한 튜터님의 도움으로 코드를 만들었지만 생각치 못한 난관에 부딪쳤다. forEach 함수를 다른 함수가 감싸지 못하기에
이 함수를 하나의 키로 놓기 어려웠다

그래서 변경 된 코드가

 function renderMovie(movies) {
   movieContainer.innerHTML = "";
   movies.forEach((movie) => {
     const movieCard = createMovieCard(movie);
     movieContainer.appendChild(movieCard);

위와 같이 바뀌었다. 크게 변한 부분은 없지만 원하고자 했던 감싸기를 성공했다.

이 역시 결코 나에게 쉽지는 않았다..😂

const searchRate = searchInput.value.toLowerCase();   const filterMovie = response.results.filter((search) =>          search.title.toLowerCase().includes(searchRate)
        );
        console.log(filterMovie);
        renderMovie(filterMovie);
      }; 
searchBtn.addEventListener("click", searchMovie);

후에 검색 바의 DOM 요소를 생성해주고, 버튼 클릭만이 아닌
Enter키로도 버튼이 작동하게 끔 해주었다.

searchInput.addEventListener("keyup", (event) => {
        if (event.key === "Enter") {
          searchMovie();
        }
      });
    }

여기서 주의해야할 점! html 파일을 만들 때 버튼과 검색창 부분을 <form> 태그로 감싸주고 <button type="submit> 이였기에 <form> 안에서 자동적으로 새로고침 기능이 생성된다.
그래서 이것을 막기 위해
const searchMovie = function (event) { event.preventDefault(); 코드를 만들어 새로고침 방지를 해주면 된다.

마지막으로 위의 함수 코드가 실행할 수 있게
renderMovie(response.results); 를 작성해주면 모든 기능들이 정상적으로 작동을 한다.

완성 DEMO SITE: https://joohwanseo.github.io/Movie_list/

---

//이렇게 첫 개인 프로젝트 기간이 끝났다. 정말 쉽지 않고 어려움의 연속이였고 머리를 움켜쥐는 날이 1주일 이라는 기간동안 많기도 했지만 도움을 주셨던 분들과 구글링을 통해 잘 해결했고 1일 차의 나보단 지금이 조금 더 성장했길 바란다.