📔 학습목표
- 검색을 이해하려면 다양한 DB를 알아야돼 >> Database
- 검색결과를 페이지네이션과 연결 >> Search/pagination
- 검색하기 버튼 없이 검색을 한다고? >> Debouncing/Throttiling
지난 시간 포트폴리오 리뷰
사진 등록하기
등록페이지 -> 상세페이지 -> 수정 (default)
1. 등록페이지
fileUrl
const [fileUrls, setFileUrls] = useState(["", "", ""]);배열에 비어있는 문자열이 세개가 있다.
업로드01 자체가 박스 한개이다.
공통컴포넌트를 따로 빼놓으면 필요할때 떼어다가 쓸 수 있다.
두덩어리가 하나의 업로드 박스이다
각각 인덱스 0~2
uploadDileFidden은 인풋 태그이고
타입 파일로 파일을 업로드 할 수 있다 -> 하지만 보이지 않게 숨겨놓고
가짜 버튼을 이용해 업로드 할 수 있게 바꿔준다.
우리가 가짜 버튼을 클릭하면 fileRef를 통해 숨겨져있던
버튼이 실행되서 업로드 할 수 있게 된다.
파일을 저장하면 DB로 넘어가고 DB가 storage로 파일을 넘기고 storage에서 그럼 url을 넘겨준다.
업로드를 넘겨줄 보드라이트 컨테이너
fileUrl에 넘겨올 애가 강아지.jpg
index가 0
일단 배열에 얕은 복사를 했다.
결국에 state가 바꼈음 -> 그럼 리렌더가 되고
안에 들어있는 함수나 컴포넌트들이 다시 만들어지는데
그게 엄청나게 비효율적이다.
uuid -> 겹치지 않는 아이디
강아지.jpg를 넘겨줘야 하기 때문에 인덱스를 사용
el -> 각각의 엘리먼트 (강아지.jpg , "", "")
onChangeFileUrls -> props로 넘겨줌
index도 props로 넘겨줌
강아지.jpg 파일 있으면(true) 보여주고
false 면 버튼이 보여지는 거
2. 상세페이지
?.filter((el: string) => el)이 코드가 없으면 빈 문자열이 맵으로 뿌려져서
비어있는 이미지가 보여진다.
🤓 filter 풀이
?.filter((el: string) => el !== "")
el이 빈 문자열이 아닌 애들만 걸러줘! -> 강아지.jpg만 남는다.
true면 el !== "" 가 되서 배열 안에 강아지.jpg만 남게된다
el이 true 가 되려면 값이 있으면 됌
" " 공백에 뛰어쓰기만 있어도 참임
3. 수정하기
핵심 - defaultValue를 어떻게 보여주느냐
edit 페이지에서 images를 fetching 해줘야 한다.
패칭으로 이미지를 넘겨주고 또 props로 넘겨줌
input에는 defaultValue 속성이 있었지만
버튼이나 이미지 태그에는 없다.
그럼 어떤 방식으로 defaultValue를 줄까?
- setFileUrls의 초기값에 넣어주자
useEffect에서
props.data로 받고 있으니까 이미지의 디폴트 벨류값이다.
유즈이펙트를 쓰지않고 Upload01UI 에 넣어주려면 힘들다
유지보수면에서 좋다.
원본을 변경하면 안되기 때문에 스프레드 엲산자를 이용해서 얕은복사를 했다.
파일이 변경된 게 없으면 오류
그럼 파일이 변경이 됬는지 안됐는지 어떻게 검증할 건데??
위의 방법이 검증해주고 있다.
위의 값이 똑같이 보여도 true가 나오지 않는다
🤔왜? 주소가 다르기 때문에(주소로 비교)!!
🤓해결방안? 아예 전체를 문자열로 변경한 다음 비교!!!!
검색
"점심" 이라는 값을 검색하기 위해
수많은 양의 데이터를 스캔해야 하기 때문에
검색해야 할 양이 많으면 속도가 느려진다.
table full scan (테이블 풀 스캔)
구글 검색엔진 초기에는
이렇게 단어를 쪼개서 테이블을 한 개 더 만들어서 데이터를 스캔했다
-> 역인덱스(=색인) 방식 (inverted index)
여기서 단어를 "토큰(token)"이라고 함
단어 단위로 쪼개는 것 = tokenizing
백엔드에서는 elastic search 를 사용한다(ELK 스택) -> 그래도 느림
데이터를 저장하는 메모리 / 디스크
메모리기반 데이터 베이스 - 빠르다 / 임시저장 (캐싱)
디스크기반 데이터 베이스 - 느리다 / 안전하게 저장
메모리 데이터 베이스 - Redis
배열을 통째로 저장(임시저장 - 캐싱) 임시로 저장하는 거기 때문에 검색속도가 빠르다.
search
검색하기 버튼을 클릭했을 떄
onClickSearch 함수가 실행되고 onClickPage처럼 refetch를 써준다
대신 안에 들어갈 variables에는 플레이그라운드처럼 search를 써준다.
검색결과의 페이지가 붙어야 한다.
페이지를 누르면 각각의 ~페이지가 나와야하지만
검색하기를 누르면 ""의 1페이지가 나와야 되기 때문에
variables에 페이지의 값을 "1"을 넣어준다.
search- debouncing
버튼없이 자동으로 검색하게 해주는 거!!!
주석처리 된 거 확인!! 훨씬 간결하다.
⛔️문제점
"안녕하세요" 라고 쳤을 때 무수한 양의 query들이 fetch된다.
디바운싱 : 특정시간을 기준으로, 해당시간 내에 요청된 내용들은 무시
이걸 대신 해주는 라이브러리가 있다.
-> lodash
lodash 설치yarn add lodash
- 타입스크립트 버전도 설치하려면?
괄호 안에는 data를 써주고
data.target.value를 쓴다. "data"의 이름은 아무거나 지정해도 된다.
이렇게 디바운싱 과정을 거치면 패치는 한번만 날라간다.
검색이 끝나고나서 마지막에 한번만 실행(검색)
실무에서는 1초는 너무 짧고 2초 정도~
Throttiling (쓰로틀링)
디바운싱 vs 쓰로틀링쭉 가다가 마지막에 실행 먼저 실행하고 기다리기
검색하기 무한스크롤 할 때
키워드로 쪼개서 검색
워드라는 태그를 뿌리게 되는
안녕하세요 저는,철수, 입니다 반갑습니다~~
이렇게 세개!
철수랑 el 같은지 비교
isMatched로 키워드가 el이랑 같은지 비교
true면 빨간글씨 false면 ㄴㄴ
프로세스
- 키워드가 들어간 단어로 쪼갠다 (split)
🤓 split
시크릿코드를 넣어서 쪼개기!
- replaceAll 로 키워드를 시크릿코드로 대체
- 시크릿코드를 기준으로 쪼개기(split)
- map으로 뿌려주기
