네트워크 지연 환경에서 즉각적인 사용자 경험을 제공하면서 데이터 무결성을 보장하는 가이드입니다.

Overview

이 가이드는 두 가지 문제를 해결합니다:

Prerequisites

• Flutter 3.0+
• Dart 2.17+
• 서버 API: 포인트 조회/적립 엔드포인트

Part 1: Optimistic UI

서버 응답을 기다리지 않고 UI를 먼저 업데이트하여 즉각적인 피드백을 제공합니다.

Architecture

[User Tap] → [UI 즉시 업데이트] → [버퍼 누적] → [디바운스 후 서버 전송] → [응답 확정]

Step 1: 상태 변수 정의

class PointState {
  int serverPoint = 0;           // 서버 확인된 포인트
  int accumulatedTapCount = 0;   // 미전송 탭 수
  int inFlightPending = 0;       // 전송 중인 수
  bool isPointsSyncing = false;  // 동기화 진행 여부
}

Step 2: 낙관적 포인트 계산

int get optimisticPending =>
    accumulatedTapCount + (isPointsSyncing ? inFlightPending : 0);

int get displayWalletPoints => serverPoint + optimisticPending;

💡 Note: displayWalletPoints를 UI에 바인딩하면 탭 즉시 숫자가 증가합니다.

Step 3: 탭 핸들러 구현

void onTap() {
  setState(() {
    _accumulatedTapCount++;
  });

  _debounceTimer?.cancel();
  _debounceTimer = Timer(const Duration(milliseconds: 1500), () {
    _syncToServer();
  });
}