쿠키를 만들어 페이지 로드 시간 줄이기

 기존의 방식은 매번 fetch를 하여 TMDB의 정보를 불러오기 때문에, 시간이 오래걸렸다. 그래서 localStorage에 저장하는 방식으로 쿠키를 생성하였다.

 

try {
      //캐쉬가 있으면 캐쉬를 불러옴
      topRatedMovies = localStorage.getItem('cache_movies') === null ? await fetchAllTopRatedMovies() : JSON.parse(localStorage.getItem('cache_movies')); 
    } catch (error) {
      console.error('Error fetching data:', error);
    }

 

localStorage에 캐쉬가 저장되어 있다면, fetchAllTopRatedMovies를 호출하지 않고 저장된 캐쉬를 활용한다.

 

상위 20개의 영화만 불러올 때는, 이 문제가 크게 느껴지지 않았는데 페이지를 만들어서 200개의 영화를 불러올 경우 체감하는 시간이 훨씬 길었다.

//이전 검색 결과가 있으면 불러온다
  function loadingSearchValue(data) {
    const searchTerm_storage = JSON.parse(localStorage.getItem('searchValue')); //JSON파일을 다시 문자열로 바꾼다.

    if (searchTerm_storage === null || localStorage.getItem('fromIndex') === null) { //만약 저장된 검색 결과가 없으면 영화 카드를 모두 생성한다.
      const changePageNum = localStorage.getItem('page') === null ? currentPage : currentPage = localStorage.getItem('page');
      fetchMoviesByPage(changePageNum);
      localStorage.removeItem('page');
      return;
    }

    localStorage.removeItem('fromIndex'); // 필요없어졌으므로 삭제
    const filteredMovies = data.filter(movie => movie.title.toLowerCase().includes(searchTerm_storage)); //저장된 검색 결과가 있으면 검색한 결과만 생성한다.
    renderMovies(filteredMovies);
  }

 

그 뒤, 이전 검색 결과를 확인하여 검색 결과가 있다면 검색하고, 이전 페이지 정보가 있으면 해당 페이지로 이동한다.