[JS][프로젝트] 🎬영화 검색 UI(6) - 문제 상황 해결, header component 구현

문제 상황 해결

  index.html을 실행할 시 항상 API를 새로 받아와서 데이터가 저장되지 않고 계속 초기화되는 현상이 발생했다.

// 이미 불러왔던 영화 데이터가 있으면 안 불러오도록
if (JSON.parse(localStorage.getItem("movies")) === null) {
  console.log("----영화 데이터를 불러옵니다----");
  callGetMoviesAPI();
} else if (searchMovies === null) {
  const filteredMovieData = movies.map((movie) => JSON.parse(localStorage.getItem(movie)));
  displayMovieData(filteredMovieData);
} else {
  // 검색 중인 text가 있으면 해당 text가 title에 포함되어 있는 영화만 나열
  let contentMovie = search_movie(searchMovies);
  displayMovieData(contentMovie);
}

  조건문을 활용하여 로컬 스토리지에 영화 데이터가 있는 경우 API를 받아오지 않도록 수정하여 문제를 해결하였다.

 

header component 구현

  메인페이지, 상세페이지에서 동일한 디자인으로 동일한 기능을 수행하는 요소인 헤더를 웹 컴포넌트로 따로 구현을 해봤다. 바닐라 자바스크립트로 컴포넌트를 만들어서 사용해보는 것은 처음이라 좀 헤맸지만, 만들어 놓고 나니 검색 이벤트 처리가 훨씬 쉬워져서 좋았다.

class HeaderComponent extends HTMLElement {
  connectedCallback() {
    // Add your HTML template
    this.innerHTML = `
      <nav class="menubar-top">
        <img id="representive-mark" src="style/image/icon.png" />
        <form class="search-div" id="search_form">
          <input type="text" placeholder="search..." id="searchText" autofocus />
          <img src="style/image/search_icon.png" class="icon-search" id="handleSearch" alt="검색 아이콘" />
        </form>
      </nav>
    `;

    // Add your event listeners
    this.setEventReset();
    this.setEventSearch();
  }  
}

customElements.define("movie-header", HeaderComponent);