본문 바로가기
code.camp

이미지저장 프로세스, 이미지 검증, 이미지 전송

by jyamin 2021. 10. 22.
728x90

7/28

실제 이미지가 저장되는 장소는 데이터베이스가 아닌 스토리지 저장소.
=> 데이터베이스에는 단지 스토리지에 접근할 수 있도록 부여받은 url이 저장될 뿐.

브라우저에서 사이트에 접속하면 이미지, 폰트 등은 제외한 html, css, javascript 파일들을 먼저 받아오게 된다.
그 이후에, html에 작성되어있는 이미지나 폰트 등의 url들이 요청되는 방식이다!
만약 이러한 방식이 아니라면, 사진이 많은 사이트는 모든 사진을 다운로드할 때까지 빈 화면만 보여지게 된다.

이미지를 전송했지만 문제점이 2가지가 있다
1. 화면에 이미지를 미리보기 하는데까지 시간이 오래걸린다.
=> 스토리지에서 url을 받아올 때까지 기다리기 때문이다
2. 이미지를 스토리지에는 넣었지만, 최종적으로 url을 게시물 등록 테이블에 전송하지 않으면 스토리지 용량만 낭비가 된다.

aws와 구글 클라우드 플랫폼
저장하는 공간
용량

 

연결됨

 

_app.tsx에 추가 => yarn add apoll-upload-client

추가
추가하는데 밑줄이 생김

yarn add -D @types/apollo-upload-client

설치
밑줄이 없어지고 이제 연결을 해야 함

 

ApolloLink도 추가

ApolloLink도 추가함
업로드링크가 아폴로링크의 타입이다~를 알려주는것
이제 정상 작동이 됨
클릭하면 code에 있는것을 클릭하게 되게 만들어야함
none하면 안보임
useState 만듬

 

배열 안에 넣기

기다려야되니 async await
state가 다 비어있음

 

 

게시물 등록 완료

728x90

댓글