React 저장 폼의 중복 요청을 멱등 키로 막은 짧은 튜토리얼

버튼이 잠겼는데도 주문이 두 개였다

느린 모바일에서 클릭 직후 탭이 백그라운드로 갔다. 화면의 disabled는 연속 클릭은 줄였지만 HTTP 재시도까지 막지는 못했다. UI 보호와 서버 보호를 다른 문제로 분리했다.

요청마다 같은 작업의 키를 보냈다

const key = crypto.randomUUID()
await fetch('/api/orders', {
  method: 'POST',
  headers: {'Content-Type':'application/json', 'Idempotency-Key':key},
  body: JSON.stringify(form)
})

서버는 사용자와 키를 묶어 이미 처리한 결과를 반환하고, 키 저장과 주문 생성을 한 트랜잭션에서 수행했다. 메모리 Map만 쓰면 재시작이나 다중 인스턴스에서 다시 중복되므로 사용하지 않았다.

시험한 경우

• 연속 클릭
• 응답 직전 네트워크 재시도
• 타임아웃 후 같은 키 재전송
• 다른 사용자가 같은 키를 보내는 경우

버튼 잠금은 진행 중이라는 UX로 남겼고, “한 번만 반영”은 서버의 책임으로 옮겼다.