beforeunload 이벤트를 활용한 상태 저장

beforeunload 이벤트를 활용한 상태 저장

1. beforeunload 이벤트란?

• beforeunload는 사용자가 페이지를 떠나거나 새로고침하려고 할 때 발생하는 브라우저 이벤트.
• 이 이벤트를 활용하면 페이지를 벗어나는 시점에 특정 작업(예: 상태 저장)을 수행할 수 있음.
• 주로 다음과 같은 경우에 사용됨:
  • 세션 상태 저장
  • 사용자 데이터를 서버에 전송
  • 사용자에게 경고 메시지 표시 (예: "페이지를 떠나시겠습니까?")

2. 현재 코드에서의 활용

현재 코드에서는 beforeunload 이벤트를 통해 사이드 내비게이션의 활성화 상태를 저장하고 있습니다. 이 과정은 다음과 같은 흐름으로 이루어짐:

(1) 상태 확인

• nav 요소의 .active 클래스가 존재하는지 확인하여 사이드 내비게이션이 열려 있는지 여부를 판단함

(2) 로컬 스토리지에 상태 저장

• localStorage.setItem("navActive", isCurrentlyActive)를 사용하여 사이드 내비게이션의 상태를 저장함.
• 키(navActive)와 값(true 또는 false)을 통해 상태를 기록함.

(3) beforeunload 이벤트 등록

• window.addEventListener("beforeunload", ...)를 통해 페이지가 떠나는 시점에 위의 상태 확인 및 저장 작업을 실행함.

3. 코드 흐름 설명

window.addEventListener("beforeunload", () => {
  const isCurrentlyActive = nav.classList.contains("active");
  localStorage.setItem("navActive", isCurrentlyActive);
});

코드 실행 흐름:

1. 사용자가 페이지를 떠나거나 새로고침하려고 할 때 beforeunload 이벤트가 발생함.
2. 현재 내비게이션의 활성화 상태(nav.classList.contains("active"))를 확인.
3. 로컬 스토리지에 해당 상태(true 또는 false)를 저장함.

4. beforeunload와 unmount의 차이점

피드백에서 언급된 "상태 저장은 unmount 시점에서 한 번만 하면 될 것 같다"는 내용은 다음과 같은 차이를 고려해야 함:

beforeunload:

• 브라우저 이벤트로, 페이지가 떠나는 시점에 실행됨.
• 클라이언트 측에서만 동작하며, 서버와 연동되지 않음.

Unmount:

• React와 같은 프레임워크에서 컴포넌트가 DOM에서 제거될 때 발생하는 라이프사이클 메서드입니다 (componentWillUnmount()).
• 특정 컴포넌트 단위로 실행되며, 더 세부적인 제어가 가능.

5. beforeunload 사용 시 고려사항

1. 다른 도메인 간 데이터 공유:

   • localStorage는 동일한 도메인에서만 접근 가능하므로 다른 도메인에서는 사용할 수 없음.
   • 크로스 도메인 데이터 공유가 필요하다면 쿠키 또는 서버 측 API와 연동해야함.

2. 보안 문제:

   • 민감한 데이터를 저장할 경우 XSS 공격에 취약할 수 있음.
   • 민감한 정보는 반드시 서버 측에서 관리.

3. 사용 사례 적합성:

   • 현재 요구사항에서는 간단히 사이드 내비게이션 상태만 저장하므로 localStorage와 beforeunload 조합이 적합함.

6. 결론

현재 구현된 코드에서 beforeunload는 사용자가 페이지를 떠날 때 사이드 내비게이션의 활성화 상태를 로컬 스토리지에 저장하는 데 적합합니다. 다만, 다른 도메인 간 데이터 공유가 필요하거나 보안이 중요한 경우에는 쿠키 또는 서버 측 API를 사용하는 것이 더 적합할 수 있음