TIL - 7주차 화요일

목차

1. 기존 이미지 업로드 방식은 비효율적이야 >>> FileReader
2. Async-await를 for문에서 쓰면 안된다고?! >>> Promise.all
3. 이미지를 내가 원할 때 불러올 수 있대 >>> LazyLoad / PreLoad

1. 지금까지 이미지 처리 방식의 문제점

문제점
1) 미리보기 시간이 걸린다
2) 이미지 찌꺼기들이 쌓임 -> 유저가 미리보기 사진들만 올리고 게시글 등록은 안한 상태이면, storage에 해당 이미지들이 남고(흔히 찌꺼기 라고 부름), 스토리지 비용은 비용대로 들어가는 불필요한 상황이 생긴다.

개선 방안
1) 개선 방안: 자바스크립트로 브라우저에서 URL 만들기
2) 최종 게시글 등록할때, 혹은 상품 등록할때 uploadFile 선행을 하면, 찌꺼기가 쌓이는 일 X (createBoard & uploadFile 동시에 실행한다(동시에 묶는다!))

2. LazyLoad / PreLoad

LazyLoad 라이브러리

• react-lazy-load

이미지 라이브러리

• react-dropzone: (이미지 끌어다가 드랍하는 라이브러리)
• react-avatar-editor: (이미지 편집 라이브러리)
• react-beautiful-dnd: (드래그앤드 라이브러리 - 일정관리 같은 상황에 용이!!!)

내 사이트의 퍼포먼스 속도: google page speed insights