트러블 슈팅: API 중복 호출 방지🌟

1.  문제 발생❓

에그팝, 에그클럽, 에그데이 생성 버튼을 여러번 누르면 생성된 상세페이지로 가기전에 여러개의 모임생성 완료 알랏창이 뜨면서 모임이 여러개 생기는 문제점이 있었습니다( 모임 생성 버튼 연속 클릭 시 중복 API 호출 발생 ). 

 

모임 여러개 생기는 오류 영상

 

 

 

 

 

 

2.  원인 추론 🔎

• API 호출 제한 로직의 부재
• 버튼 클릭 이벤트에 쓰로틀링(Throttling) 미적용

 

 

 

 

 

3.  해결 과정 📋

1. useTrottle 커스텀 훅 구현

 

 

2. 모임 생성 API 호출 간격 300ms, 모임생성 다음단계 버튼은 20초으로 useTrottle 커스텀 훅 적용

 

Q. 모임생성과 모임생성 다음 버튼 시간을 다르게 준 이유는?

• 데이터베이스 작업(모임 생성): 20초 쓰로틀링 - Supabase insert 연산의 안정적 처리를 위한 충분한 시간 확보 - 중복 데이터 생성 방지
• UI 전환(다음 단계 이동): 300ms 쓰로틀링 - 가벼운 상태 변경에 대한 즉각적인 사용자 피드백 - 일반적인 더블클릭 간격(200-300ms)을 고려한 최적 딜레이 설정

 

 

 

 

 

4.  결과 ❤‍🔥

• 모임 생성 버튼 연속 클릭 시 일정 시간동안 한번의 요청만 처리함
• API 중복 호출 방지 및 안정적인 모임 생성 프로세스 구현
• 서버 리소스 효율화 달성