요즘은 오픈뱅킹 어플들을 통해 은행 창구나 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
등 짧은 시간안에 여러번 발생하는 이벤트에 자주 쓰인다고 합니다.