영화 검색 사이트 발전 시키기 - 1

---

팀프로젝트 - 영화 사이트 발전시키기

---

이번 팀프로젝트는 기존 각자 만들었던 개인 프로젝트 중 한개를 골라서 발전시키는게 목표다.
그리고 맡은 기능은 영화 상세 페이지를 만드는 기능이다. 먼저 구상을 해봤는데 사용자가 클릭한 정보를 새로운 html 에 가져오는게 핵심 로직이 될 것 같다.

---

- 구현 기능

우선 OPEN API에 저장하여 템플릿 리터럴(백틱)을 사용하여 HTML을 추가했었던 코드 중 a 태그 코드에 info.html 로 이동시키고 주소에 movie 에 id 값을 추가시킨다.

const tempHtml = `
<div class="content_${i}" id="card_${i}" style="grid-area: d${i};">
	<div class="movie_title">${title}</div>
	<div class="movie_overview">${overview}</div>
	<div class="movie_title">${voteRate}</div>
	<a href="info.html?${movieId}">
	<img src="${base_url}${poster}" alt="Poster [${title}]" style="width: 100%;">
	</a>
    </div>`

그리고 이동한 info.html 에 연결된 스크립트에서 영화의 상세 정보 api를 추가로 가져온다. 그 데이터를 detailMovie(data) 담아준다.
base_url 에 영화 포스터 이미지의 기본 URL을 설정하고, movieId 에는 현재 페이지의 URL에서 파라미터로 전달된 영화 ID를 추출하여 index.html 에서 선택한 영화의 id 값을 info.html 로 가져오게 해준다.

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'Bearer (api key값) '
  }
};
const base_url = "https://image.tmdb.org/t/p/w500";
const movieId = location.href.split("?")[1]

fetch(`https://api.themoviedb.org/3/movie/${movieId}?language=en-US`, options)
  .then(response => response.json())
  .then((data) => {
    console.log(data)
    detailMovie(data);
  });

이제 가져온 데이터를 info.html 에 출력시키기 위해 다시 템플릿 리터럴을 사용해준다.

function detailMovie(data) {
  const movieInfo = document.createElement("div");
  movieInfo.innerHTML = `
  <div>
  <img src="${base_url}${data.poster_path}" alt="Poster">
  </div>`;

  document.body.appendChild(movieInfo);
}

---

- 문제점

script를 type=module 로 사용하지 않아서 기존 api 의 id 값을 info.html 로 가져오는게 너무 어려웠다. 그리고 직접 짠 코드 구성이 아니었기때문에 코드 시작을 어떻게 연결해야할지 고민이 많이 됐었다. 그러던 도중 튜터님에게 질문하여 쿼리스트링을 알게됐었고, 서칭 후 사용방법을 적용시켜본 결과 잘 적용됐다.

---