19일차 코드리뷰
사진주소를 입력할 fileUrl, el이 fileUrl에 들어간다.
온클릭을 하면 fileRef를 실행하게 된다.
온체인지 파일이 작동, 파일을 검증
사진의 인덱스
BoardWrite 프리젠터
BoardWrite 컨테이너
fileUrl이 있으면 버튼보여주고 , 있으면 사진 보여줘
궁금증 하나 ? 사진을 클릭해서 바꾸고 싶으면?
온클릭 업로드가 해당되어있기 때문에 같은 기능을 한다.
이렇게 실행하면 작동X
얕은복사로 기능하게 함
등록하기
필터로 빈 문자열을 걸러줌
edit페이지에서 fetch쿼리에 images추가
초기에는 사진이 들어가있지 않기 때문에 빈 문자열로 넣을 수밖에 없다.
디폴트 밸류를 어떻게 줄까?
useEffect를 활용
length가 있으면 이미지를 setFileUrls에 넣어줘 (초기값을 줌)
state가 바뀌니까 화면이 리렌더!
변경된 이미지가 있으면 추가해줌.
변경이 됐는지 안됐는지 어떻게 알까?
isChangedFiles 활용
원래의 사진 데이터와 현재의 사진 데이터가 다르면 사진을 바꾼다(업데이트)
수정한 내용이 없다면 경고창!
Database
Bard.find({title: "%점심%"})
점심이 들어간 타이틀을 찾아줘
그러면 위에서부터 찾는거예요
몇개찾냐면 10개를 찾습니다. (백엔드에서 10개 줬으니까)
100만개 있다고 하면, 위에서부터 점심이 있는 글들 10개를 찾아서 프론트에 넘겨준다.
100만개가 있는데 67만 2번째 점심이 있다고 하고,
83만번째에 점심이 있다고하면 띄엄띄엄 있게 되고 컴퓨터는 위에서부터 하나씩 찾게 됩니다.
이렇게 하게 되면 날을 새겠죠?
그래서 이 방법은 좋은 방법은 아닙니다. => 테이블 풀스캔
위에서부터 하나씩 찾는거예요. 다른말로 풀 테이블 스캔이라고도 합니다.
시간이 너무 오래걸린다.
구글 검색엔진의 시작점도 이것과 같습니다.
검색용으로 테이블을 하나 또 만든거예요.
점심을 검색하면 1,2번 딱 나올 수 있게.
구글 검색엔진의 시작점이 이렇게 만들어져 있다.
단어들을 쪼개서 만든다.
문장을 단어 단위로 자른다.
잘랐을 때 단위 하나를 토큰이라고 부릅니다.
문장을 토큰으로 쪼개는 과정을 토크나이징이라고 합니다.
토크나이징 한 결과를 가지고 검색을 하는 것을 역색인(역인덱스)이라고 합니다.
영어로는 invertedIndex
어디서 많이 볼 수 있냐면, 책 뒷 쪽, 단어별로 몇 페이지에 나와있는지 역색인 된 것을 볼 수 있다.
그것을 따라 만들었다.
이렇게 하게 되면 훨씬 빨리 찾아올 수 있다.
이것을 직접 만들 수 있고, 누가 검색하게 되면 여기서 조회를 해온다.
이런 목적으로 만들어져있는 데이터베이스가 있다.
엘라스틱 서치(Elastic Search)라고 부른다.
데이터베이스들은 서버컴퓨터에 저장을 하게 된다.
디스크에 저장을 한다는거죠 예를들어 C드라이브.
C드라이브에 저장을 하게 되면 장점과 단점이 나뉘는데
장점: 너무 당연하겠지만 껐다 켜도 데이터가 살아있다. 이런 데이터베이스를 디스크기반 데이터베이스라고 한다.
단점: 많은 사용자들의 데이터를 영구적으로 보관해야하기 때문에 저장도 상대적으로 오래걸리고 느리다. => 메모리기반 데이터베이스에 비해서
메모리기반 데이터베이스는 RAM(메모리)에 저장을한다.
쉽게 얘기하면 변수에 저장을 하는 것.
컴퓨터를 껐다 키면 날아간다는 단점이 있다. 영구저장 되는 것이 아님.
하지만 속도는 훨씬 빠르다.
예를들어 한글파일 만들어서 저장할때도 몇초라도 걸리지만 이것은 그렇지 않음.
ex Redis, Memcached
사용자가 많아지게되면 어느정도 자주검색되는 검색어는 뽑혀져 나온다.
그 검색 로그들 , 데이터들은 굳이 디스크에서 뽑아올 필요가 없다.
그러면 그것들은 메모리에 저장을 해버린다.
너무 자주 검색되는 애들은 메모리에 기록을 해놓는다.
이것을 검색 로그를 캐싱한다고 한다. (임시저장)
우리가 생각하기에 props.search하면 나올 것 같은데 뒷쪽에서는 복잡하게 이뤄진다.
캐싱에서 찾아보고 없으면 elastic에서 가져와서 프론트에 보여주게 된다.
백엔드와 소통하려면 알아두어야 할 내용!
Search / pagination
class/20-01-search
Debouncing / Throttling
디바운싱(디바운스)
특정 작업이 있을 때 특정 시간 내에 다시 그 작업이 반복되지 않으면 마지막에 한 번 실행한다.
중요한 포인트는 특정시간입니다.
특정시간을 2초라고 했을 때 2초 안에 발생하는 애들은 다 무시
그러고나서 마지막에 특정 작업을 하고 아무 작업이 없으면 그 때 한 번 실행되는 게 디바운싱이다.
특정시간이 지날 때까지 재반복이 안 일어날 경우 1번 실행
2초 안에 재반복이 일어났다? 그러면 실행이 안되고 계속 보류한다.
사전 요청들은 다 무시하는 거죠.
예) 버튼을 클릭하지 않더라도 특정시간이 지나면 결과가 나오는 자동검색
서치바를 입력했을 때 디바운스가 실행되어야한다.
바로 실행되는 것이 아닌 0.2초의 시간 안에 재반복이 없으면 실행!
쓰로틀링(쓰로틀)
쓰로틀링은 디바운싱의 반대.
먼저 한 번 실행한다. 그 다음 특정 시간 동안은 무시.
예) 무한스크롤(스크롤은 조금만 움직여도 계속 함수가 실행되기 때문에 쓰로틀링을 주어야 함)
Lodash
라이브러리 Lodash 사용한다.
라이브러리를 선택할 때는 사용률이 높은 것,
Docs 사용방법을 익히는 것이 중요하다!
사용률이 높은 라이브러리는 사라질 염려가 없기 때문에 Docs를 익히는 것을 추천한다.
yarn add lodash
yarn add @types/lodash --dev
keyword
문자열을 쪼개려면?
점심을 기준으로 쪼개기
실제 사용자가 #을 붙여서 작성할 수도 있는 가능성을 포함해서 쪼개기
검색 단어를 기준으로 시크릿 코드를 붙여서 쪼개기
yarn add uuid
yarn add --dev @types/uuid
19일차에 언급한 이미지 업로드 방식의 문제점 ?
먼저 스토리지에 파일을 올리고 등록하지 않고 도망가면 스토리지에 파일이 남아있다!
