[FE] FIX: debounce 적용해 코인 내역 페이지 필터 변경시 불필요한 api 요청 보내지 않게 수정

jnkeniaem commented 3 months ago

해당 사항 (중복 선택)

코인 내역 불러오기 전체 → page 2 까지 불러오고 필터 변경 시 적립 page 2 요청 후 적립 page 0 요청 (API 요청 두번) 하는 이슈

debouncing 적용해 불필요한 api 요청 안하게 수정

기존

setTimeout(() => {
      getCoinLog(toggleType);
    }, 333);

대체 debounce("coinLog", getCoinLog, 100);

➕ 코인 내역 페이지 뿐만 아니라 setTimeout을 사용하는데 광클로 예상치 못한 타이머 동작이 발생할 수 있는 공유사물함 코드 복사, 클럽 멤버리스트와 아이템 사용 내역 불러오기에서도 debouncing 적용

jnkeniaem commented 2 months ago

안그래도 무한 스크롤 구현해보고 싶어서 debounce, throttle에 대해 찾아봤던 기억이 있는데, 요친구들을 활용하면 api 요청도 조절할 수 있었군요!

그렇습니당

setTimeout -> 단순히 일정 시간이 지나면 실행 debounce -> 여러 연속된 이벤트가 발생할때 마지막 이벤트가 끝난 후 일정 시간이 지나면 실행

맞습니다! setTimeout에 첨언을 하자면, 타이머에 설정한 delay 시간은 시간 만료시 즉시 실행되는것이 보장이 안돼있어서, delay+a 시간 후 실행됩니다~ 즉 최소 delay 이후 콜백함수가 실행됩니다

jnkeniaem commented 2 months ago

이번 리뷰를 통해 스크롤 구현 시 필요한 throttling, debouncing 개념에 대해 알고 넘어갈 수 있었습니다~! 감사합니다!

보통 무한 스크롤엔 throttling, 검색 자동완성엔 debouncing을 적용시키는것으로 알고있습니다. 둘 다 구현할때 필수로 적용해야되는 건 아닌데 UX가 좋아지고 성능 향상 등의 장점이 있기에 적용하는게 좋다고 생각함니다