[영화 검색 사이트 프로젝트] 1. api연동 및 데이터 뿌리기

1. TMDB API 연동

유튜브api는 설명이 잘되어있는거였다...
제일 먼저 보이는 페이지에 영화 데이터는 인기있는 영화데이터로 뿌리고 싶어서 

PEOPLE LISTS-Popular api를 가져와서 뿌렸다!

TMDB는 옆에 예시코드를 줘서 따로 포스트맨에 저장없이 예시코드를 mockdata파일로 만들었따-!

2. 페이지에 fetch API로 데이터뿌리기(포스터,영화명,평점)

fetch api로 데이터를 가져와서 forEach로 돌려서 innerHTML로 뿌렸다!

평점은 소수점이 막 셋째자리까지 있고 해서 toFixed(1)로 첫째자리까지만 뽑았고,

날짜는 해당 연도만 뽑기위해 slice(0,4)로 앞에 4글자를 뽑았다

createDocumentFragment를 사용해서 비어있는 객체를 만든후에

거기에 li태그를 붙여넣는식으로 짰다-!

*DocumentFragment : 실제 DOM에 추가되기 전까지 메모리를 효율적으로 사용하여 DOM 조작 시 성능이 향상

(불필요한 리플로우나 리페인트가 발생하지 않아서 성능 최적화에 굿!)

const options = {
  TMDB api 호출코드
};

async function getMovieData() {
  const url = "api url";
  try {
    const res = await fetch(url, options);
    if (!res.ok) {
      throw new Error(res.status);
    }
    let data = await res.json();
    data = data.results;
    movieDataElement(data);
  } catch (error) {
    console.error(error.message);
  }
}

async function movieDataElement(video) {
  const fragment = document.createDocumentFragment();
  video.forEach((element, i) => {
    const vote = element.vote_average.toFixed(1);
    const day = element.release_date.slice(0, 4);
    const listItem = document.createElement("li");
    listItem.innerHTML = `
      <dialog class="modal">
        <button class="modal__close" onclick="this.parentElement.close()"></button>
        ...
      </dialog>
      <div class="section__list-item" onclick="this.previousElementSibling.showModal()">
        ...
      </div>
    `;
    fragment.appendChild(listItem);
  });
  list.appendChild(fragment);
}
getMovieData();

3. 해당 영화 클릭시 팝업으로 노출(이벤트 위임)

이부분이 진짜 시간을 좀 잡아먹었다...

팝업은 dialog태그가 유용해보여서 처음으로 사용!

클릭한 태그를 this로 받아서, 그앞에있는 dialog태그를 showModal()하기!

previousElementSibling 을 알기까지 뻘짓을 했다.. 

<div class="section__list-item" onclick="this.previousElementSibling.showModal()">

3-1. 닫기 버튼, 포스터, 영화명, 영화소개, 개봉일 , 평점, 북마크 추가 버튼 노출

이미 forEach로 데이터를 뿌렸기때문에 css입히기~~~

3-2. 팝업 닫기 버튼 구현

닫기버튼의 부모가 팝업창 dialog태그여서 parentElement사용하고 .close()를 사용해서 dialog 닫음

<button class="modal__close" onclick="this.parentElement.close()"></button>

3-3. 북마크 추가 구현(localStorage에 저장)

북마크 추가 버튼에 onclick으로 넣을려했으나 스코프문제로 접근불가,,,(이유를 모른채 시간을 허비ㅠㅠ)

따로 localStorage에 저장하는 함수를 만든다음에 addEventListener의 click이벤트로 넣음!

const bookmarkAddButton = listItem.querySelector(".modal__add");
bookmarkAddButton.addEventListener("click", () => {
  if (window.localStorage.getItem(element.title)) {
    alert("북마크에 이미 추가되었습니다.");
    return;
  }
  window.localStorage.setItem(element.title, JSON.stringify(element));
  alert("북마크에 추가되었습니다.");
});

localStorage에 저장 : window.localStorage.setItem(key,value)

localStorage에서 읽기 : window.localStorage.getItem(key 또는 value)

이왕 북마크에 넣는거 localStorage에 이미 저장되어있으면, 이미 추가되었다고 alert 알려주고 return!

 

그리고 localStorage에 저장하는 데이터가 object라서 JSON.stringify로 json으로 변환하고 저장!