[영화 검색 사이트 프로젝트] 3. 파일분리, 북마크 구현

어제 다른 수강생들과 얘기하면서 코드를 잠깐 봤는데 파일 분리를 잘하신분이 계셨다

내 코드는 현재 너무 길고 가독성이 떨어지는 것 같아서 파일분리를 했다!

js폴더를 만들고

- api(api처리)

- movieList(api에서 가져온 데이터를 뿌리는 기능)

- modal(모달창)

- search(검색기능)

- main(호출, 기타 기능)

- bookmark(북마크 기능)

이렇게 파일분리를 하였다!

👻경로 에러

GET http://127.0.0.1:5500/js/api net::ERR_ABORTED 404 (Not Found)

GET http://127.0.0.1:5500/js/search net::ERR_ABORTED 404 (Not Found)

💢 원인 : 파일경로가 잘못됨

💫 해결 : import { getMovieData } from "./api" 에서 import { getMovieData } from "./api.js";로 수정하니 됐다

 

1. 북마크 구현

 헤더-북마크 버튼을 클릭시 로컬스토리지에 저장된 데이터들을 뿌리기!

if문으로 먼저 저장된 데이터가 없을때 알럿뜨고 return해줬다

if (!localStorage.key(0)) {
    alert("저장된 북마크가 없습니다");
    return;
  }

 

그리고 데이터들을 배열로 만들기위해 Array.from안에 localStorage.key(인덱스)로 모든 로컬 스토리지 key를 불러와서

localStorage.getItem(key)에 넣어준 다음

json형식을 JSON.parse에 넣어줘서 객체로 변환!

export function getBookmark() {
  if (!localStorage.key(0)) {
    alert("저장된 북마크가 없습니다");
    return;
  } else {
    const bookmarkData = Array.from({ length: localStorage.length }, (_, i) => {
      const key = localStorage.key(i);
      return JSON.parse(localStorage.getItem(key));
    });
    ...
  }
}