검색기능
검색 자체는 BE에서 실행되는 부분으로 FE에서는 데이터를 요청할 때 키워드만 추가해서 요청하면 검색이 가능하다.
예를들어 홈페이지 게시물 목록에서 제목을 검색한다고 해보자.
'오늘' 이라는 키워드로 검색하는 경우 별다른 설정을 하지 않으면 검색을 위한 API는 멍청하게도 DB에 저장된 모든 정보를 하나하나 키워드와 대조해가며 검색을 실행할 것이고 그만큼 하드웨어에 무리를 줄 것이다.
이러한 방식을 Full-table-scan이라고 해서 아주 비효율적인 방식이다.
DB based on Disk
DB에 저장된 글의 단어별로 또 하나의 테이블을 만들어(토크나이징) 저장하는 방식.
이렇게 만들어진 테이블로 검색어를 조회하는 방식을 '역인덱스 방식(inverted index)'이라고하며 특정 DB(ElasticSearch)에서는 역인덱스 방식을 기본적으로 제공하기도 한다.
DB based on Memory
유저들이 많이 검색한 검색어를 개별로 Redis라는 저장소에 저장해놓고 저장 방식은 '특정 키워드: 결과'이런 식으로 저장한다(검색어 캐싱)
즉, 많이 검색된 검색어의 검색결과를 미리 Redis에 저장하기 때문에 유저가 검색한 키워드가 Redis내에 있으면 게시판 조회를 하지 않고 Redis에 있는 결과를 내보내는 것이다.
물론 Redis에 없는 경우는 역인덱스방식을 사용해야 한다.
여기서 궁금한 점은 왜 비휘발성인 Disk와 휘발성인 Memory 방식으로 나뉘어 있는가?
바로 속도의 차이 때문이다.
Disk에 데이터를 저장하는 방식의 경우 컴퓨터를 종료해도 데이터가 저장되는 이점이 있지만 Disk의 물리적 주소를 조회하고 저장하고 불러오는 단계를 거쳐야하기 때문에 Memory방식에 비해 매우 느리다.
Debounce
검색버튼 없이 입력받은 값으로 바로 리패치가 되게끔 함수를 만들면 입력하는 인자 하나하나, 초성 하나하나마다 새로 조회를 하기 때문에 BE에 무리가 간다.
디바운스는 이런걸 방지하기 위한 기능으로 시간을 설정하고 그 시간 내에 연속으로 입력된 값에 대해서는 조회하지 않는다.
예를들어 디바운스에 설정된 시간이 1초라면 검색창에 새로운 입력이 들어왔을 때, 1초 내에 연속으로 입력된 값에 대해서는 조회하지 않고 1초가 초과하는 값에 대해서만 조회를 시작하는 방식이다.
Throttle
디바운스와는 반대되는 개념으로 디바운스의 경우 설정된 시간동안 요청을 하지않는 방식이지만 쓰로틀링은 처음에 조회를 요청하고 그 이후에 설정된 시간동안 조회를 멈추는 방식이다.
lodash
위의 기능들은 setTiomeout 함수를 이용해 직접 구현할 수도 있지만 당연하게도 라이브러리가 있다.
yarn add lodash
yarn add @types/lodash --dev를 통해 라이브러리와 타입스크립트까지 설치를 해주고
import _ from 'lodash'여기까지 됐으면
const getDebounce= _.debounce(( ‘인자’ )=>{. 실행할 함수 }, 1000//ms단위이기 때문에 1000ms===1s)이런 방식으로 디바운스 함수를 생성해 설정해 줄 수 있다.
const getDebounce = _.debounce((data) => {
refetch({ search: data, page: 1 });
setKeyword(data);
}, 1000);
const onChangeSearch = (event: ChangeEvent<HTMLInputElement>) => {
getDebounce(event.target.value);
};