코드캠프 FE 19일차 - TIL(Image- Process,Storage,Validation)

space's pace·2022년 6월 2일
0
post-thumbnail

📔 학습목표

  1. 이미지 저장과정 >> Image- Process
  2. 이미지? 데이터베이스에 저장하면 안돼? >> Cloud-Storage
  3. 이미지 문제 >> Validation

지난 시간 포트폴리오 리뷰


레이아웃의 네비게이션 presenter 부분에
두 줄을 추가해서 바로 페이지로 이동할 수 있게 해준다.

![

자동으로 임의의 값을 키값으로 쓰는 법
: uuid (유니버셜 유니크 아이디)
{uuid4()}


파이어베이스로 게시판

파이어스토어 정렬방법, 검색,


이미지

스토리지도 컴퓨터 (용량이 좀 좋은 컴퓨터...)
이미지 동영상 등 저장하기 위해 용량이 크다
다른 회사(구글)에서 제공해주는 컴퓨터를 사용해서
이미지나 영상을 저장

<이미지 업로드 순서>
브라우저에서 인풋창을 통해 업로드한 파일을
백엔드 서버 uploadFile API로 요청한다
그럼 백엔드 서버에서 내가 올린 파일을 스토리지로 이동시킨다
스토리지에서는 내가 올린 파일을 다운받을 수 있는 url을 백엔드 서버로
보내고 백엔드 서버가 다시 브라우저로 url을 넘겨준다.
이미지 태그 src에 url을 적으면 그 사진을 다시 볼 수 있다.

이미지는 url이 스테이트에 들어간다.


패치보드로 불러온 데이터를 이미지로 화면에 보여줄 수 있는 거임.
이미지 파일은 데이터 베이스에 저장되는ㄷ게 아니다ㅏ
파일은 데이터 베이스에 옮길ㄷ만한 용량

blob 라지오브 오브젝트 큰 객체

블랍타입으로도 이미지나 영상을 넣을 수 있긴하지만 비효율적이다.

img 태그는 두번째로 실행됨
이미지 주소를 먼저 다운받고 그다음에 그리는 거기 때문에 두번째로 실행되는거

useRef

특정태그를 가리키는 변수
태그를 변수에 넣는다

원래의 버튼은 디스플레이: 논으로 설정해놓고
자동으로 내부를 선택할 수 있게 코드를 짜주면 됌
실제 내부적으로 재클릭 되는 거

  fileRef.current.click()

Validation

이미지를 보여주기 전에
이미지 크기가 적당한지, 확장자가 맞는지 검증해야 한다.

이미지 사이즈가 너무 작을 때

if(!file?.size) {
        alert("파일이 없습니다!");
        return;
      }

이미지 용량이 5mb 이상일 때

if(file.size> 5*1024*1024){
        alert("파일 용량이 너무 큽니다.(제한: 5MB)")
        return
      }

Board에 이미지 넣기

profile
블로그 이사 준비중!

0개의 댓글