팀과제

주말 간 영화를 기준에 맞춰 정렬하는 sort.js를 추가했다.
근데 정렬된 영화에서는 search 기능이 작동하지 않는 오류가 발생했다.

오류

최초 오류를 발견한 팀원분이 코드를 수정하여 sort 후에도 search가 가능하게 수정을 해줬다.

팀원분이 찾은 방법

export const sortMovie = function (unsorted) {
  function avg() {
    sortVoteAverage(unsorted);
    searchMovie()
  }
  voteAverage.addEventListener("click", avg);

  function title() {
    sortTitle(unsorted);
    searchMovie()
  }
  movieTitle.addEventListener("click", title);

  function date() {
    sortReleaseDate(unsorted);
    searchMovie()
  }
  releaseDate.addEventListener("click", date);
};

정렬해 주는 함수 내에 searchMovie를 한 번씩 더 적어줘서 sort 후에도 영화 검색이 가능해졌다.
하지만 각 정렬 버튼을 누를수록 alert창이 하나씩 더 뜨는 오류가 발생했다.
alert창을 띄우는 코드만 제거하면 우리가 원하는 기능을 구현하는데 영향은 없었지만 왜 자꾸 alert이 중첩되는지 궁금하였다.
여러 고민 끝에 결국 튜터님을 찾아뵙게 됐다.

addEvnetListener

addEvnetLister는 결국 eventlistener를 추가해 주는 기능이다.
그 말인즉 sortMovie code 내에 searchMovie는 호출될 때마다 eventlistener를 하나씩 더 가지게 된다.
이 이유 때문에 각 정렬 버튼들을 누를 때마다 alert창 또한 중첩으로 뜨게 된다.

문제의 원인

문제의 원인은 search.js에 있었다.
팀원분의 개인과제에서 사용됐던 search.js는 최초 페이지 랜딩 후 카드들의 정보가 달라질 일이 없었다.
하지만 sort.js가 추가되며 카드들의 정렬이 바뀌면서 기존에 search.js가 가지고 있던 정보들로는 바뀌게 된 카드들의 위치를 인지하지 못했다.

export function searchMovie() {
  const movieCard = movieCards.querySelectorAll(".movie-card");

  function handleSearch(e) {

    e.preventDefault();
    const searchMovieList = [];
    let searchedValue = searchValue.value.toLowerCase();

eventListener가 달려있는 handleSearch를 통해 작동하던 search기능이 카드들의 이름을 찾는 코드인 const movieCard를 handleSearch 내부로 넣어서 클릭마다 다시 카드 이름들을 찾을 수 있도록 코드를 수정했다.

export function searchMovie() {
  function handleSearch(e) {
    const movieCard = movieCards.querySelectorAll(".movie-card");

    e.preventDefault();
    const searchMovieList = [];
    let searchedValue = searchValue.value.toLowerCase();