인프런 커뮤니티 질문&답변

안녕하세요 🙂

실무에서는 입력할 때마다 DB 조회를 하면 확실히 성능 문제가 발생할 수 있기에 Debounce, Throttle 기술을 사용합니다.

좋은 질문입니다! 실무에서는 입력할 때마다 DB 조회를 하면 확실히 성능 문제가 발생할 수 있습니다. 일반적으로 다음과 같은 방법들을 사용합니다:

1. Debouncing (디바운싱) - 가장 많이 사용

사용자가 입력을 멈춘 후 일정 시간(보통 300-500ms)이 지나면 API를 호출합니다.

import { ref, watch } from 'vue';
import { debounce } from 'lodash-es'; // 또는 직접 구현

const searchKeyword = ref('');

// lodash 사용 예시
const debouncedSearch = debounce(async (keyword) => {
  // API 호출
  const response = await axios.get('/api/search', {
    params: { q: keyword }
  });
}, 300); // 300ms 대기

watch(searchKeyword, (newValue) => {
  debouncedSearch(newValue);
});

직접 구현 예시:

const searchKeyword = ref('');
let timeoutId = null;

watch(searchKeyword, (newValue) => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(async () => {
    // API 호출
    await fetchData(newValue);
  }, 300);
});

2. Throttling (쓰로틀링)

일정 시간 간격으로만 API를 호출합니다 (예: 1초에 한 번만).

3. 최소 글자 수 제한

watch(searchKeyword, (newValue) => {
  if (newValue.length < 2) return; // 2글자 이상일 때만 검색
  debouncedSearch(newValue);
});

4. 클라이언트 사이드 캐싱

이미 검색한 키워드는 캐시에 저장하고, 같은 검색어는 재요청하지 않습니다.

const cache = new Map();

const searchWithCache = async (keyword) => {
  if (cache.has(keyword)) {
    return cache.get(keyword);
  }
  
  const result = await axios.get('/api/search', { params: { q: keyword } });
  cache.set(keyword, result.data);
  return result.data;
};

5. 백엔드에서 처리

• 백엔드에서 Rate Limiting 적용

• 데이터베이스 인덱싱 최적화

• 검색 엔진(Elasticsearch 등) 활용

실무에서 가장 많이 사용하는 조합:Debouncing + 최소 글자 수 제한 + 클라이언트 캐싱

이렇게 하면 사용자 경험도 좋고, 서버 부하도 크게 줄일 수 있습니다!