TIL (Today I Learned) 23.10.21

API 데이터를 가져왔다 처음 TMDB 에서 받아온 데이터를 forEach문 을통하여 HTML 페이지에 영화 카드를 추가하였다 

movies.forEach(movie => {
  const temp_html = `<div class="carbox" >
  <div class="col" >
  <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>`

원리는 foreach문의 특성인 배열이 가지고있는 요소들을 한번씩 반복 하게 해주는것이였는데 

원래대로 라면 20개의 영화 카드들이 만들어져야하지만 한개만 만들어졌다 

 

문제해결)  

//문자열  특   str=str+a   
    //이런식으로 카드를 중첩해서 쌓아야함 안그러면 초기화 되서 하나만 나옴 
    
    let str ="";
    
    movies.forEach(movie => {
  const temp_html = `<div class="carbox" >
  <div class="col">
  <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로 집어 넣겠다

원인은 foreach 그자체의 특성이였다 API로받은  20의 카드데이터로 20개를 만들기는 하지만

하나만들고 그위에 덧씌우고 를 반복하기에 결론적으로는 마지막 20번째 카드만 남게됐다 

이를 방지하기위에  카드 중첩을 위한 코드를 추가했다 

 let str ="";

str이라는 0번째 아무것도 없는 문자를 할당하고 

str = str + temp_html

  //temp 을 inner로 집어 넣겠다

  console.log(str);

});

moviesContainer.innerHTML=str

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

str 재할당을 통해 계속해서 카드가 중첩되도록 만들었다

아래는 제목만 넣어본 상태순서대로 잘 나오고있다 이제 제목과 id값을 넣고 내용 평점을 모두넣어주고

css까지 접목하면...

상상치도 못한 광경이 펼쳐졌다... 내일은 이걸 해결해 봐야겠다,,,