throttling

 

결제 기능 제작중, 결제 버튼을 연타했을때에

문제는 발생하지 않지만 네트워크 창에서 호출이 여러 번 가는 것이 발견되어 쓰로틀링을 적용해보았다

 

 

결제 버튼에 쓰로틀링 사용 이유

1. 디바운싱은 호출 후 일정 시간이 지나야 실행되므로
   연속 클릭 시 언제 실제로 결제가 처리될 지 예측하기 어려울 수 있다

2. 디바운싱은 연속된 호출 후 한번의 요청만 보내지만
   여러 사용자가 동시에 이런 행동을 할 경우 서버에 부하가 걸릴 가능성
   
3. 쓰로틀링 사용시 "n초 후 다시 시도해주세요" 같은 명확한 피드백 제공 가능

4. 중복 트랜잭션 방지, 예를들어 30초 내에 한번만 결제 가능 과 같은 규칙을 쉽게 적용 가능

5. 특정 초 당 한번 요청을 제한하는 방식이 짧은 시간의 빠른 요청을 방지하는데에 더 효과적일 수 있다

 

결론적으로 결제와 같은 민감한 작업에 쓰로틀링이 더 적합할 수 있다고 판단 
(예측 가능성, 서버 부하 관리, 명확한 사용자 피드백 등의 측면)

 

 

 

코드

  const [lastCallTime, setLastCallTime] = useState(0);
  const DELAY = 3000;

  const throttledPayRequest = useCallback(async () => {
  
      const now = Date.now();
    if (now - lastCallTime >= DELAY) {
      setLastCallTime(now);
  
  //결제 및 이후 처리 로직
  
  
  } else{
     toast({
        description: '결제 창 요청중입니다'
      });
  } ,[변동이 일어날 수 있는 요소들, lastCallTime])
  
  
    return (
    <div>
      <button
        onClick={throttledPayRequest}
      >
        바로 구매하기
      </button>
    </div>
  );

 

lastCallTime을 현재 시간으로 지정 후, 차이가 3000ms 보다 커지기 전에는 재호출시 토스트 띄우기