마지막 방문 동네 저장

[youzysu]

고민

어디서 유저 마지막 동네 요청을 하지..?

• 최상단에서 beforeunload 이벤트 핸들러로 등록해두려고 했는데, 값을 읽을 때 전체 렌더링 되면서 안된다......!?
• 브라우저 종료가 된 후에 에러 핸들링을 어떻게 하지?

선택한 방법

• 마지막 방문 동네 ID는 프론트에서만 관리

[youzysu]

(문제) 마지막 방문 동네 설정 요청 비동기 요청은 브라우저가 종료되기 전에 완료되지 못할 수 있습니다. 종료되는 브라우저 창에서 요청 결과를 확인할 수 없습니다. 서버로 요청이 전달되지 않을 수 있습니다. [접근 방법] 비동기 작업을 먼저 처리하기: unload 이벤트 핸들러 내에서 서버로의 요청을 보내기 전에, 다른 비동기 작업을 처리합니다. 이렇게 하면 요청이 완료될 시간이 더 주어질 수 있습니다. 서버 측에서 타임아웃 설정: 서버에서 요청을 처리하다가 브라우저와의 연결이 끊기면 요청을 처리하는 데 시간 제한을 둘 수 있습니다. 이를 통해 종료된 브라우저로부터의 요청을 적절히 처리할 수 있습니다. 실패한 요청을 서버에서 기록: 서버에서 클라이언트로부터 오는 요청을 로그로 남기고, 나중에 이러한 로그를 확인하여 실패한 요청에 대한 조치를 취할 수 있습니다. 오프라인 작업 큐 사용: 브라우저에서 오프라인 작업 큐를 사용하여 요청을 보내면, 브라우저가 오프라인 상태에서 요청을 큐에 저장하고 온라인으로 전환되면 요청을 보내도록 할 수 있습니다. 이 방법은 브라우저가 다시 온라인 상태로 전환될 때 요청을 재시도하는 데 유용합니다. 실패한 요청을 사용자에게 알림: 종료되는 브라우저에서 요청이 실패했을 때 사용자에게 알림을 표시하여 사용자가 필요한 조치를 취할 수 있도록 도움을 줄 수 있습니다. 더 안정적인 방법을 고려: 브라우저 종료 시 요청이 안전하게 처리되어야 하는 경우, 브라우저 종료와 관계없이 요청을 처리할 수 있는 다른 방법을 고려해야 할 수 있습니다. 예를 들어, 웹 소켓을 사용하여 실시간 통신을 처리하거나, 서버 사이드에서 데이터를 저장 및 처리하는 방법을 고려할 수 있습니다.

[youzysu]

고민한 방법

1. beforeunload 시에 로컬스토리지 저장

• (추측) currentAddressId 변경될 때마다 useEffect 실행하면서 App이 재렌더링되는데 실행 완료 순서로 이전값이 렌더링됨

  const currentAddressId = useCurrentAddressIdValue();

  useEffect(() => {
    const saveCurrentAddressId = (e: BeforeUnloadEvent) => {
      e.preventDefault();
      localStorage.setItem("currentAddressId", currentAddressId + "");
    };

    window.addEventListener("beforeunload", saveCurrentAddressId);

    return () => {
      window.removeEventListener("beforeunload", saveCurrentAddressId);
    };
  }, [currentAddressId]);

✔️ 2. 로컬스토리지 동기화

• Atom set 함수에서 localStorage도 동기화