[영화 검색사이트] 상세페이지 개발2

1. 불러온 데이터를 변수에 담기

fatch를 통해 tmdb사이트에서 받아온 데이터 들을 호출해서 화면에 뿌려주는 함수를 만들었다.

const movies = await fetchMovieData(data.id, data.media); // detail정보 요청
  const videos = await fetchvVideoData(data.id, data.media); // video 요청
  const actors = await fetchCreditData(data.id, data.media, "배우"); // 출연배우 요청
  const staffs = await fetchCreditData(data.id, data.media, "스탭"); // 스탭 요청

영화의 상세 정보, 영화의 비디오 정보, 영화 출연배우와 스텝의 정보를 각각의 변수에 담아주였다.

movies = 객체

videos,actors,, staffs = 배열, 

 

const {
    title,
    poster_path,
    release_date,
    production_countries,
    vote_average,
    runtime,
    production_companies,
    overview,
    name,
    first_air_date,
    last_air_date,
    number_of_episodes,
    number_of_seasons,
    networks
  } = movies;

객체에 담긴 정보들을 "구조분해 할당" 구문으로 각각의 정보를 뽑아 해당 변수에 담는다

 

스프레이트 오퍼레이터란?

객체의 아이디 별로 변수에 담고 싶을때 사용한다. 

객체의 아이디가 변수이름으로 지정되어 아이디에 해당되는 value값을 필요한 곳에 사용이 가능하다.

 

 

dom을 활용하여 영화상세정보가 쓰이는 dom요소에 넣어주기

// 미디어상세정보
docTitle.innerHTML = title; // 제목
docImage.src = `https://image.tmdb.org/t/p/w500/${poster_path}`; // 이미지
docReleaseDate.innerHTML = release_date; // 개봉년도
docCountries.innerHTML = production_countries[0] == undefined ? '': production_countries[0]["name"]; // 국가
docRuntime.innerHTML = Math.floor(runtime / 60) + "시간 " + (runtime % 60) + "분" // 런타임
docCompanies.innerHTML = production_companies[0].name; // 제작지원

 

 

 

 

 

 

 

 

2. 트레일러

트레일러 영상을 가져오는 코드

 const videoData = videos.filter((item) => {
    return item.type === "Trailer";
  });
  const { key } = videoData.length === 0 ? 0 : videoData.at(-1);

비디오 데이터 에서 받아온 영상은 트레일러1,2,3, 티져영상1,2 등 많은 영상 데이터 들이 있다

그중에서 트레일러 영상만 받아오는 로직을 구현했다.

 

filter함수를 통해 영상 타입이 "Trailer"인 것만 받아 와서 변수에 저장한다.

만약 해당영화가 비디오 데이터를 갖고 있지 않다면 에러가 나기 때문에 배열의 길이를 측정하는 length를 이용하여 

만약 비디오 데이터가 없다면  0을, 있다면 배열의 마지막 객체를 변수에 담아준다 

 

마지막 요소를 가져오는 이유

tmdb에서 받아오는 비디오 데이터는 최신순으로 정렬이 되어있기에 멘처음 트레일러를 보여주기 위해서 마지막 객체를 

변수에 담아주였다,

 

객체의 키값만 필요하기에 스프레이트 오퍼레이터 구문으로 key의 value값을 변수에 담아주었다. 

 

 // 트레일러와 줄거리
  trailer.src = key === 0 ? "" : `https://www.youtube.com/embed/${key}`; // 트레일러
  trailer.title = name === 0 ? "" : name; // 트레일러 타이틀
  overView.innerHTML = overview; // 트레일러 타이틀

 

출연배우 리스트

// 출연진
  let result = "";
  for (let i = 0; i < actors.length; i++) {
    let actorList = `<li onclick="actorDetail(${actors[i].id})">
      <div class="img_box">
        <img src="https://image.tmdb.org/t/p/w500/${actors[i].profile_path}" alt="">
      </div>
      <div class="actor_name">${actors[i].name}</div>
    </li>`;
    let actorLi = document.querySelectorAll(".actor_wrap > .actor_list > ul > li");

    result += actorList;
    actor_list.innerHTML = result;
  }

출연배우들을 리스트로 만들어 주기 위해 출연배우의 수만큼 for문을 돌려서 리스트를 만들어 주었다.

 

먼저 result라는 빈배열을 생성한 후 for문으로 생성된 리스트들을 하나하나 result에 넣어 준다 

생성된 리스트 들을 innerHTML을 통해 ul의 자식요소로 넣어서 리스트로 만든다. 

 

 let actorLi = document.querySelectorAll(".actor_wrap > .actor_list > ul > li");
  for (let i = 0; i < actorLi.length; i++) {
    actorLi[i].style.left = `${i * 20}%`;
  }

우리는 출연배우 리스트를 슬라이드 이벤트로 만들려고 하기 때문에 css를 flex가 아닌 position : absolue로 하였다.