[2024.04.24] TIL 8일차

[ 본캠프 8일차 기록 ]

🖥️ 오늘 공부한 내용 🖥️

2주차 개인과제

2주차 개인 과제

1. js 작업

function fetchMovies() {
  const apiKey = 'MY_API_KEY';
  const apiUrl = `MY_API_URL`;

  fetch(apiUrl)
    .then(response => response.json())
    .then(data => renderMovies(data.results))
    .catch(error => console.error('Error fetching movies:', error));
}

2. 각각의 카드에 영화 정보 넣어서 카드 생성

function renderMovies(movies) {
  const movieList = document.getElementById('movieList');
  const movieCardTemplate = document.getElementById('movie-card-template');

  movies.forEach(movie => {
    const movieCard = createMovieCard(movie, movieCardTemplate.content.cloneNode(true));
    movieList.append(movieCard);
  });
}

• getElementById로 제일 상단에 있는 요소를 가져옴
• forEach로 각각을 돌며 영화 데이터가 넣어지도록 함

3. 각 요소에 맞는 영화 데이터 넣기

function createMovieCard(movie, template) {
  const movieCard = template.querySelector('.movie-card');
  const image = template.querySelector('.poster-image');
  const title = template.querySelector('.movie-title');
  const overview = template.querySelector('.movie-overview');
  const voteAverage = template.querySelector('.movie-vote');

  image.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`;
  image.alt = movie.title;
  title.textContent = movie.title;
  overview.textContent = movie.overview;
  voteAverage.textContent = `Vote Average: ${movie.vote_average}`;

  return document.importNode(movieCard, true);
}

• querySelector로 각 요소의 id에 접근하여 해당하는 데이터를 넣어줌
• js 내에서 요소까지 생성하는 방법 대신 template을 사용하여 분리