포트폴리오 리뷰
이미지 등록
BoardWrite.container
BoardWrite.presenter
이미지 보여주기
이미지 uploads 폴더를 따로 분리해준다.
- onChangeFileUrls에서 index를 사용하는 이유
-> 이미지 등록 부분이 3개
-> fileUrls state에서 배열 안에 3개가 존재하기 때문
-
삼항 연산자를 사용해서 fileUrl이 있으면 사진을 보여주고, 없으면 버튼을 보여준다.
-
UploadFileHidden은 disabled된 파일 업로드 input
=> 부모가 리랜더 되면 자식까지 다 리랜더 되기 때문에 비효율적
BoardDetail.presenter
이미지가 없는 경우 (빈 문자열일 경우) filter로 걸러준다.
이미지 수정
BoardWrite.container
- 수정하기 페이지에서 이미지 보여주기
-> if (props.data?.fetchBoard.images?.length)
-> fetchBoard에서 images가 있으면 보여준다.
코드 유지보수는 높아졌지만 성능 상으로 좋지는 않다.(useEffect로 인해 리렌더가 한 번 더 발생하기 때문)
-
현재 파일과 기본 파일을 비교하기해서 같지 않다면(새로운 파일이 들어온다면), updateBoardInput 객체에 추가해준다.
-
url주소는 배열안에 들어있기 때문에 JSON.stringify로 문자열로 변환해준 후에 비교해준다.
검색 기능
검색 전용 Board가 없을 경우, 검색에 시간이 오래 걸리게 된다.
검색 전용 Board Table
- 특수기호 / 공백을 제거 하고 단어만 저장
- 쪼갠 단어를
토큰이라 한다.
이렇게 단어을 토큰으로 쪼개는 과정을 Tokenizing 과정이라 하며, 이러한 방식은 역인덱스 (Invertes-Index) 방식이다.
📌 Elastic Search
검색 table을 만드는 데 도와주는 프로그램
- RAM : 변수 / 속도 빠름
- DISK : 파일 / 속도 느림
RAM은 속도가 빠르기 때문에, RAM을 이용한 메모리 DB (Redis) 에 임시저장하여 검색 성능을 극대화할 수 있다. (SQL DB(Disk)까지 이동하면 검색 속도가 느려진다.)
검색을하면 메모리 DB에 존재하는지 확인 후, DB로 간다.
검색기능 예제
fetchBoards 쿼리에 존재하는 search 변수를 넣어준다.
검색 요청시 항상 1페이지에서 시작하도록 onClickSearch에서 refetch시 page를 1로 설정해준다.
Debouncing
- 디바운싱 : 특정 시간 이내, 추가 입력이 없을 시 마지막 1회만 실행
- 쓰로틀링 : 특정 시간 이내, 추가 입력이 있어도 처음 1회만 실행
loadsh 라이브러리 설치
yarn add loadsh
타입스크립트 버전 설치
yarn add --dev @types/lodash
import _ from "lodash";
debounce 사용 시, lodash에서 _ 를 import해준다.
debounce를 사용하여 0.5초 이내 추가 입력이 없을시에만 검색하도록 설정해준다.
검색 기능은 제목만 가능하다.(백엔드에서 미리 설정해놓았기 때문)
검색 단어 색상 변경
uuid 설치
yarn add uuid
yarn add --dev @types/uuid
제목에서 keyword를 기준으로 분리해준다.
keyword 앞뒤로 특수문자를 넣어 구분해주고, 그 문자를 기준으로 split해준다.
-> el.title.replaceAll("안녕", "@#%").split("@#$%")
split한 결과에 map을 적용시켜 keyword일때만 글자 색상이 변경하도록 style을 적용시켜준다.
