<07.30> TIL

이미지 저장 프로세스

• AWS : 가장 많이 사용하는 스토리지
• Google : 상대적으로 비용이 저렴해서 스타트업등 소규모 회사들이 많이 사용하곤 한다.
  => 스토리지에 이미지를 저장하는 순간 해당 이미지에 대한 url이 생성된다.

• 인풋타입을 file로 만들어 주었더니 파일을 추가할 수 있는 인풋창이 만들어졌다.

• 파일을 등록할 수 있게 onChange 함수를 만들어진 모습

• 업로드한 파일의 데이터를 console창으로 확인해보니 사이즈 등의 정보를 확인 할 수 있다.
  -> 파일 사이즈는 bite기준이다

파일의 확장자, 크기 등을 제한하는 방법

• 업로드 할 수 있는 파일의 조건을 설정해주었다.

• gql과 함께 사용하기 위해서 셋팅해준 모습

• 파일을 등록하기 위해서는 아폴로 추가 설정이 필요하다. (app.tsx)

• apollo 클라이언트를 설치해준다.
• yarn add -D @types/apollo-upload-client
  -> 타입스크립트 버전도 함께 설치해준다.

• app.tsx 파일에 설치한 파일을 import시켜주었다.

• 파일을 등록하기 위해서 app.tsx에 최종적으로 셋팅해준 모습

이미지 url을 state에 담아서 화면에 나타내기

게시판에 이미지 업로드 적용

• Query에 UploadFile API사용
  -> UploadFile API를 사용해야 스토리지에 파일을 저장 할 수 있다.

• input type file을 만들고 onChangeFile 함수를 만들어준 모습

• 등록하기를 눌렀을때 스토리지에서 불러온 이미지 주소를 같이 보내주도록 설정하였다.

• 파일 선택이라고 되어있는 input이 아닌 upload라고 되어있는 부분을 눌렀을때 파일을 등록 할 수 있도록 Ref를 이용하도록 한다.

• Ref를 이용해서 uploadbutton을 클릭했을 때 input 버튼이 작동하게 하였고, input 버튼은 display: none을 적용해서 화면상에 보이지 않게 하였다.