본문으로 바로가기

Backend & Distributed Systems

새로고침에 복구되는 클라이언트 타이머

브라우저 새로고침 뒤에도 실행 시간을 복구하고 하나의 요청 ID를 유지해 중복 완료 기록을 막는 타이머 설계입니다.

작성 약 1분 읽기
#backend#react#local-storage#resilience

타이머는 단순한 화면 상태가 아니라 사용자의 실행 의도다. 페이지를 새로고침했다고 경과 시간이 초기화되거나 완료 기록이 두 번 생겨서는 안 된다.

남은 초를 매초 쓰면 불필요한 저장이 늘고 백그라운드 탭 정지 때 오차가 생긴다. 클라이언트는 시작 시각, 전체 시간, 학습 단위, 요청 ID를 저장한다. 복구할 때 현재 시각과 차이로 남은 시간을 계산한다.

json
{"requestId":"session-generated-on-start","unit":"study-unit","startedAt":"2026-09-13T10:00:00.000Z","durationSeconds":1800}

응답을 잃고 다시 로드해도 같은 ID로 완료를 전송해야 서버가 중복을 알아본다. 성공 응답을 받은 뒤에만 로컬 상태를 지운다. 저장 형식은 읽기 전에 검증하고 잘못된 JSON, 음수 시간, 사라진 단위는 안전하게 폐기한다.

브라우저 검증은 시작, 새로고침, 표시 복구, 완료를 확인했다. API 테스트는 동일 재시도와 의미 충돌을 다뤘다. 기기 간 이어하기를 추가하려면 인증된 서버 lease와 동시 타이머 정책이 필요하다.

관련 글