JavaScript에서 디바운스 만들어보기

이 글에서는 JavaScript에서 디바운스(Debounce)를 사용하는 법을 풀어서 설명해보려고 해요.

디바운스는 사용자가 입력하는 동안 함수가 너무 자주 호출되는 것을 막아주는 기술로, 웹 개발에서 꽤 유용하게 쓰입니다.

예를 들어, 사용자가 타이핑을 할 때마다 서버에 요청을 보내는 대신, 일정 시간 뒤에 한 번만 요청을 보내게 할 수 있죠. 이 포스트를 통해 디바운스를 어떻게 구현하고 사용하는지 살펴보겠습니다.

디바운스는 대체 뭐야?

디바운스는 원래 전자기기에서 버튼을 툭 터치할 때 발생하는 작은 신호들을 정리해주는 용어였어요. 프로그래밍에서는 이걸 빌려와서 사용자가 무언가 입력하거나 클릭할 때 그 사이사이에 시간을 두고 함수가 실행되도록 조정해 주는 기능이 되었습니다. 이렇게 하면 서버에 불필요한 부하를 줄일 수 있고, 사용자 경험도 더 부드러워지죠.

자, 이제 직접 만들어 볼까요?

디바운스 함수는 아래와 같이 간단하게 만들 수 있어요. 예를 들어, 사용자가 입력창에 무언가를 타이핑할 때, 300밀리초 후에만 saveInput 함수가 실행되도록 설정할 거예요.

function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(context, args), delay);
    };
}

function saveInput() {
    console.log('Input saved');
}

const debouncedSaveInput = debounce(saveInput, 300);
document.getElementById('input-box').addEventListener('keyup', debouncedSaveInput);

첫 반응을 중요시하는 경우는?

가끔은 사용자가 처음 입력한 것에 바로 반응을 보여줘야 할 때도 있어요. 이런 경우에는 디바운스 함수를 조금 다르게 만들어야 합니다.

function debounce(func, delay, immediate) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        const callNow = immediate && !timer;
        clearTimeout(timer);
        timer = setTimeout(() => {
            timer = null;
            if (!immediate) {
                func.apply(context, args);
            }
        }, delay);
        if (callNow) func.apply(context, args);
    };
}

const debouncedImmediateSaveInput = debounce(saveInput, 300, true);
document.getElementById('input-box').addEventListener('keyup', debouncedImmediateSaveInput);

라이브러리를 쓰는 것도 한 방법!

솔직히 직접 디바운스 기능을 만들기 귀찮다면, 많은 JavaScript 라이브러리에서 이미 이 기능을 제공하고 있어요. 예를 들어, Lodash 라이브러리는 이렇게 _.debounce 함수로 간단하게 사용할 수 있습니다.

import _ from 'lodash';
document.getElementById('input-box').addEventListener('keyup', _.debounce(saveInput, 300));

이렇게 하면 코드를 좀 더 간단하게 유지하면서, 라이브러리가 제공하는 최적화된 성능을 그대로 이용할 수 있어요.

마무리

디바운스는 웹 앱에서 중요한 성능 최적화 도구 중 하나예요. 사용자의 입력이나 스크롤, API 호출을 처리할 때 적절히 사용하면 서버 자원을 아끼고 사용자 경험을 개선하는데 큰 도움이 됩니다. 직접 만들어보거나 라이브러리를 사용해보는 걸 추천합니다!