5주차 커리큘럼

DAY 20 목표

1교시 포트폴리오 리뷰

이미지 등록, 수정

사진 첨부

업로드를 컴포넌트로 나눠준다.

fileUrls 배열 안에 3개의 빈 문자열을 만들어준다.

인풋타입 file은 display: none으로 숨김처리하고,
fireRef로 uploadButton이 클릭됐을 때 ref로 클릭 시켜줘

onChangeFile: checkValidationImage 를 통해 파일 검증,
업로드 파일을 통해 백엔드에 요청, 스토리지 저장, Url 받아오기

그 결과값을 onChangeFileUrls를 props로 받고있다.onChangeFileUrls는 setState일 것 같은 느낌.

올린 사진과 index가 onChangeFileUrls 로 들어가게 된다.

BoardWrite.container

스프레드를 통해 원본을 가져온다.

디테일

filter를 사용하여 없으면 안보여지게 만들어 준다.
빈문자열은 제거해줘라는 filter

배열안에 ["강아지.jpg", "", ""] 이렇게 있었지만
filter를 이용하여 ["강아지.jpg"] 로 배열을 바꿔준다.

filter는 if문과 같이 true와 false로 판단을 하여

el 안에 문자가 있으면 true를 반환하고 빈문자열이면 false를 반환하여 el만 적어줘도 빈문자열은 제거 해준다.

수정하기

defaultValue를 어떻게 보여줄 것 인가.

edit페이지에서 fetch를 받아 props로 넘겨준다.

input태그에는 defaultValue라는 속성이 있었지만,
업로드 컴포넌트는 없다.

fileUrls 초기값을 등록된 값으로 준다.

useEffect를 사용하여 이미지의 길이가 들어온다면
setFileUrls를 이용하여 초기값으로 넣어 주었다.

useEffect를 쓰면 재랜더링이 되기때문에 성능면에서 좋지는 않지만 유지보수 측면에서는 깔끔하다.
useEffect를 쓰지 않으면 굉장히 복잡해진다.

객체나 배열은 비교해도 같다고 나오지 않기 때문에 문자열로 변경하여 두가지를 비교해 수정이 되었는지 판단한다.

강아지.jpg의 주소가 들어가있기 때문에 같지 않다.

그래서 문자열은 값자체가 저장되기 때문에 비교했을 시 true가 나온다.

2교시 검색과 페이지네이션

프론트엔드 입장에서는 예를들어 백엔드에서 만든 search라는 명령어를 사용하여 벡엔드로 보내주면 DB에서 가져와 브라우저를 refetch를 한다.

하지만, 백엔드에서는 복잡한 과정이 들어가기 때문에 그 과정을 보겠다.

table full scan

점심이라는 키워드를 검색한다고 하면, 백만개가 있으면 모든 데이터를 찾는데 까지 시간이 아주 오래 걸린다.
이것을 table full scan이라 부른다.

역인덱스 방식( inverted index )

구글 초창기에는 띄어쓰기를 통해 다 잘라 검색을 위한 table표를 한개 더 만들었다.

점심이라는 단어를 검색하면 2,3번 id를 바로 찾을 수 있어 속도가 굉장히 빨라졌다. DB: ( Elastic search ) 실무에서 ELK 스택이라 불린다.

단어를 token이라 하는데 단어 단위로 나뉘는 작업을 했다. tokenizing이라 한다.

메모리 기반 DB에 저장한다. (Redid) 임시저장한 것을 캐싱이라 한다.
안정성은 디스크기반보다 떨어지지만 속도는 빠르다.

사람들이 많이 검색한 것들을 캐싱에 저장을 해둔다.

검색은 리패치이다.

3교시 search debouncing

onClickSearch에 있는 refetch를 onChangeSearch 에 refetch한다.

하지만 네트워크 창을 보면 changeEvent가 될 때마다 fetch가 되어 많은 데이터가 들어간다.

onChange가 모두 입력되고 1초정도 쉴 때 fetch를 해주면 효율적으로 데이터를 불러올 수 있다.
이것을 디바운싱이라 한다.
디바운싱: 특정 시간을 기준으로, 해당 시간 내에 요청된 내용들은 무시

디바운싱 해주는 라이브러리:

import _ from 'lodash' 를 해준다.

타입스크립트

event.target.value를 넘겨주고 data라는 변수를 사용해 event값을 넘겨준다.

쓰로틀링

디바운싱: 기다리고 실행
쓰로틀링: 먼저 실행하고 기다리기

쓰로틀링 사용

무한스크롤 직접만들기: 스크롤을 내리면 fetchMore 실행

스크롤을 내리고 쓰로틀링을 실행시켜 추가적으로 더 내리더라고 안움직이게 막아주기.

검색한 단어 색 바꾸기

예를들어 철수를 검색하면 철수를 기준으로 앞뒤 3덩어리로 나눠준다.

키워드에 철수가 저장되고 나머지 값들을 맵으로 뿌려준다.
철수를 안녕하세요 저는 과 비교하여 false
철수랑 비교하면 true
입니다 반갑습니다~~ 랑 비교하여 false
가 되어 isMatched가 true가 될 때 빨간색으로 보여지게 된다.

철수를 기준으로 쪼갤때 split을 사용.

철수를 쓰면 짤리기 때문에 앞뒤로 시크릿코드를 붙여서
그걸 기준으로 쪼갠다.

replace를 통해 키워드 앞뒤로 시크릿코드를 넣어주고
split을 사용하여 쪼개준다.

검색기능
디바운싱
프론트에서 검색하는 것은 어렵지 않다.
전체적인 서비스가 어떻게 돌아가는지 알아야지 실무에서 의사소통이 빨라진다.