DOM - ContentLoaded, beforeunload 이벤트

DOM ContentLoaded

: 모든 HTML 요소가 로드되고 준비가 완료되었을 때, 이벤트 핸들러 함수 내의 코드가 실행된다.

웹페이지가 로딩(DOMContentLoaded 이벤트는 DOM이 완성된 직후 발생한다.)되면 로컬 스토리지에 저장되어 있는 상태를 로드한다. 

 

사이드 네비게이션의 상태 :
페이지 이동, 리로드(새로고침) 시에도 이전에 적용된 사이드 내비게이션 상태가 모든 웹 페이지에 동일하게 적용되어야한다.
따라서 사이드 네비게이션의 상태는 전역 상태로 관리하고 localStorage 나 DataBase 등을 사용해 영속적으로 관리할 필요가 있다.

 

const $nav = document.querySelector('nav');
let isSideNavigationOpen = false;

window.addEventListener('DOMContentLoaded', () => {
const state = loadState();
isSideNavigationOpen = state === null ? false : state.isSideNavigationOpen;

$nav.classList.toggle('active', isSideNavigationOpen);

document.body.style.visibility = 'visible';
});


< state.js > 
export const loadState = () => {
  // 로컬 스토리지에서 STORAGE_KEY로 저장된 데이터를 가져와 serializedState에 저장
  const serializedState = localStorage.getItem(STORAGE_KEY);
  // serializedState를 JSON 파싱하여 원래의 JavaScript 객체로 변환
  return JSON.parse(serializedState);
};

 

https://developer.mozilla.org/ko/docs/Web/API/Document/DOMContentLoaded_event

Window: DOMContentLoaded 이벤트 - Web API | MDN

 

 

DOM  beforeunload

: 사용자가 현재 페이지를 떠나기 전에 페이지를 떠날 것인지 확인하기 위해 사용된다.

toggle 버튼이 클릭되어 사이드 네비게이션의 상태가 업데이트될 때마다 로컬 스토리지에 상태를 저장하는 것 보다 beforeunload 이벤트가 발생하면 로컬 스토리지에 상태를 저장히는 편이 효율적이다.

beforeunload 이벤트는 사용자가 웹페이지를 떠나기(새로고침, 앞으로/뒤로 가기, 브라우저 닫기, form submit 등) 직전에 발생한다.

window.addEventListener('beforeunload', () => {
saveState({ isSideNavigationOpen });
});

document.querySelector('.toggle').addEventListener('click', () => {
isSideNavigationOpen = !isSideNavigationOpen;

// 초기 렌더링 시에 발생하는 불필요한 트랜지션을 방지하기 위해 body 요소에 추가되어 있는 preload 클래스를 제거해 트랜지션을 활성화시킨다.
document.body.classList.remove('preload');
$nav.classList.toggle('active', isSideNavigationOpen);
});

< state.js > 
export const saveState = stateData => {
  if (typeof stateData !== 'object') throw new TypeError('매개변수 stateData에는 객체가 전달되어야 합니다.');

  // 객체를 JSON 형식의 문자열로 직렬화
  const serializedState = JSON.stringify(stateData);
  // 직렬화된 stateData를 로컬 스토리지에 STORAGE_KEY로 저장
  localStorage.setItem(STORAGE_KEY, serializedState);
};

 

 

https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event

Window: beforeunload 이벤트 - Web API | MDN