본문 바로가기
📄Today I Learned

가져온 데이터 화면에 구현하기

by 영진학생 2025. 1. 9.

드디어! 화면에 데이터를 구현했다! 😭

 

콘솔에만 찍히는 20개의 배열로 된 객체를 화면에 구현해 내는게 초보자인 나에게에는 쉬운일이 아니었다.

 

 

  • fetchMovies 함수 내에서만 dispalyMovies() 함수가 실행이 되는 것이 문제였다.
  • 실행 함수를 밖으로 빼고 싶어서 movieList를 return 해버림
  • 그런데, async/await의 특수성 때문에 무조건 promise 값이 리턴이 되는 것이 아닌가!!
  • 알아본 결과 async 함수에서 return한 결과값을 다시 사용하기 위해선 또 다른 async 함수를 만들어야 우리가 원하는 온전한 data.results 배열을 얻을 수 있다는 사실을 알게 되었다.

 

/ 화면을 보여주기위해 displayMovies 라는 함수를 선언한다.
function displayMovies(movieList) {
  console.log(movieList);

  // id = cards 가 들어가 있는 태그를 선택해서 movieCard를 선언하고 할당
  const movieCard = document.querySelector("#cards");

  // html에 값을 넣어주기위해 초기값을 할당한다.
  let html = "";
  
  // 영화 정보가 담겨있는 movieList 배열을 forEach로 차례대로 반복한다.
  // movie의 poster_path, title, overview, vote_average 값을 가진 카드를 results 배열안의 배열 갯수만큼 만든다.
  movieList.forEach((movie) => {
    html += `
    <div class="card">
      <img src= "https://image.tmdb.org/t/p/w500/${movie.poster_path}"/>
      <div>
        <h2 class="card-title">${movie.title}</h2>
          <p>평점 : ${movie.vote_average}</p>
      </div>
    </div>
    `;
  });

  movieCard.innerHTML= html; // movieCard의 내부 html요소에 내가 작성한 html을 할당한다.
}

 

가져온 데이터를 어딘가에 담아두고 쓰기 위해서는 새로운 로직의 함수를 만들어야 했다. 그리고 그 함수 안에서 "cards" 아이디를 가진 태그를 선택해 movieCard안에 담았고 그 안에 내가 가져 오길 원했던 포스터 사진, 제목, 평점 같은 것들을 template로 만들어 innerHTML 속성으로 html에 덮어씌워 주었다.