2025-06-15T03:01:42.918Z

0

메일 보내드렸습니다!

0

안녕하세요 은비님! 보내주신 코드를 확인해보았는데요,
해당 오류는 bookmark-toggle.js 에 해당 코드가 없어서 발생하는 오류입니다.

// <--북마크 바-->
const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
if (isBookMarkBarOpen === "close") {
    //localstorage에 isBookMarkBarOpen이 close라면
    bookmarkBar.style.display = "none";
    bookMarkOpen.style.display = "none";
    bookMarkClose.style.display = "flex";
} else {
    //localstorage에 isBookMarkBarOpen이 open이라면
    bookmarkBar.style.display = "block";
    bookMarkOpen.style.display = "flex";
    bookMarkClose.style.display = "none";
}

페이지 처음 접속 시, 로컬 스토리지에 저장된 isBookMarkOpen 값을 읽어 어떤 상태인지를 확인하고 요소를 숨겨야하는데 해당 코드가 없어서 값을 읽어오지 못하는 것 같습니다!

실전 프로젝트 개발 - 북마크 바 만들기 강의를 다시 한 번 수강해보시거나, https://one-step-js.hyobb.com/47e8db22-f3ed-4051-a2f6-87e8634b5572 핸드북에 있는 코드를 다시 한 번 살펴보시면 좋을 것 같습니다 🙂 감사합니다!

0

(function () {
  const bookMarkBar = document.getElementById("bookmark-bar");
  const Open = document.getElementById("bookmark-open");
  const Close = document.getElementById("bookmark-close");

  // 북마크 바 열기 및 닫기
  const bookmarkBarToggle = () => {
    const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
    if (isBookMarkBarOpen) {
      if (isBookMarkBarOpen === "open") {
        localStorage.setItem("isBookMarkBarOpen", "close");
        bookMarkBar.style.display = "none";
        Open.style.display = "none";
        Close.style.display = "flex";
      } else {
        localStorage.setItem("isBookMarkBarOpen", "open");
        bookMarkBar.style.display = "block";
        Open.style.display = "flex";
        Close.style.display = "none";
      }
    } else {
      localStorage.setItem("isBookMarkBarOpen", "close");
      bookMarkBar.style.display = "none";
      Open.style.display = "none";
      Close.style.display = "flex";
    }
  };

  document
    .getElementById("bookmark-open-btn")
    .addEventListener("click", bookmarkBarToggle);
  document
    .getElementById("bookmark-close-btn")
    .addEventListener("click", bookmarkBarToggle);
})()

저 부분 있는거 아닌가요?

변수명을 효빈 강사님이랑 동일하게 하지 않았습니다!

아니면 아예 완전 똑같이 한 다음에 다시 봐야할지,,,,

일단 시도는 해보겠습니다!

+그리고 마지막 챕터 강의에서 크롬 엑스텐션 추가하는게 안되네요ㅠ

구글 > 'chrome://extensions/' 검색 > '압축해제된 확장 프로그램 로드' 클릭 > 전체 확장 프로그램 항목에 들어가있는거 확인

까지 했는데 크롬에서 새탭 들어가도 기존에 있는 테마랑 동일하게 나와서요ㅠㅠ

0

표시해주신 부분은, bookmarkBarToggle 함수 내부에 있는 코드로, 해당 함수가 호출 될 때에만 실행이 되는 코드입니다 🙂

제가 말씀드린 부분은, 맨 처음 웹페이지에 접속했을 때 로컬 스토리지에 있는 값을 읽어오지 못하는 오류이기 때문에, 함수의 바깥에 제가 올려드린 코드를 작성해보시면 될 것 같습니다!!

코드를 다시 한 번 확인해주세요 :)

구글 > 'chrome://extensions/' 검색 > '압축해제된 확장 프로그램 로드' 클릭 > 전체 확장 프로그램 항목에 들어가있는거 확인까지 하셨다면, 새로운 크롬탭을 열 때 다음과 같은 alert가 나옵니다. 이 때 유지 버튼을 눌러보시면 알맞게 작동할겁니다!!

마찬가지로, 강의에 있는 mainfest.json 코드 및 파일 위치를 다시 한 번 확인해보시고 말씀해주세요! 감사합니다 😀

1

bookmarkBarToggle 관련 오류는 해결했습니다.

강의 다시 처음부터 들으면서 작성해봤더니 되네요ㅠㅠ

+

어제 저 alert창도 유지로 했는데도 안바뀝니다...ㅠ

애초에 저 alert창도 바로 안뜨고 확장프로그램 화면에서 어찌저찌(?) 하니까 뜨더라구요..ㅠ 방금도 제 파일 삭제 후 다시 로드했더니 역시나 저 alert창이 안뜨네요..

단순 제 PC 크롬 시스템 문제인걸까요..?

1

바쁘신 와중에도 답글 계속 달아주시고 ㅠㅠ 감사합니다 ㅠㅠㅠ

Adblock 이라는 광고 차단 프로그램이 막고 있는건지 해서 이것도 삭제해봤는데

역시나 새 탭 들어가도 얼럿창이 안뜨네요..ㅎㅎ;;

일단 이 문제는 계속 저도 봐보겠습니다... ㅠ

0

앗 그러시군요...ㅠㅜ 혹시 지금은 해결 되셨을까요??
저도 찾아보고 최대한 빠르게 해결법을 알려드리겠습니다 🥲🥲