onClickFetch 버튼 규칙 처리 3가지 방법
- 버튼 클릭 시 기다릴 필요가 없으면 void를 작성
- 기다려야하는 함수를 만들어 librarie나 utils에 작성하여 import해서 사용
export const wrapAsyncFunction = (func: () => Promise<void>) => () => {
void func();
};- eslintrc.js 파일에서 규칙을 꺼준다.
Firebase 사용 예시
Firebase에 저장한 데이터를 불러온다.
id가 필요할 경우 uuid를 import해서 사용할 수 있다.
-> v4 를 import해서 uuidv4로 사용
(매번 변경되는 값이라 좋은 방법은 아니다.)
uuid 타입스크리트 버전 설치
yarn add --dev @types/uuid
이미지 업로드
이미지 프로세스
input type="file" 로 설정해주면 이미지 등록이 가능하다.
사용자가 이미지 등록 버튼을 클릭하고, 내컴퓨터에 있는 이미지 파일을 선택해서 올리면 이미지 파일을 백엔드에 전달한다. (uploadFile이라는 API를 통해 이미지 파일이 전달된다.)
이때, 이미지 파일은 DB가 아니라 storage라는 다른 컴퓨터(클라우드)에 저장된다.
storage 는 컴퓨터이며 여러 컴퓨터들을 연결시켜 놓은 큰 용량을 담을 수 있는 데이터베이스이다.
storage에서 다운로드 URL을 백엔드로 보내주고, 백엔드에서 브라우저로 다운로드 URL을 전달해준다.
게시글을 작성한 후, 게시글 등록을 누르면 백엔드로 createBoard API가 요청되고, 이때 다운로드 URL도 같이 전달된다.
이 데이터들을 백엔드가 DB에 저장하게 되고, fetchBoard시 다운로드 URL을 img태그의 src 부분에 넣어주면 이미지가 보이게 된다. (다운로드 주소는 문자열)
파일 용량이 큰 이유
보통 text파일을 용량이 작지만, 파일은 보통 용량이 크다.
파일은 blob 라는 타입이기 때문이다.
(이미지를 확대하면 한칸 한칸이 다 숫자 데이터이기 때문에 용량이 크다.)
createUploadLink 라이브러리 설치
yarn add apollo-upload-client
타입스크립트 버전 설치
yarn add --dev @types/apollo-upload-client
이미지 업로드 예제
event.target.files?.[0]
-> 배열로 들어오는 이유
<input type="file" multiple /> 일 때, 여러개 드래그 가능
return <input type="file" onChange={onChangeFile} />;
-> multiple={true} 파일 여러개 선택 가능
apolloSetting부분에 추가해준다.
구글 api 주소를 같이 입력해줘야 이미지가 보인다.
<img src={`https://storage.googleapis.com/${imageUrl}`} />useRef
useRef는 HTML 태그에 접근을 도와주는 역할을한다.
useRef를 사용해서 input태그에 { display: none }을 주고,
따로 이미지 업로드 button을 만들어 클릭 이벤트가 설정되도록 할 수 있다.
이미지 검증하기
파일이 없을때 / 파일 용량이 5mb이상일 때 / 파일 확장자가 jpeg, png가 아닐 때 경고창을 띄우고 함수를 종료한다.
위의 코드를 libraries에 따로 파일로 만들어 준 후, import해서 사용한다.
이때, 각 조건은 false로 리턴해주고 전체 함수는 true로 리턴해준다.
그리고 import한 함수를 isValid라는 변수에 담아서 false일때만 return으로 함수를 종료시켜준다.
<input accept="image/jpeg, image/png" />
jpeg나 png파일이 아니면 파일을 선택할때 다른 파일들은 선택이 불가능하다.
새로고침시 이미지를 다시 보려주려면
이미지 주소를 브라우저 저장소(localStorage, sessionStorage) / DB에 저장해서 불러와야 한다.
