FileReader
기존 이미지 업로드 방식은 비효율적
기존의 방식의 단점
1. 미리보기 시간이 걸린다.
2. 이미지 찌꺼기들이 쌓임
확인을 누르면 그 자리에서 파일이 자바스크립트로 주소를 만들어서 change시켜버릴 수 있으면 조금 더 빠르게 미리보기를 보여줄 수 있지 않을까?
=> 자바스크립트로 브라우저에서 URL만들기
실제 파일을 보내지 않고 자바스크립트에서 사진을 읽을 수 있는 URL을 만들어서 보여줄 수 있다면, 스토리지에 파일은 저장하지 않고 URL만 보여주면 최종등록하고 나간다고 하더라도 스토리지에 저장된 파일은 없으므로 효율적이다.
브라우저에서 만들어낸 URL이기때문에 다른사람들이 이미지를 보려면 DB에 저장이 되어야한다.
그러면 저장을 하기는 해야하는데 언제 저장을 할 것이냐?
=> 최종 게시물 등록 할 때(=상품 등록) & uploadFile 선행
미리보기는 브라우저에서 URL을 만들게 되고(임시 URL, DB저장 X) 등록하기를 눌렀을 때 실행되는 함수에서 upload를 하고 받은 URL로 등록을 한다.
버튼을 클릭했을때 uploadFile과 create가 동시 실행
=> 두 작업을 하나로 묶는다.
Promise.all
Async-await를 for문에서 쓰면 안된다?
각각의 프로미스를 실행할 때
- promise.all로 하나하나씩 확인하는 방법
배열에는 이 내용들이 담기게 된다.
결과
- 한방에 확인하는 방법
지금 같은 경우에는 for를 사용하면 더 느리다
(+)
LazyLoad / PreLoad
이미지를 내가 원할 때 불러올 수 있다?
특정 페이지에 들어와서 메뉴를 통해서 다른 탭으로 넘어가려고 할 때 버튼을 클릭하는 순간 몇 초동안 블락이 되어 안보일 경우가 있다.
그 이미지를 미리 다운받아둔다면 ? => PreLoad
처음에 다 받는 게 아니라 필요한 것들만 다운받아 놓고 그때 그때 필요한 것들을 받아오는 것 => LazyLoad
ex) 인터넷 홈페이지에 보여지는 것들만 미리 다운받고 스크롤을 내릴 때 보여져야 할 것들 다운받아옴
react-lazy-load
react-dropzone
여러 서비스에서 이미지를 끌어다 놓으면 이미지가 업로드되게 하는 라이브러리
react-avatar-editor
사진을 브라우저에서 원하는 형태로 돌리고 줄이고 편집할 수 있는 기능
react-beautiful-dnd
드래그&드롭하는 기능 만들기 (일정관리 등)
google page speed insights
사이트 속도가 얼마인지 측정할 수 있음 (모바일, 웹 가능)
배포 후 유용
이미지 용량 줄이기 : JPG -> WEBP 변환
