[영화 검색 사이트 프로젝트] 2. 검색 구현

1. 검색 키워드가 들어간 영화리스트 보여주기

먼저 TMDB에서 SEARCH-Keyword api 가져오기!

처음에는 검색전(메인 인덱스) 함수 / 검색후 함수이렇게 두개 만들고, 공통으로 사용된 부분을 또 함수로 만들려고 했다!

 

근데 생각해보니 아예 하나의 함수로 파라미터를 키워드를 넣어서 키워드가 있을 때랑 없을 때 를 if로 제어하면 되네?!

async function getMovieData(keyword) {
  const url = `https://api.themoviedb.org/3/${
    keyword
      ? `search/movie?language=ko&query=${keyword}`
      : "movie/popular?language=ko&page=1"
  }`;
  try {
    const res = await fetch(url, options);
    if (!res.ok) {
      throw new Error(res.status);
    }
    let data = await res.json();
    data = data.results;
    getMovieDataElement(data);
  } catch (error) {
    console.error(error.message);
  }
}

쉽게 삼항 연산자로 url를 가져왔고, 그외는 전에 구현한 기능 그대로~! (검색전후 레이아웃은 똑같음!)

하지만 검색하면 처음에 보여지는 영화리스트뒤에 키워드 영화들이 따라 붙음 💩

 

그래서 간단하게 getMovieDataElement(data)호출전에 빈 innerHtml을 넣어줘서 해결@@

async function getMovieData(keyword) {
  ...
  list.innerHTML = "";
  getMovieDataElement(data);
  ...
}

 

2-1 검색후 검색버튼 눌렀을때

input의 value를 받아와서 1번에서 만든 getMovieData에 넣어주기!

const handleSearch = () => getMovieData(searchInput.value);
searchBtn.addEventListener("click", handleSearch);

2-2 검색후 엔터눌렀을때

이벤트리스너의 keyup으로 해당키가 enter일때에 마찬가지로 input의 value 넣어주기!

searchInput.addEventListener("keyup", (e) => {
  if (e.key === "Enter") handleSearch()
});

2-3 검색어를 입력할때마다

이벤트리스너의 input을 사용하여 input의 value 넣어주기!

searchInput.addEventListener("input", handleSearch);