Day 31.

wisdomdom·2022년 2월 28일

백엔드에 createProduct를 하는데, 가짜 url을 넘기면 안된다!

그럼 createProduct에 들어가는 url은 어케 할까~

onClickSubmit을 할 때 createProduc 뿐 아니라 upload file을 실행(스토리지 저장-url 받아오기)
받은 url을 state에 담지 않고 변수에 담아서 보낸다

그럼 속도가 느리지지 않을까? (파일이 3개면 upload file을 3번하고 create까지 api 4번 요청해야하기때문에)
-> for문은 오래 걸리니까 promise.all 로 동시에 3번 다 보내고 기다리자!

엄청 긴 가짜 url이 나옴
-> 백엔드 갈 필요없이 미리보기로 보여주기

promiseall로 사진 여러장

Promise : 3가지 상태
pending / fulfilled / rejected

lazyLoading : 미리 다운 안받고 스크롤 내렸을 때마다 추가적으로 다운받음!

React-lazy load -> 라이브러리니까 쉽다~ 혼자서 해보기!

어려운 preload를 해보자

태그 컨트롤은 ref를 이용하자

배포하면
Page speed insight

Webp를 보통 사용 (압축률이 높다)

이미지 관련 라이브러리

React-drop zone
마우스로 드래그앤 드롭으로 파일 등록

50만~100만 넘어가면 공부할만하다

React-avatar-editor
https://www.npmjs.com/package/react-dropzone
사진 사이즈 조정해주는 에디터

가보자고~