api받아서 html에 넣기

<div id="movie-container"></div>

html에 일단 div 하나 만들어준다.
html안에다 script작성해도 되지만 난 따로 script.js파일을 만들었다.

const movieContainer = document.getElementById("movie-container");

HTML에서 해당 ID를 가진 element를 가져온다.

createCard 함수

const createCard = (movie) => {
  const { id, title, overview, poster_path, vote_average } = movie;

  // 필요한 엘리먼트들을 생성합니다.
  const card = document.createElement("div");
  const cardBody = document.createElement("div");
  const image = document.createElement("img");
  const titleElement = document.createElement("h2");
  const overviewElement = document.createElement("p");
  const voteAverageElement = document.createElement("p");

  // 각 엘리먼트에 클래스를 부여합니다.
  card.className = "card";
  cardBody.className = "card-body";
  image.className = "card-img";
  titleElement.className = "card-title";
  overviewElement.className = "card-overview";
  voteAverageElement.className = "card-voteAverage";

  // 이미지 소스를 설정합니다.
  image.src = `https://image.tmdb.org/t/p/w500${poster_path}`;

  // 각 엘리먼트에 텍스트 내용을 설정합니다.
  titleElement.textContent = title;
  overviewElement.textContent = overview;
  voteAverageElement.textContent = `평점: ${vote_average}`;

  // 생성한 엘리먼트들을 조립합니다.
  card.appendChild(image);
  card.appendChild(cardBody);
  cardBody.appendChild(titleElement);
  cardBody.appendChild(overviewElement);
  cardBody.appendChild(voteAverageElement);

  card.id=id; //card라는 html엘리먼트에 id 속성추가->고유한 ID부여
  
  return card;
};

하나의 영화 정보를 받아와서 해당 영화에 대한 카드를 동적으로 생성한다.
id, title, overview, poster_path, vote_average 등(여기서는 이것만!)의 영화 정보를 활용하여 html을 생성하고 조립한다.
각 element에는 부여할 클래스명이나 속성들이 지정된다.
내가 만들고 싶은 카드의 html뼈대를 생성하여 필요한 element들을 만든다.
각 엘리먼트들에 받아온 영화 정보 값을 넣어주고 엘리먼트들을 조립한다.(appendChild로!)
나는 id도 필요한 정보였기 때문에 card.id=id; 로 card라는 html엘리먼트에 id 속성을 추가하였다.
이제 id속성에 접근할 수 있다!

fetch

// API 요청을 보내고 응답 데이터를 처리합니다.
const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization: "Bearer 당신의 api",
  },
};

fetch(
  "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
  options
)
  .then((response) => response.json())
  .then((data) => {
    // 각 영화에 대해 createCard 함수를 호출하여 카드를 생성하고
    // movieContainer에 추가합니다.
    data.results.forEach((movie) => {
      const movieCard = createCard(movie);
      movieContainer.appendChild(movieCard);
      movieCard.addEventListener('click',()=>{
        const movieID=movieCard.id;
        alert(`id: ${movieID}`);
      });
    });
  })
  .catch((err) => console.error(err));

movie는 각각의 영화 정보를 담고 있는 객체를 가리키는 변수이다. api에서 최고평점영화 목록을 가져오기 위해 fetch 함수 사용한다.
fetch함수는 비동기적으로 api에 요청을 보내고 응답객체 response를 받는다.=> 반환값은 다음 then에서 처리한다.
data는 앞서 json 데이터를 나타낸다.
results는 이 api 데이터 배열의 이름이다.