오늘의 TIL
1.검색을 이해하려면 다양한 DB를 알아야 돼! >> Database
- full table scan
- inverted index
- 엘라스틱 서치, redis
백엔드에서 검색을 구현하는 방법에는 테이블의 전체 로우를 조회하는 풀 테이블 스캔과 문장을 키워드 단위로 나눠(토크나이징) 별도의 검색용 테이블에 저장해서 검색하는 역인덱스(역색인) 방법이 있다.
역인덱스를 도와주는 데이터베이스 프로그램으로는 엘라스틱서치가 있다.
자주 검색되는 검색어를 메모리에 저장해서 나중에 빠르게 찾을 수 있게 해주는 프로그램인 redis가 있다.
redis는 휘발성 저장 방식인 메모리 기반이고, 엘라스틱 서치는 하드에 저장시키는 디스크 기반이다.
2. 검색 결과를 페이지네이션과 연결해야 해! >> Search / pagination
- refetch
검색어를 기준으로 페이지네이션이 만들어져야 하기 때문에, 검색어를 refetch할 때 입력값으로 넣어서 연동해줘야 한다.
3. 검색하기 버튼 없이 검색을 한다고?! >> Debouncing / Throttling
- lodash 라이브러리
검색어를 입력할 때마다 refetch를 실행시키면 gql이 연속적으로 일어나 백엔드 컴퓨터의 메모리, cpu 낭비가 심해져 효율이 떨어진다.
이를 막기 위해 연속적으로 요청되는 쿼리를 일정 시간 막는 debouncing을 활용할 수 있다.
debouncing은 반복적인 요청을 일정한 텀을 가지고 한번에 묶어서 요청해준다.
반대의 개념인 Throttling은 이벤트가 감지되었을 때 일단 한번 실행하고 일정 시간동안 다시 실행되지 않도록 막아주어서, 무한스크롤 등에 활용된다.
lodash 라이브러리를 사용해서 쉽게 구현할 수 있다.
4. 검색한 키워드 표시
- 시크릿 코드
- replaceAll, split
검색어에 해당하는 단어의 색을 바꿔주기 위해서 replaceAll을 이용해 검색어 키워드의 앞뒤로 시크릿 코드를 붙여주고, split으로 시크릿 코드를 기준으로 문자열을 잘라내 검색어에 해당하는 태그에 style을 적용했다.
self-study
- 검색 버튼 눌러서 검색하기
- 검색어 입력 시 바로 검색하기(debouncing 활용)
- 검색한 키워드 스타일 주기
