240805

FACTS(사실, 객관) : 내가 한 일

상세정보 가져오기까지 하고 주말동안 출연진 가져오기까지도 해봤는데

 

//출연진

fetch(
  https://api.themoviedb.org/3/movie/${movieId}/credits?language=ko,
  options
)
  .then((response) => response.json())
  .then((response) => console.log(response))
  //.then((jsonData) => jsonData.crew.filter(({ job }) => job === "Director"))
  .then((data) => {
   if (!data || !data.cast) {
      console.error("출연진 데이터에 cast 정보가 없습니다.");
      return;
    }

    const creditsInfo = data;
    const creditsBox = document.getElementsByClassName("cradits_wrap")[0];
    
    creditsInfo.slice(0, 14).forEach((cast) => {
      const cdCard = mkCreditsBox(cast);
      creditsBox = creditsBox.appendChild(cdCard);
    });
  })
  .catch((err) => console.error(err));

function mkCreditsBox(cast) {
  const card = document.createElement("div");
  card.className = "cradits_card";

  card.innerHTML = 
    <img src="${"https://image.tmdb.org/t/p/w500" + cast.profile_path}" alt="${
    cast.name
  }">
  ;
  const posterImgPath = "https://image.tmdb.org/t/p/w500";
}

cast정보가 너무 많아서 15개만 출력할 수 있도록 해봤는데 오류가 뜸...

 

문제1

  .then((response) => console.log(response))

아무 의미없이 받아온 값을 콘솔에 찍어주기만 하는 코드.

지우고 아래에 합쳐줘서 코드를 간결하게 만듦

 

문제2

creditsBox = creditsBox.appendChild(cdCard);

creditsBox에 굳이 선언할 필요가 없다고 하심

creditsBox = 까지 지움

 

문제3

이걸 왜 몰랐지 했던 문제

mkCreditsBox함수에 리턴해주는 코드가 없어서 값이 표시되지 않았음

return card; 추가하니 정상적으로 표시됨.

 

문제4

전부 표시되는데 이미지가 깨지는 문제가 생김

이미지path를 backdrop-path를 참고해서 w500_and_h500_multi_faces까지 가져왔는데

여기서는 유효한 이미지 사이즈를 달라는? 오류가 떠서

w500까지만 써넣었더니 정상적으로 표시됨 이유는 잘 모르겠음

---

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

유연하게 수정하는것을 너무 못하는거같다..

---

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

 

꼭 return해주기..

---

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지