이미지나 동영상은 구글 클라우드 스토리지에 따로 저장했었음

만약 등록을 하다가 뒤로가기를 했다면?

• 파일은 여전히 스토리지에 남아있게됨!!!!!
  => 스토리지 저장 비용 등 각종 비용이 발생하게됨!!!!

개선된방식을 배워보자

브라우저에서 자체적으로 이미지로 변환할 수 있는 fileUrl을 만든다. (아직 스토리지 저장되지 않았음, 백엔드에 왔다 가지 않아도 되므로 바로 미리보기가 뜸.)
파일은 state에 넣어놓고 등록버튼을 클릭했을때 파일을 스토리지에 올리고, URL을 스토리지로부터 받아와서 브라우저에 전달, 받은 URL을 이용해 createBoard해서 DB에 등록하기

업로드파일하고, 스토리지로부터 url받아오고 그 이후에 onClickGraphqlApi 요청되야함
result에는 이미지 URL이 들어가있음
미리보기는 FileReader로 만들어서 미리보기 해주고있음

• 스토리지에 저장된 이미지 주소: 다운받은 주소
• 파일을 변경한 이미지 주소 : 이미지 원본 (이미지를 URL로 변경한것에 불과함)

  
  data.target.result : 진짜 주소이지만 용량이 크므로 백엔드 전송 금지!!!
  콘솔창의 blob~ : 가짜 주소이고 다른사람 컴퓨터에서는 안보이므로 백엔드 전송 금지!!!
  💡백엔드에는 스토리지로 부터 받은 url을 전송해야함!!

💡
복습


Promise 앞에 await를 붙이면 Promise 내부의 함수 또는 api실행이 모두 끝날때까지 기다린 이후에 아래로 내려가서 함수를 실행시킨다.

• 두개는 같음!!!!
• await를 안쓰고 싶으면 .then(res=>console.log(res)); 와 같이 .then을 써주면 됨

💡LazyLoad
눈에 보이는 부분만 먼저 다운받고, 스크롤 내리면 보이는 부분은 나중에 다운받도록 하는것
react-lazyload 라이브러리 적용하면 쉽게 가능함!!!

💡PreLoad

유용한 라이브러리
https://www.npmjs.com/package/react-dropzone
https://www.npmjs.com/package/react-avatar-editor
https://www.npmjs.com/package/react-beautiful-dnd