이중 반복문의 무서움(중첩 for, forEach) - 에러 해결

 

안녕 

 

안녕하세요 오늘은 프로젝트 진행 중 오류가 발생했던 건을 기록해 보려고 합니다!

 

 

 

 

 

 

일단 각 영화 카드를 선택하면 해당하는 카드의 id 값으로 상세페이지가 불러와져야 합니다.

 

하지만 이중 중첩 forEach문을 잘못 사용하게 되어 같은 id값의 상세페이지가 로드 되었습니다.

 

 

틀린 예시 X

올바른 예시 O

 

이렇게 각 카드에 해당하는 id 값을 적용시켜야 하는데 

 

1번 id 값을 모든 카드에 다 넣어주고 2번 id 값을 모든 카드에 다 넣어주었기 때문에

 

결국 마지막 id 값을 모든 카드가 가지게 되어 같은 상세페이지가 나오는 것 입니다.

 

기존 코드

 data.results.forEach(movie => {
      document.querySelectorAll(".movie-card").forEach(card => {
        card.addEventListener("click", (e) => {
          if (!e.target.classList.contains("movie-like")) {
            (window.location.href = `./view/detail.html?id=${movie.id}`)

            const recentMovies = JSON.parse(localStorage.getItem('recentMovies')) || [];
            recentMovies.push(movie);

            localStorage.setItem('recentMovies', JSON.stringify(recentMovies));
          }
        });
      })
    })

 

 

 

보시면 이중 ForEach문으로 뿌려줄 곳을 선택하고 그곳에 같은 값의 movie.id를 넣어주고 있습니다

결국 반복문이 끝까지 진행된다면 마지막 영화 id 값이 모든 카드에 들어가게 되겠죠

 

수정 코드

    const movieCard = document.querySelectorAll(".movie-card")
    data.results.forEach((movie, i) => {
       const card = movieCard[i]
        card.addEventListener("click", (e) => {
          if (!e.target.classList.contains("movie-like")) { 
            (window.location.href = `./view/detail.html?id=${movie.id}`)

            const recentMovies = JSON.parse(localStorage.getItem('recentMovies')) || [];
            recentMovies.push(movie);

            localStorage.setItem('recentMovies', JSON.stringify(recentMovies));
          }
        });
    })

 

그리하여 id 값을 넣어줄 카드를 먼저 선택하고 반복문을 돌리는데

forEach문의 두번 째 매개변수는 index번호이기 때문에

그것을 활용하여 card 변수안에 선택했던 movie-card 클래스를 가진 요소를 순서대로 넣어주면서 

해당되는 id 값을 넣어주는 것 입니다. 이렇게하여 오류를 해결하였고 코드의 가독성도 좋아졌습니다.

 

 

마무리

프로젝트를 진행하면서 여러가지 오류 사항들을 겪고 있는데 그 중 하나를 해결하면서 

다음에 이런 오류가 또 발생할 수도 있기 때문에 무조건 기록해야겠다는 생각을 했습니다.

앞으로 이틀 남았는데 화이팅 해보자!! 끝