Lodash의 Deboucing 활용 - 버튼 중복 클릭 방지

유저 피드백 : 2023.9.8(금) ~ 2023.9.12(수) (총 5일)

 

🔎 발생된 문제 :

1. 유저 A -> 예약 기능 설정 및 저장 시 같은 기능이 중복으로 등록되었어요.
2. 유저 B -> 중복으로 등록된 예약 서비스가 수정만 가능하며 삭제가 되지 않아요.
3. 유저 C -> 예약서비스 추가 시 너무느려서 한번더클릭하니까 여러개 생성되었어요.
4. 유저 D -> 배너이미지 여러번 클릭시 여러개 생성되었어요.

 

⚒️ 문제 해결 과정 : 

제가 맡은 멀티 링크 폼 추가(저장) 시 버튼이 중복으로 생성되는 버그를 확인했습니다. 이를 해결하기 위해 Lodash의 디바운싱을 활용하여 여러 번 클릭 시 1회만 실행되도록 구현하여 사용자 버튼 입력에 따른 서버 부하를 최소화하려고 노력했습니다.

import _ from 'lodash';

  // 디바운싱된 함수 생성
  const debouncedSubmit = _.debounce(
    blockId ? handleEditButtonClick : handleAddButtonClick,
    300,
  );
  
  // Form 태그 내 Submit 이벤트
  onSubmit={(e) => {
          e.preventDefault();
          debouncedSubmit();
        }}

그러나 이미지 업로드 기능이 추가된 폼에서는 저장 버튼 클릭 후 로딩이 오래 걸리는 경우 여전히 폼이 중복 저장되는 버그가 발생했습니다.

 

이 문제는 사용자가 저장 버튼 클릭 후 오래 걸리는 경우 한 번 더 클릭하기 쉽고, 디바운싱은 마지막 호출 후 일정 시간(0.3초)이 경과한 후에만 함수를 실행하기 때문에 0.3초가 지난 후 한 번 더 클릭하여 중복 저장 버그가 발생한 것이었습니다.

 

💡 해결 방안 : 

문제를 해결하기 위해 여러 가지 시도를 해보았습니다. 처음에는 디바운싱 시간 간격을 늘리거나 쓰로틀링을 사용하는 방법을 고려했으나, 이러한 시도들은 모두 원하는 결과를 얻지 못했습니다. 그러나 결국, 오랜 고민 끝에 디바운싱 기간 동안 "저장 중"으로 표시하여 사용자 경험을 개선하는 방법으로 문제를 해결하였습니다. 이로써, 이미지 용량이 큰 데이터를 저장할 때 발생하는 중복 저장 문제도 완벽하게 해결할 수 있었으며, 사용자가 버튼을 다시 클릭해도 중복 저장을 방지할 수 있게 되었습니다.

// 데이터 저장 작업 중인지 여부를 나타내는 상태 변수
const [isSaving, setIsSaving] = useState(false);
    
// "저장하기" 버튼 클릭 시 실행되는 함수
const handleAddButtonClick = useCallback(async () => {
  ...
  setIsSaving(true);
  ...
}, [])
  
// 저장 & 수정 실행 버튼
  <O.SubmitButton
      type="submit"
      disabled={!title || !description || !startDate || !endDate}
  >
      {isSaving ? '저장 중...' : blockId ? '수정하기' : '저장하기'}
  </O.SubmitButton>

 

📈 성과 및 서버 부하 최적화 : 

중복 클릭으로 인한 네트워크 요청 수가 389건에서 49건으로 감소하여 서버 부하를 최소화하였습니다.