1️⃣ 첫번째시간

🎆01.이미지 업로드 포트폴리오 리뷰!

fileUrls는 배열에 비어있는 문자열 세개가 들어가있다
fileUrls를 map으로 돌려주었기 때문에 이미지 업로드 네모 박스가 세개 그려져 있는것임



공통 컴포넌트로 만들어 놓으면 필요한 곳에서 import해서 사용하기 편리할듯!!

눈에 보이지 않게 display:none해서 숨겨놓은 상태(디자인을 따로 할 수 없기때문)

UploadButton이라는 이름으로 가짜 버튼을 만들었음

useRef를 사용해서 가짜 버튼을 눌렀을때 fileRef를 이용해서 숨겨놓은 진짜버튼을 클릭해 줄 수 있도록 하였음

url을 onChangeFileUrls에 result라는 값으로 넘겨주고 있음
-백엔드에서 스토리지에 file 저장
-스토리지에서 백엔드로 url을 전달
-백엔드에서 프론트엔드로 url을 전달
-전달받은 url을 result라는 변수에 담고있음
-담은 result를 boardWrite컴포넌트의 setState에 저장하는 로직!

index도 onChangeFileUrls에 넘겨주고 있다..!
첫번째 업로드 박스의 index는 0 (그다음은 1,2..)



0번째를 강아지.jpg로 바꿔줘 라는 뜻

filrUrls의 첫번째에 강아지.jpg를 저장하자 라는 뜻

원본을 바꾸지 못하도록 fileUrls를 얕은복사 하였음

onChangeFileUrls 함수로 인해
결국 위쪽의 fileUrls의 useState가 바뀌게 됨!

겹치지 않는 id를 각각 줘서 key를 구분해줬음(uuidv4)

boardWrite컨테이너에서 Uploads01컨테이너로 props로 넘겨주고있음

강아지.jpg와 빈문자열이 el로 들어감
el이 uploads01의 프레젠터에

props.fileUrl이 있으면(강아지 사진이 있으면) 사진 보여줘, 없으면 버튼을 보여줘

업로드 된 곳을선택하든 upload버튼을 클릭하든 파일 선택창이 나타나도록 하기

🎆02.업로드 한 이미지 디테일 페이지에 보여주기

(fetchBoard에 images도 fetch해줘야 보여줄수있음)

이미지도 여러장 있을 수 있기 때문에 map으로 뿌려주고있음
각각의 el은 강아지.jpg, 빈문자열, 빈문자열임

빈문자열인 경우 진짜로 비어있는 이미지를 보여주고 있기 때문에 filter함수를 사용하였음

문자열이 없는(빈문자열) 애들만 filter로 걸러줘!
el이 빈문자열이 아닌 애들로만 필터링해줘

el !== ""이 true이면(이미지가 있으면) map이 실행될때 보여지게 되고
el !== ""이 빈문자열이면 false이기 때문에 map이 실행되어도 보여지지 않게 됨

🎆03.수정하기의 핵심은 defaultValue이다.

이미지를 fetch해줘야하고 그 data를 BoardWrite에 props로 넘겨준다!!!

초깃값을 강아지.jpg, 빈문자열, 빈문자열로 주는방식으로 진행해보았음
useEffect를 사용함!

useEffect로 시작하자마자 초깃값으로 넣어주었음
초깃값에 defaultValue를 넣어준상태
spread(...)로 얕은복사 한 것도 원본을 바꾸면 안되기 때문에 한것임

파일이 변경됐는지 안됐는지 체크하는 방법

["강아지.jpg","",""]와 ["강아지.jpg","",""]는 눈으로는 같아보여도 다르다는 결과가 나오게됨 (서로간의 저장된 ⭐️주소⭐️는 다르기때문!!!!!!)

그래서 전체를 문자열로 변환한 뒤 같은지를 비교해야함

2️⃣ 두번째 시간

🎆01. 검색 기능

(구글의 초창기 버전의 검색 원리역인덱스 방식단어를 하나하나 쪼개서 또 다른 테이블을 만들었음)

역인덱스 방식으로 테이블을 만드는 것을 대체하기 위해 ElasticSearch방식이 나타나게됨

Redis방식은 컴퓨터를 껐다 켜면 데이터가 다 날아가지만(=>메모리방식)
속도는 디스크방식보다 훨씬 빠름 (임시저장_캐싱을 하기때문)
사용자가 많이 검색하는 검색어를 캐싱해놓는다!

🎆02. 검색 기능 (검색은 reFetch다!!!!!)

"점심"을 입력하고 검색버튼을 클릭 하면 "점심"결과의 1페이지가 10개 나와야하고 그다음 2페이지, 3페이지....를 보여줘야 함

3️⃣ 세번째 시간

디바운싱? _ 바운싱(통통 튐)을 못하게 하기!

이런 방식을 적용하게 되면 onChange일어날때마다 매번 query를 날리면 백엔드에 엄청난 과부하게 발생하게됨!!!
=>그래서 debouncing을 해야함!!!
=>특정 시간을 기준으로 해당 시간 내에 요청된 내용들은 무시 (ex_1초 이내에 요청이 들어온다고 하면 그 요청은 무시됨)

디바운싱 기능을 적용했더니 모두 입력한 "다음" 한번만 실행되도록 작동한다!!!!

쓰로틀링(쓰로틀_디바운싱과 대비대는 개념)? ==>"먼저 실행되고 특정 시간동안 재실행 되지 않고 기다리기"

디바운싱:입력하고 기다리고 있으면 그때 요청됨!
쓰로틀링:입력하는 순간 그때 요청되고 좀 지나면 요청X

단어 단위로 쪼개지고 map으로 뿌려짐

1.안녕 하세요 저는
2.철수
3.입니다 반갑습니다~~~

뿌려질때마다 검사해서 el이 keyword와 같은지를 검사해서, 같다면 isMatched가 true가 됨 => true면 빨간색, false면 검정색이 되게됨

(시크릿코드를 사용한 모습)

✔️ 결론

1.먼저 쪼갤 기준이 되는 대상을 시크릿코드로 replace
2.그 후에 시크릿코드를 기준으로 split하기