오디약(실전프로젝트) 트러블슈팅 - 북마크 연속클릭시 500에러

오류 내역

---

오류가 발생한 경로

북마크를 연타했을때 간혈적으로 500에러가 남 원인 : API요청에 의해 로직을 처리하는 도중에 새로운 요청이 들어와서 500에러가 남,

추측 : 데이터베이스 lock에 의해 북마크 추가 및 삭제가 불가능 했을것으로 추측이됨

---

오류 해결 방법

const onClickBookMarkHandler = async e => {
    if (timerId) {
      clearTimeout(timerId); // 이전 타이머 취소
    }

    const newTimerId = setTimeout(() => {
      if (loginUser) {
        bookmarkMutation.mutate();
      } else {
        setIsLogin(!isLogin);
      }
    }, 300);

    setTimerId(newTimerId); // 새로운 타이머 ID 설정
    e.stopPropagation();
  };

북마크 버튼을 클릭하면 디바운싱 기능이 작동하여, 버튼이 클릭된 후 300밀리초 동안 다시 클릭되지 않으면 API 요청이 실행된다. 이를 통해 마지막으로 버튼이 클릭된 후 300밀리초 동안 버튼이 눌리지 않아야만 API 요청이 처리되게 했다.

북마크 버튼을 클릭하면 디바운싱 기능이 작동하여, 버튼이 클릭된 후 300밀리초 동안 다시 클릭되지 않으면 API 요청이 실행된다. 이를 통해 마지막으로 버튼이 클릭된 후 300밀리초 동안 버튼이 눌리지 않아야만 API 요청이 처리된다.