[javascript] Lodash의 네트워크 함수들과 사용 예제

21 Nov 2023

javascript

Lodash는 JavaScript 유틸리티 라이브러리로, 다양한 기능을 제공합니다. 이 중에서도 네트워크와 관련된 함수들은 웹 애플리케이션 개발에 유용하게 사용될 수 있습니다. 이번 글에서는 몇 가지 Lodash 네트워크 함수들을 살펴보고, 각 함수의 사용 예제를 알아보겠습니다.

1. Lodash의 네트워크 함수

1.1. debounce

debounce 함수는 연속적인 이벤트 호출을 제어하여 성능을 최적화하는 데 사용됩니다. 특히, 사용자 입력과 같은 반복적인 이벤트를 처리할 때 유용합니다.

import { debounce } from 'lodash';

const delayedSave = debounce(() => {
  // 저장 로직
}, 1000);

위의 예시에서 delayedSave 함수는 1초 간격으로 호출됩니다. 사용자가 텍스트를 입력하는 동안 계속 호출되는 함수를 최적화할 때 유용하게 사용할 수 있습니다.

1.2. throttle

throttle 함수는 일정한 간격으로만 이벤트를 발생시키는 기능을 제공합니다. 이 함수는 스크롤 이벤트처럼 과도한 호출이 발생할 수 있는 상황에서 사용하기 좋습니다.

import { throttle } from 'lodash';

const handleScroll = throttle(() => {
  // 스크롤 이벤트 처리 로직
}, 100);

위의 예시에서 handleScroll 함수는 0.1초 간격으로 스크롤 이벤트를 처리합니다. 스크롤 이벤트와 같이 많은 호출이 발생할 수 있는 상황에서 성능을 최적화하려면 throttle 함수를 사용할 수 있습니다.

2. 사용 예제

2.1. 검색 자동완성

검색 자동완성은 사용자가 텍스트를 입력함에 따라 실시간으로 키워드를 추천하는 기능입니다. 사용자의 입력에 반응하여 서버로 요청을 보내는 동작을 debounce 함수를 사용하여 구현할 수 있습니다.

import { debounce } from 'lodash';

const searchInput = document.getElementById('search-input');
const resultsContainer = document.getElementById('results-container');

const searchKeywords = debounce((keyword) => {
  // 서버로 검색 요청 보내고 결과 받아오는 로직

  // 검색 결과를 DOM에 렌더링하는 로직
}, 300);

searchInput.addEventListener('input', (event) => {
  const keyword = event.target.value;
  searchKeywords(keyword);
});

위의 예제에서 searchKeywords 함수는 사용자가 입력을 멈춘 후 0.3초 기다린 뒤에 호출됩니다. 이렇게 함으로써 사용자가 연속으로 텍스트를 입력할 때마다 요청을 보내는 것을 방지할 수 있습니다.

2.2. 스크롤 이벤트

스크롤 이벤트는 사용자가 웹페이지를 스크롤할 때 발생하는 이벤트로, 스크롤 위치에 따라 다양한 동작을 수행할 수 있습니다. 이때 throttle 함수를 사용하여 스크롤 이벤트를 최적화할 수 있습니다.

import { throttle } from 'lodash';

const header = document.getElementById('header');

const handleScroll = throttle(() => {
  // 스크롤 위치에 따라 헤더 스타일을 변경하는 로직
}, 100);

window.addEventListener('scroll', handleScroll);

위의 예제에서 handleScroll 함수는 0.1초 간격으로 호출되며, 스크롤 위치에 따라 헤더의 스타일을 변경하는 로직을 수행합니다. 이렇게 함으로써 스크롤 이벤트의 빈번한 호출이 성능에 영향을 주지 않도록 할 수 있습니다.