lodash debounce를 이용한 API 콜 제한하기

어떻게 보면 우리 회사는 UI개발이(혹은 내가) 더 경직된 개발 문화를 갖고 있는지도 모르겠다. 웬만큼 유명한 플러그인이어도 어느정도 적당선에서 구현이 가능하다면 플러그인을 쓰지 않는데 프론트개발에 와보니 매우 자유롭다. (물론 그만큼 책임이 따르겠지만..)
자동완성 API를 계속 찌를 일이 있었는데 lodash 플러그인의 debounce를 활용하는게 좋겠다고 가이드를 받았다.

예를 들면 이런식,

const delayHandler = useRef(
  _.debounce((searchKeyword: string) => {
    if (searchKeyword.length) {
      dispatch(
        actions.getDataName.request({
          keyword: searchKeyword.replace(/\s/g, ''),
          pageSize: 50,
        }),
      );
    }
  }, 300),
).current;

코드 찾아보니 lodash 뿐만 아니라 moment도 사용중이고… UI개발때는 실제 적용이 어떻게 될지 몰라 최대한 바닐라로 플러그인 없이 작업할 수 있도록 해주었는데 오히려 프론트로 와서 바퀴를 발명하지 않아도 되서 좋은 것 같다.

https://hyunseob.github.io/2016/04/24/throttle-and-debounce/
https://lodash.com/docs/4.17.15#debounce