[javascript] Toggle side navigation

😆 javascript를 사용하여 해당 버튼을 누르면 side navigation이 화면에 open <-> close 되도록 구현하였다.
정말 간단한 기능이지만, 처음에는 애를 먹었다 😂
버튼을 누르면 side navigation이 나타나도록 구현하는 기능뿐 아니라, 또 다른 조건도 만족해야 했기 때문이다.

 

✨ 결과물

👉🏻 왼쪽 위에 있는 버튼을 선택하면 side navigation이 화면에 나타났다가 사라지도록 구현한 것을 볼 수 있다. 

여기까지는 쉽게 구현할 수 있었지만, 아래 조건에서부터 슬슬 막히기 시작했다;

 

 

---

📌  새로고침 또는 페이지 이동, 브라우저 재시작 등의 행위를 한 후에도 해당 side navigation을 open 해 놓은 상태로 유지할 수 있도록 코드 구현

전역이라는 단어를 강의를 들으면서 정말 많이 들었는데, 막상 조건에서 들으니 어? 어.. 엥?? 이 되어 버렸다.

강의 들으며 실습할 때는 손가락이 잘만 움직이더니, 왜 혼자 하려니 손가락이 움직이지 않는지.. 

 

✅  나는 side navigation의 상태를 유지시키기 위해 localStorage 임시공간을 사용하였다. 

 

💡 localStorage란?

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있다.
저장한 데이터는 브라우저 세션 간에 공유되며, localStorage의 데이터는 만료되지 않는다. 

localStorage는 학습할 때 임시공간으로 쓰거나 또는 test용으로 데이터를 확인할 때 간단하게 쓰이는 공간이라고 한다.

localStorage를 사용하는 방법은 아래와 같다. (생각보다 간단하다.)

 

👉🏻 localStorage 항목 추가

localStorage.setItem('키 이름', '값');

 

👉🏻 localStorage 항목 불러오기

const 변수명 = localStorage.getItem('키 이름');

 

 

---

✅ localStorage를 통해 side navigation 상태(open <-> close)를 전역에서 사용하며, 이전의 상태 유지하기

 

✨ 결과물

👉🏻 처음 동영상과 비교하여 확인

✅ 왼쪽 상단 버튼을 누를 때, 애플리케이션 > 로컬스토리지에 해당 키와 값이 들어가도록 구현하였다.
--> 키 : status, 값 : open or close 

✅ 새로고침 또는 브라우저 이동 후 재실행 등의 행위를 한 후에도 side navigation이 open 되어 있는 상태로 유지되는 이유는?
--> 버튼을 눌렀을 때, localStorage에 status를 open으로 기록되도록 코드를 구현하고, 이를 가져와 화면이 로드될 때 조건을 주었기 때문이다.

 

 

💚 코드 구현

// 로컬스토리지에 항목 추가
localStorage.setItem('status', 'open');

// 로컬스토리지 항목 불러오기
const statusOpenClose = localStorage.getItem('status');

// 화면 로드시, 조건주기
const status = () => {
  if (statusOpenClose === 'open') {
    sideNav.classList.add('active');
  }
};

✅ status()를 init() 함수에 넣어 로드될 때, 작동하도록 구현하였다.
이때, 만약 localStorage의 status가 open이면 side navigation이 열려있는 상태로 로드되도록 하였다. 
✅ mdn을 통해 확인한 코드로 localStorage 공간을 사용하였다.

 

<출처 : mdn web docs> https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage