TIL (Today I Learned) 23.10.22(마트료시카 구성)

아직은 개인과제 진행 중에 있다 어제는 API 추가 후 데이터 연동 까지는 성공하였다 

문제는....

카드가 순서대로 나오기는 하지만 카드안에카드가그안에카드가....그리고 또 그 안에 카드가...

어쩌다 보니 마트료시카 식 카드 구성을 완성시켰다 이제부터 이걸 없에보자

---

해결과정

처음에는 CSS문제일 거라 생각해서 아예 카드박스 css를 주석처리 해보았다

처음에는 부분 부분 주석처리를 해보다 점차 걷잡을 수 없는 화면들이 속출했다 

전체의 문제인가 싶어서 통째로 주석처를 해보니

주석처리는 CMD+/   로 가능하다

마침내 순서대로 카드들이 나타났다 역시 CSS문제였나 싶어서 추가로 브라우저 창으로 들어가 console을 확인해 보니

아무리 봐도 해결된 건 아니었다 카드 안에 카드.... 혹시나 싶어서 

car 박스에 영화 id값을 부여 후  클릭하면 id값을 창에 띄우는 코드를 추가해 봤다 

onclick="alert('id : ${movie.id}')"

맨 처음 카드를 클릭 시에는 정상적으로 한 id값만 뜨지만 내려갈수록 alert도 중첩돼서 나왔다...

CSS문제는 아닌 것이 확실해져 이번에는 JS코드 쪽으로 들어가 보았다

 let str ="";
    
    movies.forEach(movie => {
  const temp_html = `<div class="carbox" id=${movie.id} >
  <div class="col" onclick="alert('id : ${movie.id}')">
  <div class="card h-100">
  <img src="https://image.tmdb.org/t/p/w300${movie.backdrop_path}"
}
  <h5 class="title">${movie.title}</h5>
  <p class="overview">${movie.overview}
  </p>
  </div>
  <div class="card-footer">
  <small class="vote_average">${movie.vote_average}</small>
  </div>
  </div>`
  
  // moviesContainer.innerHTML= temp_html
 
  str = str + temp_html
  //temp 을 inner로 집어 넣겠다 
  console.log(str);
});
moviesContainer.innerHTML=str

  }).catch(err => console.error(err));

여기서도 코드를 붙였다 뺐다 필요 없는 부분들을 제거해나가다 보니 결국에는 발견했다 

원인은 이 코드였다

<div class="card h-100

 

 

di값도 중첩 안되고 하나만 나오는 걸 볼 수 있다

  혹시나 싶어서 console로 다시 확인해 보니 정상적으로 중첩되지 않고 나오고 있다  

여러 가지 방법으로 못 찾던 게 이런 사소한 이유일줄이야.... 코드 작성도 중요하지만 수정 또한 중요하다는 걸 깨달았다..