Inflearn Community Q&A

gjwjsgksskf9539

asked

First Steps in JavaScript for Web Frontend

Creating a Bookmark Bar

북마크바 디폴트가 "북마크 열기"로 뜹니다.

Resolved

Written on

120

Edited

강의 : 5. 북마크바 만들기

북마크바 디폴트 화면이 '북마크 열기'(bookmark-close)로 뜨면서 북마크가 열려있는 상태(?)로 나옵니다.

그리고 북마크 열기를 클릭하면, 의도한 바처럼 '북마크 열기'(bookmark-close)가 뜨면서 북마크가 닫힌 상태로 바뀌고, 다시 클릭 시 '북마크 닫기'(bookmark-open)가 뜨고 북마크가 열린 상태로 나옵니다.

즉, 두번째 액션부터 정상적으로 작동이 되는데요 ㅠㅠ

[디폴트 화면]

효빈 강사님께서 작성한 예시 그대로 작업했는데 뭐가 문제인걸까요??

<!-- 북마크 열린 상태 -->
<div class="bookmark-open" id="bookmark-open">
  <div id="bookmark-open-btn">북마크 닫기</div>
</div>
<!-- 북마크 닫힌 상태 -->
<div class="bookmark-close" id="bookmark-close">
  <div id="bookmark-close-btn">북마크 열기</div>
</div>
<div class="bookmark-bar" id="bookmark-bar">
  <!-- 북마크 바 -->
</div>

.bookmark-open {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 20px;
  padding: 15px 30px;
  font-size: var(--xsmall);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.bookmark-close {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 20px;
  padding: 15px 30px;
  font-size: var(--xsmall);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.bookmark-open div {
  cursor: pointer;
}
.bookmark-close div {
  cursor: pointer;
}
.bookmark-bar {
  position: absolute;
  top: 50px;
  right: 0;
  min-height: calc(100vh - 70px);
  width: 240px;
  padding: 10px 30px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

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);

javascriptdom

Answer 1

hyobin

Instructor

안녕하세요 은비님 🙂 질문 감사합니다.

'북마크' 관련 div 요소들을 main-container의 바깥에 작성해주셨는지 한 번 확인해보시고,
제가 제공해드린 핸드북과도 코드를 비교해봤을 때 코드 상의 문제가 없으시다면,

지금까지 작성하신 코드를 압축해서 hbin12212@gmail.com 으로 전달 부탁드립니다!
코드를 보내주시면 확인해드리겠습니다!!

휴가로 인해 답변이 늦어진 점 죄송합니다. 감사합니다.

gjwjsgksskf9539

Questioner

메일 보내드렸습니다!

hyobin

Instructor

안녕하세요 은비님! 보내주신 코드를 확인해보았는데요,
해당 오류는 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 핸드북에 있는 코드를 다시 한 번 살펴보시면 좋을 것 같습니다 🙂 감사합니다!

gjwjsgksskf9539

Questioner

(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/' 검색 > '압축해제된 확장 프로그램 로드' 클릭 > 전체 확장 프로그램 항목에 들어가있는거 확인

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

hyobin

Instructor

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

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

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

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

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