[영화 검색 사이트] - API로 영화 카드 템플릿을 어떻게 제작할까?

문제 상황

JQuery로 HTML 요소를 수정하는 것만 보다가

순수 바닐라 Javascript로 HTML 요소를 수정하려고 하니깐 엄청 막막하였다

 

일단 내가 모르는 부분은 다음과 같았다

 

📍 HTML 태그를 Javascript에 가져오는 방법

📍 해당 태그에 영화 정보 데이터를 넣는 방법

📍 Javascript에서 만든 코드를 HTML에 넣는 방법

 

 

해결 과정

모르는 부분을 검색하면서 찾아본 결과,

생각보다 템플릿을 제작하는 방법은 되게 간단하였다

 

📍 HTML 태그를 Javascript에 가져오는 방법

querySelector 이용하기

auerySelector을 사용하면 HTML 태그 중에서 원하는 부분을 가져올 수 있다

document.querySelector("selectors");

div, h1, ul 처럼 명시적으로 나와있는 태그를 바로 불러와도 되지만,

HTML 태그가 많아질수록 별로 유용하지 못한 방법이다

해당 태그에 class 혹은 id를 지정하여 .클래스명 혹은 #아이디명을 () 안에 넣어주면 된다

 

 

예시를 한 번 살펴보자

const $movieList = document.querySelector(".movie-list");

영화 카드를 만들어서 넣을 div에 class명으로 movie-list을 할당했다

코드의 가독성을 위하여 선택한 div 태그를 $movieList라는 변수에 할당했다

 

 

📍 해당 태그에 영화 정보 데이터를 넣는 방법

``(백틱) 이용하기

백틱을 사용해서 HTML에 넣을 코드를 그대로 작성하면 된다

${}을 이용해서 앞에서 정의한 영화 아이디, 이미지 주소, 제목, 평점을 넣어주면 끝이다

생각보다 간단해서 놀랐다

 

예시를 살펴보자

// HTML에 집어 넣을 코드 작성해서 변수에 할당하기
let cardTemplate = `
        <div class="movie-card" id=${movieId}>
          <div class="movie-image">
            <img src=${movieImage} alt="영화이미지" />
          </div>
          <div class="movie-card-body">
            <h2 class="movie-title">${movieTitle}</h2>
            <p class="movie-rating">평점: ${movieRating}</p>
          </div>
        </div>     
      `;

 

 

📍 Javascript에서 만든 코드를 HTML에 넣는 방법

innerHTML 이용하기

innerHTML을 이용하면 Javascript에서 만든 HTML 코드를 손쉽게 넣을 수 있다

element.innerHTML = htmlString;

element : HTML 코드를 집어 넣을 태그

htmlString : 위에서 작성한 템플릿 코드의 형태

 

예시를 살펴보자

 // div 태그-movieList에 템플릿 추가하기
$movieList.innerHTML += cardTemplate;

 

📌 +=을 사용한 이유

밑에 나와있는 전체 코드를 보면 이해가 더 잘 될 것이다

forEach문을 사용했기 때문에 단순히 할당만 하게 된다면 1개의 카드만 만들어 진다

+=을 사용해야 $movieList 태그에 새로운 HTML 요소가 추가된다

 

2개의 코드를 모두 직접 실행해본다면

무슨 말인지 더 잘 이해할 수 있을 것이다

 

전체 코드

// TMDB에서 인기 영화 API 가져오기
const url = "https://api.themoviedb.org/3/movie/popular?language=ko&page=1";
const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5MGI0MTIwZGU5NTUwOWEzYTJhMTY4MmQzYzdhYmUxMyIsIm5iZiI6MTczNjI5NTgzOS4wNSwic3ViIjoiNjc3ZGM1OWY4OWZjNWQ5NDQyNGU1NmUxIiwic2NvcGVzIjpbImFwaV9yZWFkIl0sInZlcnNpb24iOjF9.KNDcuNLSXmO_bZERMNVDo-_I5r9KBaKkc-1kZCvdFU8",
  },
};

const $movieList = document.querySelector(".movie-list");

// 인기 영화 데이터 가져오기
fetch(url, options)
  .then((res) => res.json())
  .then((data) => {
    const movieList = data.results; // 인기 영화 20개 정보가 담긴 배열

    // 영화 카드 만드는 템플릿 생성하기
    movieList.forEach((movie) => {
      let movieTitle = movie.title;
      let movieRating = movie.vote_average;
      let movieImage = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
      let movieId = movie.id;

      // 영화 카드 템플릿
      let cardTemplate = `
        <div class="movie-card" id=${movieId}>
          <div class="movie-image">
            <img src=${movieImage} alt="영화이미지" />
          </div>
          <div class="movie-card-body">
            <h2 class="movie-title">${movieTitle}</h2>
            <p class="movie-rating">평점: ${movieRating}</p>
          </div>
        </div>     
      `;
      // div 태그-movieList에 템플릿 추가하기
      $movieList.innerHTML += cardTemplate;
    });
  })
  .catch((err) => console.error(err));

 

 

결과

모르는 부분을 해결한 결과,

다음과 같은 결과물을 얻을 수 있었다

 

20개의 영화 카드가 모두 만들어졌다! 야호..~