60. 검색 - 디바운싱과 쓰로틀링의 이해와 적용

검색이 되지만 쓰고 지울때마다 계속 나타난다

마지막 글자만 보내고 싶다면?

디바운스 - 디바운싱
쓰로틀 - 쓰로틀링

디바운싱
마지막 입력을 기준으로, 특정 시간 이내에 추가 입력이 없으면 1번 실행하는 것

 

쓰로틀링
최초 입력을 기준으로, 특정 시간 이내에 발생한 추가 입력을 무시하는 것

스크롤을 내릴 때 무수히 많은 이벤트가 발생한다
그럼 패치모어가 많이 발생하기 때문에 쓰로틀링을 사용한다

 

lodash의 디바운싱 검색에 적용하기
yarn add lodash 
yarn add -D @types/lodash

검색 결과 표시 알고리즘 구현
검색한 것에 color넣기

이렇게 하려면?

이런 구조를 만들어야 한다

사용자가 #을 넣으면 문제가 발생하기 때문에 시크릿코드(또는 uuid)를 사용한다

el은 key가 안된다

uuid
yarn add uuid
yarn add @types/uuid --dev

점심이면 레드, 아니면 블랙

완성