어제는 카드 리스트들을 api에서 불러온 걸 화면에 출력해줬다면
오늘은 그 카드를 누를 때 해당 영화의 id를 포함한 알럿창을 띄워주는 코드를 짜봤다.
분명 듣기만 해선 엄청 쉬운 기능인 거 같은데 어라 왜 안 되지?? 라고 생각해 봤는데
문제는 이때부터였다..
function showMovieList(movies) {
const movieListBox = document.querySelector('.movieList');
movieListBox.innerHTML = "";
movies.forEach(movie => {
let movieCard = document.createElement('div'); // div 만들어 주기
movieCard.classList.add('card'); // 위에 생성한 div에 클래스 card 부여
movieCard.innerHTML = `
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}"></img>
<h4 class="movieTitle">${movie.title}</h4>
<p class="overView">영화 줄거리<br><br>${movie.overview}</p>
<p class="rating">👍평점:${movie.vote_average}</p>
</div>
</div>`;
movieListBox.appendChild(movieCard);
})
};
const movieId = document.querySelector('.card').forEach(e => {
e.addEventListener('click', function () {
aleat("영화 ID=" + `${movie.id}`)
}
})
이렇게 쓰면 바로 나오지!! 하고 자신있게 실행한 결과..
개발자 도구를 켜서 봐도 위에 영화 리스트들 말곤 뜨지 않는 것이다..
이건 계획 밖인데 도대체 뭐가 문제지 하고 한참을 고민하면서 구글링도 열심히 하고 주변 사람들에게도 물어보고 했지만 한참을 헤맸다.. 그러던 도중 설마 저 영화 카드들이 다 로딩되는데 시간이 좀걸리는데 카드가 생기기도 전에 이벤트를 발생시켜서 거란가? 싶어서 const movieId를 선언하기 전에 윗줄에 console.log("ddd") (빈 칸엔 아무거나 넣은 거!)를 써보고 다시 홈피를 켜봤는데 여태 왜 아무것도 안 나온 건지 이유를 알아버렸다.
문제 해결 과정
영화 목록들을 다 불러오기도 전에 console.log가 실행된 걸 발견했다!! 그 말인 즉슨, 이 console.log를 실행한 아래 줄에 있는 카드 클릭 시
해당 영화의 id를 보여주는 알럿창 띄우는 코드는 저 영화 목록들을 다 불러오기도 전에 진행돼서 영화를 클릭해도 아무 것도 안 떴던 것..
그 후 다시 고민에 빠졌다.
DOMContentLoaded 이벤트를 사용해서 돔트리를 전부 불러오면 실행이 되게끔 설계해볼까 했는데 곰곰히 생각해 보니
사실 이것보다 간단한 방법이 있었다..
굳이 showMovieList 함수 밖에서 어렵게 쓰지 말고 아예 저
showMovieList 함수 내에서 카드를 만들기 전에 클릭 이벤트를 만들어 두면 되지 않을까?! 해서
저 카드를 만드는 함수를 실행하기 전에 먼저 실행되도록 써봤다.
일단 함수 밖에서 선언하는 것이 아니니 위에서 사용한
movieCard 함수를 그대로 사용하면 돼서 훨씬 편했다
짜잔~ 이렇게 코드를 수정한 뒤 두근거리는 마음으로 결과물을 확인
이 알럿창 하나 보려고 얼마나 머리가 지끈지끈 거렸는지..
사실 코딩 뉴비가 아닌 고수 분들이 보시면 저 쉬운 걸
몇 시간 씩 걸려?! 하며 놀라실 거 같지만 뉴비인 난 저 알럿을 보자마자
온 몸에 전율이 흘렀다.. 내가 이겼다 alert.
오늘 하루를 마치며
생각을 조금만 더 일찍 깊이 해봤다면 진작 해결했을 문제같은데
그래도 오래 걸린만큼 뿌듯함은 배가 된 거 같다.
코드 짜는데 걸리는 시간은 앞으로 배워나갈수록 더 단축할 수 있고, 다른 것에 휘둘리지 않고 내 소신대로 쭉 앞으로 정진한다면 실력 또한 늘어날 것이라 굳게 믿고 앞으로도 열심히 해야겠다!!
