- Database
- Search / Pagination
- Debouncing / Throttling
1. Database
데이터 검색은 어디서 하면 될까? 프론트? 백?
검색 기능은 백엔드에서 한다. DB에 테이블이 있으면 어떤 Column에서 검색을 할 지 검색하는 기능이 있다.
DB를 개발하는 사람들이 DB를 만들면서 주로 만드는 기능 중에 하나가 DB내에서의 검색 기능이고 그 때 사용하는 것이 검색 알고리즘이다.
말로만 들어봤던 이진 탐색 같은 것들을 퍼포먼스를 위해 데이터가 방대할 수 있는 DB에 적용시키는건가?
왜 검색을 프론트에서 하면 안되는 건가
- 브라우저에서 유저가 검색창에 "점심"을 검색한다.
- "점심" 키워드가 백엔드로 전달되고
- 백엔드에서 다시 "점심" 키워드가 DB로 전달되어 키워드가 들어간 "테이블 풀스캔"이 일어난다.
- "테이블 풀스캔"을 이용해 키워드에 해당하는 결과를 DB로 부터 꺼내와서 프론트로 넘겨준다.
이 "테이블 풀스캔"은 너무 비효율적이라 다른 방법을 사용한다.
DB에 테이블이 있다면 그 테이블을 기반으로 검색 테이블을 따로 만든다. 이 검색 테이블은 기존 테이블의 Column이 바뀐 상태이다.
기존의 테이블은 각 제목에 대한 인덱스가 매겨져있는 테이블인데,
검색 테이블의 인덱스 Column에 기존 테이블의 단어가 들어가게 되고
검색 테이블의 제목 Column에 기존 테이블의 인덱스가 들어가게 된다.
이 기법?의 이름을 역인덱스(또는 역색인)Inverted Index가 적용된 Elastic Search라 부른다.
대신 검색 테이블은 기존 테이블의 문장에서 단어 하나 하나를 "토큰" 단위로 쪼개줘야만 한다. 이 과정을 "토크나이징" 이라고 부른다.
tokenizing 인가? 토큰화한다는 뜻인 것 같다.우리가 일반적으로 파일을 다운 받으면 DISK에 저장되고, 변수를 만들면 RAM에 저장된다. 이 모든 동작들은 CPU에서 진행되는데 CPU와 DISK의 거리가 멀기 때문에 속도가 느린 편이다. 이를 DISK I/O 때문이라고 많이들 칭한다.
그래서 나온 것이 메모리기반 Database이고 대표적인 것이 Redis이다. 메모리 기반 DB이기 때문에 재부팅을 하면 비워진다는 단점이 있지만 일반 DB에 비해서 속도가 빠르기 때문에 사용한다.
- "점심" 키워드를 검색한다.
- 백엔드에 키워드가 전달되고,
- 백엔드에서 Redis에서 키워드가 있는지 검색해본다.
- 있으면 바로 프론트에 전달해주고, 없으면 Elastic Search를 한다.
- Elastic Search를 해서 찾아서 가져오면 프론트로 넘겨주기 전에 Redis로 먼저 저장을 해준다.
- 프론트로 검색 결과를 전달해준다.
이 패턴을 cache-aside-pattern이라 부른다.
2. Search / Pagination
검색 필터링에 따른 페이지네이션 기능 포트폴리오에 적용하기!!
3. Debouncing / Throttling
debouncing
마지막 입력을 기준으로, 특정 시간 이내에 추가 입력이 없으면 1번 실행하는 것
예시로는 검색 필터링에 적용시키는 디바운싱이 있다. 실시간 검색 필터링 기능은 게시글 검색창에 원하는 이름의 게시글을 입력할 때 입력값을 실시간으로 받아서 게시글 목록을 바꿔서 보여준다.
만약 검색창에 글자를 입력할 때 마다 리소스 요청을 보낸다면 사용자가 아무 목적 없이 그냥 ㅁㄴ;ㅣㅏ럼ㄴㅇ;ㅣㅏ런ㅇㅁ;ㅣㅏ럼ㄴ;ㅣㅏ럼ㄴㅇ;ㅣㅏ럼ㄷㄴ;ㅣㅏ러를 미친듯이 입력한다면 서버로 엄청난 수의 리소스 요청이 보내질 것이다.. 이를 방지하기 위해 디바운싱을 적용해야하는 것이다.
throttling
최초의 입력을 기준으로, 특정 시간 이내에 발생한 추가 입력을 무시하는 것
예시로는 스크롤에 적용시키는 쓰로틀링이 있다. 스크롤은 한 번 슥 내리면 엄청나게 많은 스크롤 이벤트가 발생된다. 이 스크롤 이벤트가 발생할 때 마다 실행시키는 작업이 매우 무겁고 복잡하다면, 스크롤 한 번 슥 내렸다가 화면이 영원히 정지되는 것을 경험할 수 있을 것이다. 이르 방지하기 위해 쓰로틀링을 적용해야하는 것이다.
검색 필터링 + 디바운싱을 이용한 검색어 하이라이트 기능
하이라이트 기능은 replaceAll 과 split을 섞어쓰는 방법이 있다.
input file 타입 defaultValue 주는 법
fileUrl 에 처음부터 시작값을 넣어주면 그게 defaultValue가 된다?
멘토님 같은 경우 fileUrl state를 따로 만들고 data를 deps로 받는 useEffect()를 사용하셔서 data가 변할 때 마다 fileUrl stateFunction이 실행되게끔 코드를 작성하심!
수정 부분에서 이미지의 변한 값이 없으면 기본값을 넣어주는 부분
배열과 배열을 비교할 때 (배열 === 배열) 조건으로 비교하면 안된다. 배열 내부의 값은 같을 지라도 주소값이 다를 수 있기 때문이다.
이럴 땐 JSON.stringify를 사용해서 전부 문자열로 바꿔준 후 값을 대조하면 쉽다.
