[React] 검색프로세스, debouncing, throttling

박광민·2022년 12월 1일
0

게시판에 들어오는 값들을 단어로 쪼개서 검색전용 board를 따로 만들고 그 단어가 몇번 게시물에 있는지 게시물 번호를 저장해 놓은 뒤, 해당 단어로 검색이 들어오면 검색전용 board에 저장되어 있는 board의 값을 보여주는 형태로 보통 검색이 이루어짐

토크나이징 -> 토큰단위로 단어를 쪼개는 것

역인덱스 방식 -> data를 특정 키워드들로 구분지어, 해당하는 글들을 모아 저장하는 방식-> 쉽게 만들어주는 도구-> Elastic Search
-> 이방식은 disk에 저장되는 방식이기 때문에 컴퓨터가 꺼져도 저장이 유지되고 안전하지만 속도가 조금 떨어짐. 반면 Memory에 저장되는 방식은 disk저장보다는 안정성이 떨어지지만 속도가 빠름

레디스 -> 메모리저장기반 방식

debouncing
-> 연이어 발생한 이벤트를 하나의 그룹으로 묶어 처리하는 방식으로 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용됨
특정시간 이내에 추가 입력 없을 시 , 마지막에 1회 실행

throttling:
연이어 발생한 이벤트에 대해 일정한 delay를 포함시켜 연속적으로 발생하는 이벤트는 무시하는 방식으로 사용됨
ex) 스크롤 기능
특정시간 이내에 추가입력이 있어도 처음 1회만 실행

lodash 디바운싱
npm에서 설치 가능

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

profile
developer(Frontend)

0개의 댓글