JavaScript는 웹 앱을 동적이고 대화형으로 만드는 데 환상적이지만 자체적으로는 잘 처리할 수 없는 한 가지가 있습니다. 바로 빈번한 이벤트입니다. 창 크기 조정, 스크롤, 검색창 입력 등을 생각해 보세요. 제대로 관리하지 않으면 앱에 이벤트 트리거가 넘쳐 속도가 느려지고 사용자 경험이 느려질 수 있습니다. 이것이 디바운싱 및 제한이 필요한 곳입니다. 이러한 기술을 사용하면 특정 기능이 실행되는 빈도를 제어하여 앱의 속도와 반응성을 유지할 수 있습니다.

이 글에서는 디바운싱과 제한을 분석하고, 언제 사용해야 하는지 보여주고, 실제로 작동하는 모습을 볼 수 있는 실제 사례를 제공합니다. 필수적인 JavaScript 성능 최적화 기술을 자세히 살펴보겠습니다!

디바운싱이란 무엇입니까?

작동 방식

답장을 시작하기 전에 누군가가 말을 마칠 때까지 기다리는 것처럼 반송을 취소하는 것을 생각해 보세요. 누군가가 계속해서 대화를 방해하는 상황을 겪어 본 적이 있다면, 그 아이디어를 얻으실 수 있을 것입니다! 디바운싱의 핵심 개념은 이벤트가 마지막으로 트리거된 이후 지정된 시간이 지날 때까지 함수 실행을 지연한다는 것입니다.

간단히 말하면 이벤트(예: 사용자 입력)가 계속 빠르게 발생하는 경우 디바운싱을 통해 사용자가 특정 기간 동안 중지한 후에만 관련 기능(예: 검색어)이 실행됩니다.

디바운싱을 사용해야 하는 경우

잦은 사용자 입력으로 인한 과도한 함수 호출을 제한하려는 경우 디바운싱을 사용해야 합니다. 전형적인 예는 검색창이 있고 사용자가 입력할 때마다 API를 호출하려는 경우입니다. 디바운싱하지 않으면 키를 누를 때마다 API가 호출되어 서버에 불필요한 부하가 발생할 수 있습니다. 디바운싱을 사용하면 사용자가 입력을 중지한 후에만 API가 호출됩니다.

코드에서의 디바운싱

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

// Usage
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(() => {
    console.log('API call made!');
}, 300)); // Only executes 300ms after the last keystroke

이 예에서 디바운스 기능은 사용자가 입력을 중지한 후 300밀리초 후에만 API 호출이 발생하도록 보장합니다.

조절이란 무엇입니까?

디바운싱과의 차이점

이제 제한에 대해 이야기해 보겠습니다. 디바운싱이 채팅이 멈출 때까지 응답을 기다리고 있는 경우, 제한은 얼마나 많은 자동차가 기다리고 있는지에 관계없이 몇 초마다 한 대의 자동차만 통과하도록 하는 교통 경찰과 같습니다. 이벤트가 반복적으로 트리거되더라도 설정된 기간마다 최대 한 번 함수가 호출되도록 보장합니다.

조절을 사용해야 하는 경우

시간이 지나도 일관된 실행을 보장해야 하는 경우 제한을 사용하는 것이 좋습니다. 예를 들어 사용자가 페이지를 아래로 스크롤하면 스크롤 이벤트가 초당 수십 번씩 트리거될 수 있습니다. 제한하지 않으면 앱이 모든 이벤트를 처리하려고 시도하면서 속도가 느려질 수 있습니다. 조절은 스크롤 이벤트 핸들러가 실행될 수 있는 빈도를 제한하여 성능을 향상시킵니다.

코드 제한

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// Usage
window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event!');
}, 1000)); // Executes at most once every 1000ms

여기서 스로틀 기능은 스크롤 이벤트 핸들러가 1000밀리초마다 한 번만 실행되도록 하여 앱이 과부하되지 않도록 합니다.

실제 사례

이러한 기술을 보다 실용적인 맥락에 적용해 보겠습니다. 사용자가 검색창에 입력하는 React 앱을 구축한다고 가정해 보겠습니다. API 호출로 인해 서버가 넘쳐나는 것을 방지하기 위해 입력 이벤트를 디바운스할 수 있습니다. 또는 사용자가 페이지에서 얼마나 멀리 스크롤했는지 추적하는 경우 제한을 사용하여 성능을 최적화할 수 있습니다.

React에서의 디바운싱

import { useState } from 'react';

function SearchComponent() {
    const [query, setQuery] = useState('');

    const handleSearch = debounce((value) => {
        // API call with the value
        console.log('Searching for:', value);
    }, 300);

    return (
         {
                setQuery(e.target.value);
                handleSearch(e.target.value);
            }}
        />
    );
}

스크롤 이벤트 조절

import { useEffect } from 'react';

function ScrollTracker() {
    useEffect(() => {
        const handleScroll = throttle(() => {
            console.log('Scrolling...');
        }, 1000);

        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return 
Scroll to see throttling in action!
;
}

성능 최적화 모범 사례

디바운싱과 스로틀링: 선택 시기

다음은 간단한 경험 법칙입니다.

• 디바운싱은 사용자가 작업을 중단할 때까지 기다리고 싶을 때 완벽합니다. 예를 들어 검색창에 입력하는 경우입니다.
• 제한은 시간이 지남에 따라 일관되고 주기적인 실행을 보장하려는 경우 가장 잘 작동합니다. 창을 스크롤하거나 크기를 조정하는 데 이상적입니다.

어떤 종류의 이벤트를 다루고 있고 얼마나 자주 발생하는지 알면 작업에 적합한 기술을 선택할 수 있습니다.

결론

자바스크립트에서 자주 발생하는 이벤트를 제어하는 ​​것은 성능 최적화에 필수적이며, 디바운싱과 조절 모두 강력한 솔루션을 제공합니다. 각 항목을 언제 사용해야 하는지 이해하면 검색 입력 처리, 창 크기 조정, 스크롤 이벤트 관리 등 웹 애플리케이션을 더욱 원활하고 응답성이 향상되도록 만들 수 있습니다.

다음번에 너무 많은 이벤트로 인해 앱이 정체되는 것을 발견하면 스스로에게 물어보세요. 디바운싱해야 할까요, 아니면 제한해야 할까요? 그렇게 하시면 정말 기뻐하실 겁니다!

시도해 볼 준비가 되셨나요? 다음 번에 프로젝트 작업을 할 때 이 기술을 사용해 보세요. 모든 것이 얼마나 부드러워졌는지 놀라실 겁니다!