debouncing throttling오늘 공부한 내용 🌧️
고양이 사진첩과 고양이 검색기를 구현하는 강의를 수강했다.
관련해서 Jest와 cashe 등의 내용이 잠깐 소개되었고 디바운싱과 쓰로틀링을 중점으로 다뤘다.
리마인드된 내용 🔨
디바운싱
일정 간격 내의 연속된 호출들을 하나로 그룹짓는 기술을 말한다.
전기 회로에서 스위치 작동 시에 전기 신호가 흔들리는 현상을 제거하는 걸 뜻하는 단어라고 한다.
왜 안 떠올랐지?
이 때 디바운스된 결과의 타이밍은 꼭 그룹의 마지막이여야 되는 건 아니고 구현에 따라 달라질 수 있다. 보통 라이브러리에선 immediate, leading 같은 옵션을 주어 조절한다.
쓰로틀링
디바운싱과 비슷하지만 그룹 지을 수 있는 최대 간격이 존재한다. 때문에 연속된 호출을 일정한 간격의 호출로 정리할 수 있다.
Lodash에서도 디바운싱에 maxWait 옵션을 주어 쓰로틀링을 구현했다.
둘이 구현법이 다르다고 생각하고 있었는데 실제론 거의 같다고 볼 수 있었다.
삼천포 ⚓
requestAnimationFrame
현재 디스플레이의 주사율에 맞게 스타일 변경 함수를 처리할 수 있도록 만들어진 API이다.
주사율에 맞는 간격마다 함수를 호출하도록 한다는 점에서 쓰로틀링과 비슷하다. 그러나 Macrotask queue에 들어가는setTimeout기반인 쓰로틀링과 달리 우선순위가 높은 animation frames 큐에 들어가므로 실행 간격의 신뢰성이 더 높다.
이를 쓰로틀링 대신 사용해버릴 수도 있지만 기본적으로 프레임에 맞는 애니메이션 처리를 위해 만들어진 API이기 때문에 주의할 점이 존재한다.
- 라이브러리의 .debounce, .throttle이 내부에서 시작 및 종료 로직을 처리하는 것과 달리 직접 시작 및 종료 로직을 관리해야 한다.
- 브라우저에서만 동작하므로 node.js 환경에서 쓰지 못한다.
- 브라우저 탭이 비활성 상태인 경우 작동하지 않도록 최적화 되어있다.
- 실행 간격을 직접 조절하지 못한다.
되도록이면 요소의 position을 재계산하는 작업에 사용하는 걸 권장한다고 한다. css의 애니메이션을 유발하는 class 추가 및 제거의 경우 간격을 더 길게 설정할 수 있는 디바운싱과 쓰로틀링이 좋을 수 있다고 한다.
_ Lodash
상당히 인기있는 JS의 라이브러리로 주로 데이터 구조를 함수형으로 쉽게 다룰 수 있는 메서드들을 제공한다.
ES6 이후로 자주 쓰이는 메서드들이 네이티브로 편입되었지만 여전히 자주 쓰는데 이유가 몇 가지 있다.
- 네이티브에 편입되지 않은 기능이 여전히 많다. (디바운싱과 쓰로틀링 처럼)
- 그런 기능들을 제법 보장된 성능으로 사용할 수 있다.
- ES6의 함수들에 비해 확장성이 높다. 예를 들어 인수로 콜백만 넣을 수 있는 ES6의 함수들에 비해 Lodash는 객체도 넣을 수 있는 경우가 있다.
- 지연평가가 적용 가능해 일부 케이스에서는 네이티브보다 성능이 좋을 수 있다.
지연평가
함수형 메서드들을 체이닝해서 사용할 때, 일반적으로는 메서드를 모든 데이터에 순차적으로 모두 처리해서 결과를 반환한다.
지연평가를 사용하면 단일 데이터 별로 체이닝된 메서드들을 처리하고 결과가 충족되었다면 계산을 중지할 수 있다.
체이닝 중 제한된 수의 데이터만 추출하는 메서드를 사용하는 경우에 효과가 있다.
단점으로는 기능이 많기 때문에 패키지 용량이 제법 크다는 것인데 커스텀 빌더를 이용해 사용하고자 하는 기능만 가져와서 용량을 줄일 수 있다.
아래는 커스텀 빌더를 사용하는 간단한 예시이다.
npm i -g lodash-cli
lodash include = debounce, throttle느낀점 🎬
디바운싱과 쓰로틀링은 setTimeout으로 구현한다고 배웠는데 Macrotask queue의 우선순위 때문에 실행 간격을 정확히 보장하지 못한다는 걸 보고 사람들이 많이 사용하는 Lodash의 메서드도 setTimeout으로 구현하는지 궁금했다. 결론은 맞다는 거였지만 덤으로 쓰로틀링이 디바운싱 기반이라는 사실도 알게되어 이득인 느낌이다.
참고
