요즘은 오픈뱅킹 어플들을 통해 은행 창구나 ATM기기를 가지 않고도 본인의 계좌에 손쉽게 접근할 수 있습니다. 이는 은행들이 잔액조회나 계좌조회 등의 API를 제공해서 가능해졌습니다. 은행앱을 통해 계좌조회나 잔액조회를 하면 자신의 기업에서 만든 어플에서 자신들의 API를 사용하는것이기때문에 무료로 사용이 가능한 반면 이를 통해 이윤을 발생시킬 수 있는 기업들은 해당 API를 사용하기 위해서는 일정의 이용료를 지불해야합니다.
서두가 길었네요. 중요한건 API 호출시 이용료를 왜 납부하는가인데, API 호출을 하게 되면 HTTP메서드를 통해 서버에 요청과 응답이 이뤄지는 과정에서 자원이 들어가게 됩니다.
때문에 중복으로 API를 호출하면 서비스에 불필요한 부담이 발생하겠죠??
이러한 문제를 방지할 수 있는 프로그래밍 기법 중 하나가 바로 이 쓰로틀링과 디바운스 입니다.
쓰로틀링이란?
마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
간단하게 위와같이 설명할 수 있겠습니다. 페이스북이나 인스타그램, 여러 커뮤니티들은 무수히 많은 게시물들이 있습니다. 그런데 사용자가 인스타그램을 들어갈 때 한번에 모든 게시물들을 불러오게 되면 성능상 문제가 발생할 수 밖에 없겠죠?
때문에 일정 게시물들만 보여주고 스크롤이 하단에 닿았을 때, 새로운 게시물을 불러와줘야 합니다. 하지만 위에서 설명했듯이 하단에 스크롤을 여러번 왔다 갔다 했다고 여러번 검색쿼리 API를 호출하면 문제가 생깁니다.
이처럼 최초 한번 이벤트를 감지하면 일정 시간이 지날 때 까지 다시 호출되지 않도록 처리하는 기법이 바로 쓰로틀링 입니다.
디바운싱란?
연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
디바운스의 경우는 연속된 이벤트를 처리할 수 있도록 처리하는 기법입니다.
가령 회원가입시 이메일 중복을 확인해주는 API가 있다고 해봅시다. <input>태그의 onChange변화 이벤트가 발생할 때 마다 매번 이 확인API를 호출하는 것 보다, 입력을 멈추고 몇 초 뒤에 한 번만 호출해주면 여러번 호출하는 것과 결과는 동일하지만 성능은 훨씬 좋겠죠?
이처럼 이벤트를 감지하고, 해당 이벤트가 일정 시간동안 또 감지가 되면 마지막 이벤트만 처리할 수 있도록 하는 기법이 디바운싱입니다.
코드 구현
쓰로틀링
let timer;
document.querySelector("#input").addEventListener("input", function(e) {
if (!timer) {
timer = setTimeout(function(){
timer = null;
console.log("쓰로틀링 한다!!", e.target.value);
}, 1000);
}
});코드를 살펴보면 할당하지 않은 timer를 선언 해 주고, input이벤트가 발생하면 1000ms(1초)가 지난 후에 콘솔에 결과를 보여주고 timer은 다시 빈값으로 처리해주는 쓰로틀링 예시입니다.
결과를 보면 1초마다 이벤트를 처리해주는 것을 확인하실 수 있습니다.
디바운싱
document.querySelector("input").addEventListener("input", function(e) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
console.log("디바운싱!!", e.target.value);
}, 1000)
})
결과를 바로 보면 디바운싱의 경우 저의 빠른 타자로 한번만 출력된 것을 확인하실 수 있습니다. 쓰로틀링과 마찬가지로 timer를 설정하고, 타이머에 setTimeout의 반환값인 Timer Identifier값이 있다면 스케줄링을 취소하고 다시 1초 뒤에 처리 할 함수를 스케줄링 해 줍니다.
위 코드들은 정말 간단하게 구현한 것이기 때문에 이 코드들만으로는 예외 사항들을 처리하지 못 할 수도 있습니다. 때문에 잘 만들어진 라이브러리인 underscore의 _.debounce와 _.throttle을 사용해보는것이 좋겠습니다.
💬요약
- 이벤트 처리 관련 성능 이슈를 해결하는 방법인
쓰로틀링과디바운싱에 관해 알아보았습니다.쓰로틀링은무한 스크롤구현시에 용이하다고 하고디바운싱은 주로ajax 검색,scroll,wheel,mousemove,resize등 짧은 시간안에 여러번 발생하는 이벤트에 자주 쓰인다고 합니다.
