👩🏻💻 Learn
테이블 풀스캔(풀테이블스캔)
검색 요청 받은 데이터를 테이블을 위에서부터 하나씩 다 찾아내려가는 것. 시간이 오래걸린다.
Tokenizing
문장을 단어 단위로 잘라서 저장하는 과정을 말한다. 이렇게 잘라진 단어를 token이라고 부른다. 토크나이징한 결과로 표를 만드는 걸 역색인(역인덱스) IvertedIndex 라고 부른다
디스크 기반
역인덱스를 목적으로 만들어진 DB로 디스크에 저장된다. 컴퓨터를 종료해도 데이터가 날아가지 않지만 느리다는 단점이 있다. Elastic search
메모리 기반
메모리 기반 방식으로 rem 에 저장된다. (변수에 저장). 속도가 빠른 반면 컴퓨터 종료시 데이터가 날아간다는 단점이 있다. Redis, Memcached
검색 로그 캐싱
사용자들이 자주 검색하는 대상을 메모리에 저장해 두는 것을 말한다.
Debouncing(Debounce)
특정 작업을 할 때 특정 시간 내에 다시 그 작업이 반복되지 않으면 마지막 요청만 1번 실행하는 것을 말한다.
특정 시간이 지날 때까지 재반복이 일어나지 않을 경우 1번 실행
ex. 검색
lodash 라이브러리로 debouncing 하기
// import 부분
import _ from "lodash";
// functiong 부분
const getDebounce = _.debounce((data) => {
// onChangeSearch 안에 getDebounce(event.target.value) 의 value가 data로 넘어옴
refetch({ search: data, page: 1 });
}, 2000); // 0.2초가 지날 동안 재작업이 없으면 함수 실행
const onChangeSearch = (event: ChangeEvent<HTMLInputElement>) => {
getDebounce(event.target.value);
};getDebounce 대신
refetch({ search: event.target.value, page: 1 })를 써줄 수도 있다. 입력하면 바로바로 화면이 페치된다. 하지만 과부화 걸릴 수 있어서 추천하는 방식은 아니다.
Throttling(Throttle)
먼저 한 번 실행한 뒤 특정 시간 동안 요청을 무시한다.
ex. 무한스크롤
검색한 단어 색깔 바꾸기
문장을 단어 단위로 쪼개고(tokeninzing) 토큰마다 태그로 감싸서 스타일을 적용해 준다.
시크릿 코드
검색한 단어 옆에 시크릿 코드를 붙여서 문자열을 나눌 기준을 만들어 준다.
과정
- keyword를 담아줄 useState 만들기
const [keyword, setKeyword] = useState("")- 문장 쪼개기
str.replaceAll("keyword", `#$%${keyword}#$%`).split("#$%")- map 돌려서 span 으로 감싸기
{el.title.replaceAll(keyword, `#$%${keyword}#$%`).split("#$%").map((el) => (
<Word key={uuidv4()} isMatched={keyword === el}>
{el}
</Word>
))}map을 돌릴 때 key 값은 uuid 로 부여해준다.
📝 Review
어제 이미지 등록하는 게 금방 되길래 쉽네! 하고 말았는데 완전 자만이었다... 해야할 일을 덜했으니까 쉬웠던 것... 쉬운 것만 하고 끝내버렸던...
아무튼 이번주는 그동안 배운 것들이 종합적으로 많이 적용됐던 것 같다. 프리보드에 들어가야할 기능은 완성했는데 UI가 하기 싫어서 큰일이다. 예쁘게 하고 싶은 욕심은 있는데...
주말동안 해야할 일이 많은데 알바로 하루의 절반이 날아가니까 좀 걱정된다. 역시 잠죽자... 해야겠지.
🔥 Will
- 주제 블로깅
- UI 끝내기
