[TIL] 24.01.12

[구현한 것]

• 여러 URL에서 정보를 가져와서 카드 생성하기

[코드]

카드를 만든다는 것은 같지만 url과 카드가 만들어지는 곳이 달라서 따로따로 각자 넣어봤다,,

function mainMovie(liveId, url) {
  const fullUrl = `${url}`;

  fetch(fullUrl, options)
    .then((response) => response.json())
    .then((data) => {
      for (let index = 0; index < 15; index++) {
        const movie = data.results[index];
        if (movie) {
          const movieCard = createMovieCard(index, movie.poster_path, movie.id);
          document.getElementById(liveId).appendChild(movieCard);
        } else {
          console.error(`No data for index ${index} in ${fullUrl}`);
        }
      }
    })
    .catch((err) => {
      console.error(err);
    });
}

// document.addEventListener("DOMContentLoaded", function () {
const url2 =
  "https://api.themoviedb.org/3/discover/movie?language=ko-KR&region=KR&with_original_language=ko";
const url3 =
  "https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&page=1&sort_by=popularity.desc&with_genres=28";
const url4 =
  "https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&page=1&sort_by=popularity.desc&with_genres=10749";
const url5 =
  "https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&page=1&sort_by=popularity.desc&with_genres=14";
const url6 =
  "https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=ko-KR&page=1&sort_by=popularity.desc&with_genres=16";

mainMovie("live2", url2);
mainMovie("live3", url3);
mainMovie("live4", url4);
mainMovie("live5", url5);
mainMovie("live6", url6);

[배운점]
처음에는 이렇게 합치려고 했지만 못하서 각각의 url에서 정보를 가지고 와서 함수를 계속 적어뒀는데 너무 지저분해서 줄였을 때는 뿌듯했는데 이렇게 TIL로 작성하고 보니,, 이것도 더 줄여서 편하게 사용하고 싶은 마음이 너무 든다.
다음 번에는 url을 받아와 필터로 걸러서 내가 원하는 정보만 가져올 수 있도록 도전해 보겠다!