드디어! 화면에 데이터를 구현했다! 😭
콘솔에만 찍히는 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에 덮어씌워 주었다.