220407_TIL

1. 파이어베이스 보안관련은

규칙 탭에 들어가서 작성하면 됨

2. 아이디 생성 라이브러리 uuid

3. 이미지(구조도 업로드)

4. 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
랜딩페이지
파이어베이스 페이지네이션 적용
삼항연산자, &&연산자