Day-26
검색 프로세스를 만들어 보자!
검색이 어떻게 이루어지는지 간단하게 설명을 들었다.
기본적으로 검색을 하게되면 FETCH를 백엔드 쪽으로 날려서 받아 오는 구조인데 여기서 3가지 방식으로 나뉜다고 한다.
1.RDB에 검색한 제목을 위에서 부타 하나하나 찾는다(규모가 작은 경우)
2.엘라스틱 서치 서비스를 이용해서 역인덱스 inverted index방식 토크나이징으로 찾는 경우 (서비스가 규모가 있는 경우)
3.메모리 데이터 형식으로 사람들이 많이 검색하는 것을 임시 저장공간에 미리 담아 두고 어떠한 키워드에 이거는 이거줘 (서비스가 규모 큰 경우)
1. 검색 프로세스
2. 디바운씽
1. 검색 프로세스
1-1 검색 프로세스 기본 셋팅
기본적인 구조(자유게시판을 함)에 검색 버튼과 검색창을 만들고 검색과state 를 만들어 준다.
이때 query를 재요청 해줘야한다.
검색하기 버튼을 누를때 usequery를 refetch 해준다.
usequery를 옆에
refetch넣어주고 검색 클릭을 하면 검색어로refetch되게 온클릭 서치에 실행 API 보고 맞는 속성을 부여한다.
<검색 실행 결과>
▶︎문제점
페이지 네이션이 새롭게 만들어 저야하는데 종속이 돼서 페이지를 넘겨도 같은 것만 나오게 된다.
그래서 검색한 결과와 페이지를 동시에 작업해줘야한다.
페이지 네이션을 만들어 주고..
온클릭 버튼을 만들어서 페이지에 바운딩 시키고 똑같이
refetch를 시키는데 추가로 몇페이지를 클릭 했는지 페이지 값도 같이 넘겨 줘야한다.
이렇게 입력해주면 검색 기준으로 페이지가 바뀐다.
2. 디바운씽,쓰로틀링
2-1 디바운싱(Debouncing)
클릭 버튼이 아닌 입력창에 바로 refetch를 하면 검색 버튼을 누르지 않아도 검색이 실행 된다.
사용자 입장에서는 좋지만...
이런식으로 글자를 입력 할때마다 graphql 날라가는걸 볼 수 있다.
이런것들을 해결하기 위해서 입력 후 특정시간(기준시간) 까지 아무 작업이 없으면 그때 graphql 날려 보내는 방식을 해야한다 [연속 되는 특정 작업을 마지막에 한번만 할 수 있도록 도와주는게 디바운싱 쓰로틀링이다.]
직접 코드를 입력해도 되지만, npm 라이브러리 loadash를 이용 한다.
lodash를 불러오는데 통해 lodash기능을 모두 불러 온다. [lodash에는 많은 기능들이 내포되어있다.]
. 를 하면 화인 가능
변수를 검색창에서 실행 시키게 하고 저부분이 저기 들어가게 된다.
포인트는 여기서 setsearch 가 있으면 state 새로 생겨서 해서 디바운싱이 되기때문에 한번만 디바운싱 되게 setsearch를 지운다
이러면 0.5초안에 입력을 하면 바로 전송 되지 않고 손을 때는 순간
graphql가 전송 된다.
아까 말 했듯이 페이지네이션은 늘 같이 적용 시켜줘야 한다.
search 가 되야 페이지 네이션도 작동 하기때문에 setsearch 옮겨준다.
💎 쓰로틀링(Throttling)
비슷한 개념으로 쓰로틀링(Throttling)가 있는데 먼저 실행하고 그다음 특정시간동안 반복 실행 하지 않는 형식이다.
ex)스크롤 또는 마우스 움직일때 (무수히 많은 이벤트가 발생할때)
💎 검색할때 검색 키워드가 표시 되게 하기
title 은 하나의 문자열이기 때문에
쪼개서 각각 의 태그를 걸어야하는데
replaceAll()을 사용한다.
(정규표현식을 지정한 문자로 바꿔서 출력)
▶︎문제점
검색하기도 이전에 키워드 색이 변경 되게 때문에 키워드와 검색을 따로 스테이트 관리 해야한다.
split을 이용해서 이상한 문자를 기준으로 잘라서 각각의 스팬으로 태그를 붙혀서 만들어준다.
props 를 이용해서 emotions에 연결 시켜준다.
마무리
디바운씽:대기하다가 마지막에 한번 실행
스로틀링:먼저 실행하고 그 다음 특정 시간동안 반복 실행 하지 않는다.
검색 기능과 페이지네이션은 같이 작업 해 줘야한다.
