Image Upload & useRef

 

이미지 업로드 과정

1. 브라우저에서 파일을 선택하고(input type의 파일: input type 태그를 사용하게 되면 파일을 선택하게 되는 창이 뜸) 확인 버튼을 누르게 되면 데이터가 들어오게 되고 그 데이터를 변수에 저장할 수 있다.
2. 변수에 저장한 파일을 백엔드쪽 uploadFile이라는 API에 보내주게 되면 파일이 전송된다.(백엔드에선 받아온 파일들을 바로 DB에 저장하지 않는다.)
3. 요청 받은 파일들은 storage라는 공간에 저장요청을 보낸다.
4. storage에선 다시 백엔드로 저장된 파일에 접근할 수 있는 주소(URL)를 돌려준다.
5. 받아온 URL을 다시 프론트엔드쪽으로 보내준다. 프론트엔드에선 받아온 URL을 state에 넣고 input 내용들을[ex: myPicture(state), myWriter, myContents] 작성해준다.
6. 프론트엔드에서 작성된 데이터들을 백엔드 createBoard API에 요청을 보낸다. 이 때, [ex: myPicture(state), myWriter, myContents] 내용들이 백엔드쪽으로 받아와진다.
7. 이내용들을 DB로 보내게 되면 자유게시판에 내용, 사진(주소형태)등등 저장이 된다.
8. DB에서 등록된 결과를 다시 백엔드로 보내주고
9. 백엔드에선 이 결과를 다시 브라우저로 보내주게 된다.

Cloud Storage

종류

• AWS(Amazon Web Service)
• GCP(Google Cloud Platform)
• AZURE(MS:마이크로스프트)
  ☝ 클라우드를 제공해주는 업체여서 클라우드프로바이더라고도 부른다

클라우드란

• 컴퓨터 자체를 빌려주는 것(저장공간)
• 컴퓨터에서 우리가 사용할 수 있는 부분(쉘 등)을 빌려준다

Upload

설치

• yarn add apollo-upload-client
• _app.tsx 파일에서 'apollo-upload-client' import를 해올 때 타입스크립트 오류가 발생 할 수 있다
• yarn add @types/apollo-upload-client --dev 설치해주고 오류 해결!1._app.tsx 설정
  

  

  2. FileUpload
  

  

Validation

파일을 올릴 때 제약 조건을 걸어 줄 수 있다.
ex) 용량, 확장자, 파일종류 등

1. 하나의 컴포넌트로 만들고 재사용하기👍
   

   

   2. validation 컴포넌트 함수들이 false로 리턴되면 실행 종료, true로 반환되면 try~catch 실행
   

   

useRef를 활용한 input태그 숨기기

1. useRef값을 null 설정 해준 뒤
   
2. onClickImage 함수를 만들고 해당 div를 클릭하게 되면 input태그의 ref={fileRef} 변수가 실행이 되면서 브라우저상에 숨겨지게 된다!!