220407_TIL
1. 파이어베이스 보안관련은
규칙 탭에 들어가서 작성하면 됨
2. 아이디 생성 라이브러리 uuid
3. 이미지(구조도 업로드)
- file업로드
<input type="file" onChange={onChangeFile} multiple(여러개)/>
5. 파일업로드 라이브러리 설치 및 세팅
app.tsx에서 아폴로업로드클라이언트 설치 및 세팅
import { createUploadLink } from "apollo-upload-client";
const uploadLink = createUploadLink({
uri: "http://backend06.codebootcamp.co.kr/graphql",
});
const client = new ApolloClient({
link: ApolloLink.from([uploadLink]),
cache: new InMemoryCache(),
});
6. 파일검증
export const checkFileValidation = (file?: File) => {
if (!file?.size) {
alert("파일이 없다");
return false;
}
if (file.size > 5 * 1024 * 1024) {
alert("파일 용량이 너무 큽니다.(제한 5MB)");
return false;
}
if (!file?.type.includes("jpeg") && !file?.type.includes("png")) {
alert("jpeg파일 또는 png파일만 업로드 가능합니다.");
return false;
}
return true;
};
7. 파일 옆에 문자 없애기
기존 input을
<input
style={{ display: "none" }}
type="file"
onChange={onChangeFile}
ref={fileRef}
/>
display none을 주고 useRef를 줘서 버튼 하나 디자인해서 onClick으로 때려 박으면 됨
주말에 공부할 것
reduce map
css
랜딩페이지
파이어베이스 페이지네이션 적용
삼항연산자, &&연산자
Author And Source
이 문제에 관하여(220407_TIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@acwell94/220407TIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)