검색 프로세스
웹서비스에서의 검색은 Browser에서 검색을 요청하면 Back-end에서 데이터베이스 내부의 데이터들 속에서 요청받은 키워드를 가지고 full-scan하게 되는데, 서비스의 규모가 커짐에따라 데이터가 많아지게되고 데이터가 많아질수록 속도가 느려지게 된다.
이 방법을 개선하기 위해 데이터베이스에 저장할 때, 문장을 키워드 단위로 토크나이징(컴퓨터한테 이해시키기 위해 우리의 언어를 의미가 있는 가장 작은 단어로 나누는 것)하고, 역인덱스를 만들어 저장하게 된다면 특정 키워드에 대한 글들의 검색이 빨라질 것이다.
이런 방식을 쉽게 만들어주는 도구로 ES(Elastic Search) 데이터베이스 서비스가 있다.
이는 디스크 기반의 데이터베이스로 컴퓨터를 껐다 키더라도 데이터가 유지되므로, 안전하단 장점이 있지만 속도가 느려지게되는 단점이 있다.
서비스가 더 커지게 되면, 무수히 많은 사람들이 검색하는 데이터가 어느정도의 틀에서 크게 벗어나지 않게되는데 이때 검색어와 매칭되는 검색결과를 메모리에 저장한 후에 빠르게 찾아쓸 수 있도록 도와주는 데이터베이스 서비스가 있는데 이를 Redis라고 한다.
이는 메모리 기반의 데이터베이스로 컴퓨터를 껐다 키면 데이터가 사라지므로 ES(Elastic Search)보다는 덜 안전하지만, 속도가 빠르다는 장점이 있다.
따라서, 검색이 진행될 때, 메모리에 저장되어있다면 Redis를 사용하고 저장되어있지 않다면 ES방식을 사용하면 효율성을 높일 수 있다.
Debounce/Throttle
검색기능을 구현하다보면 검색하기 버튼을 누르지 않아도 해당 관련 검색어들이 검색이 되는것을 볼 수 있다. 이를 구현하는 것은 input태그 안에 onChange함수를 넣어 함수에 event를 인자로 받아 해당 event의 값을 가져오면서 함수를 실행하게끔 하면 된다.
하지만, 이런식으로 기능을 구현하게 된다면 '사자'라는 단어를 치는동안 총 4번 (ㅅ,ㅏ,ㅈ,ㅏ)의 요처을 하게되고 이는 컴퓨터의 효율성 측면에서 매우 떨어지게 된다.
Debounce
연이어 발생하는 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로, 주로 그룹에서 마지막 혹은 처음에 처리된 함수를 처리하는 방식으로 사용된다. 즉, 함수를 지연시키고, 지정한 시간 안에 일어난 함수들을 무시하게끔 해준다.
debounce안에 검색어를 입력하는동안 refetch가 지연되게끔 지정해준다면 backend로 보내는 요청을 줄일 수 있다.
Throttle
Debounce의 반대의미로, 연이어 발생한 이벤트에 대해 일정한 딜레이를 포함시켜, 연속적으로 발생하는 이벤트를 무시하는 방식으로 사용된다. 즉, 이벤트를 처음에 요청을 하고, 지정한 시간동안은 이벤트를 요청하지 않게끔 해준다.
대표적인 예로는 마우스의 스크롤 기능이 있다.
