검색 프로세스 이해

브라우저에서 검색을 요청하면 백엔드는 DB의 수많은 데이터 중에서 요청받은 키워드로 전체를 탐색(full scan)합니다. (예: 브라우저에서 '점심'을 검색)

데이터를 토크나이징으로 나눈 뒤 역인덱스(Inverted Index) 방식으로 저장하면, 특정 키워드가 들어간 글을 훨씬 빠르게 찾을 수 있습니다.

단어	번호
안녕	1
철수	1
오늘	2
점심	2
점심	3
메뉴는	3

이런 방식을 쉽게 구현해 주는 도구가 Elasticsearch입니다.

토크나이징: 문장을 토큰 단위의 단어로 나누는 것 역인덱스: 키워드별로 해당 키워드가 포함된 글을 모아 저장하는 방식

1. RAM - 빠름 (Random Access Memory)

• 메모리 DB (임시 저장소) (Redis, Memcached)
• 검색 결과 캐싱
• Br => backEnd => RAM(메모리DB) => backEnd => Br

2. 디스크 I/O - 느림

• DB (MySQL): 중요한 정보 저장
• 토크나이징
• 역인덱스 (사전 방식)
• ElasticSearch
• 구글 초창기 검색 방식

---

Throttling & Debouncing

debounce (디바운스)

• 연이어 발생한 이벤트를 하나로 묶어, 마지막(또는 처음) 한 번만 실행하는 방식입니다.
• 일정 시간 동안 추가 입력이 없을 때 마지막 1회 실행

throttle (스로틀)

• 일정 간격을 두고, 그 사이에 연속으로 발생한 이벤트는 무시하는 방식입니다.
• 일정 시간 동안 추가 입력이 있어도 처음 1회만 실행

lodash

자주 쓰는 유틸 함수를 모아 제공하는 JavaScript 유틸리티 라이브러리입니다. Lodash란?

debounce는 setTimeout으로 직접 구현할 수 있습니다. 퍼블리싱할 때 화면 크기가 바뀌거나 스크롤 이벤트가 발생할 때 setTimeout으로 디바운스를 구현한 경험이 있고, 아래 글을 참고했습니다. javascript(jquery) resize/scroll 이벤트 함수 한번만 실행하기

지금은 직접 구현하기보다 검증된 라이브러리를 쓰는 편이 낫다고 생각해서 lodash로 구현해 보겠습니다.

npm - lodash

yarn add lodash
yarn add --dev @types/lodash

lodash- debounce

자세한 옵션은 공식 문서에서 확인할 수 있습니다.

import styled from "@emotion/styled";
import _ from 'lodash'

export default function Test2() {
  let timer

	const handleOnChange = (e) => {
		console.log(e.target.value);
  };

	const handleOnTimeOutChange = (e) => {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      timer = null;
		  console.log(e.target.value);
    }, 500);
  };

	const handleOnDebounceChange = _.debounce((e) => {
		console.log(e.target.value);
  } , 500);
  
	return (
		<>
      <Wrapper>
			  <input placeholder="디바운스 적용 전 Input" onChange={handleOnChange}/>
        <br/><br/>
			  <input placeholder="디바운스 SetTimeOut 적용 후 Input" onChange={handleOnTimeOutChange}/>
        <br/><br/>
			  <input placeholder="디바운스 Lodash 적용 후 Input" onChange={handleOnDebounceChange}/>
      </Wrapper>
		</>
	);
}

예제 페이지

lodash는 _로 import한 뒤 _.메서드명(함수) 형태로 간단히 사용할 수 있습니다. setTimeout으로 직접 구현하면 9줄이던 코드가 lodash로는 3줄로 줄어듭니다.

lodash에는 다른 유용한 함수도 많으니 필요한 기능을 찾아 활용해 보는 것을 추천합니다.