[React] 자동 저장 구현하기

카테고리 없음

늘이 2024. 11. 13. 13:54

1. 장시간 작업이 없는 경우 자동 저장 하기

장시간 작업이 없는 경우 웹소켓(WebSocket)이나 setInterval 같은 주기적 체크를 통해 사용자의 비활성화 상태를 감지할 수 있습니다. 일정 시간 동안 사용자의 입력이 없을 시 임시 저장을 트리거합니다.

1) 방법

A. 웹소켓(WebSocket)

서버와 지속적으로 연결을 유지하며 사용자의 상태를 감지할 수 있지만, 서버 부담이 될 수 있어 일반적인 비활성 상태 감지에 잘 사용되지 않습니다.

B. setTimeout / setInterval 기반 감지

2) 결론

비활성 상태를 감지하는 데 웹소켓이 꼭 필요하지 않습니다. 웹소켓은 지속적으로 서버와 연결을 유지하므로 서버 리소스가 추가로 소모될 수 있습니다.
웹소켓은 실시간 채팅, 알림, 주식 시세 등 양방향 실시간 데이터 전송이 필요한 경우에 적합합니다. 비활성 상태 감지 용도로는 일반적인 타이머가 간단하고 적합합니다.
setTimeout과 같은 타이머를 활용하면 키보드 입력, 마우스 움직임, 클릭 등의 이벤트로 쉽게 비활성 시간을 리셋할 수 있습니다. 웹소켓은 이 기능을 과도하게 복잡한 방식으로 구현하는 것입니다.
위와 같은 이유로 setTimeout, setInterval로 사용자의 활동을 모니터링하고 일정 시간 이상 입력이 없을 시 비활성 상태를 감지하여 자동 저장을 실행합니다.

2. 브라우저 종료 시점 자동 저장하기

웹브라우저가 닫히는 이벤트 발생 시 저장 처리 방법이 필요합니다.

1) 방법

A. beforeunload 이벤트

브라우저가 닫히거나 페이지가 리로드될 때 실행되는 이벤트입니다.
이 이벤트를 활용하면 사용자가 페이지를 떠나기 전에 저장되지 않은 데이터를 보호할 수 있습니다.
페이지를 떠나기 전 beforeunload 이벤트의 returnValue 속성의 메시지를 설정하면 브라우저는 사용자가 페이지를 떠나기 전에 경고 메시지를 보여줍니다.(브라우저 자체적으로 제공하는 기본 메시지 표시)

간단한 구현과 페이지 이탈 직전에 호출되기 때문에 데이터를 잃는 상황을 방지할 수 있습니다.
이 이벤트 핸들러를 이용해 저장 로직을 호출할 수 있지만 이 이벤트 내에서 비동기 작업은 안정적으로 동작하지 않을 수 있으므로 빠르게 완료되는 동기적 로직만 넣는 것이 좋습니다. 데이터를 빠르게 저장하는 로직을 넣을 수 있지만 실제 저장 로직까지 진행되는지 테스트가 필요합니다.(불안정)

B. 서비스 워커(Service Worker)

브라우저와 백그라운드에서 독립적으로 동작하여 네트워크 요청 캐싱, 푸시 알림 등을 제공하며 브라우저가 닫히거나 네트워크 상태가 변해도 일정 기능을 유지할 수 있습니다.
백그라운드 실행과 비동기 작업이 가능하다는 장점이 있으나, 일반 이벤트와 달리 독립적인 스레드에서 동작하므로 설정과 관리를 위한 복잡한 로직이 필요합니다.
또한 완전한 브라우저 종료 시점에 트리거되는 이벤트는 제공하지 않기 때문에 페이지 이탈 시점의 데이터를 즉각적으로 저장하는 데 한계가 있습니다.

2) 결론

데이터 보호: beforeunload는 사용자가 브라우저를 종료할 때 발생하는 유일한 직접적인 이벤트이므로 즉각적인 자동 저장을 보장할 수 있습니다. 하지만 서비스 워커는 브라우저가 닫힐 때 발생하는 이벤트가 없기 때문에 즉각적인 사용자 데이터 보호에 한계가 있습니다.
사용자 상호작용 저장: beforeunload는 브라우저 창을 닫을 때 메시지를 띄어서 사용자에게 저장을 묻거나 작업상태를 확인할 수 있습니다. 서비스 워커는 직접적인 사용자 인터페이스와의 상호작용을 제공하지 않으며 특정 상황에서 백그라운드에서만 동작하기 때문에 알림 기능이 제한적입니다.
서비스 워커가 복잡도를 증가시키는 경우: 자동 저장이 목표인 경우 서비스 워커를 설정하고 데이터 저장과 동기화 기능을 관리하는 것은 과도할 수 있습니다. 특히, 페이지 종료 직전 저장의 경우 beforeunload가 단순한 대안이 될 수 있습니다.
위와 같은 이유로 브라우저 종료 시 데이터 저장 방법으로는 beforeunload 이벤트를 사용하는 것이 적합합니다.