이미지 미리보기
Br의 FIleReader로 파일을 읽어내 가짜 URL을 부여한다. 상품 미리보기 등에 유용.
즉, 스토리지에 올라가지 않게 하는것인데, 그 이유는 게시글 등록시 이미지를 등록하고 ‘등록’버튼으로 submit을 하지않은 경우
외부 스토리지에는 파일이 올라가기에 성능, 비용 등이 낭비된다. 이런 상황을 방지하기 위해 FileReader로 부여받은 가짜 URL로 미리보기만 보여주는 식이다.
preLoad
사진을 보여주는 부분이 아니지만 사이즈가 크거나 필요한 사진을 미리 다운로드 해놓고 유저가 해당 사진이 포함된 탭으로 이동한 경우 미리 다운로드된 사진을 보여준다
LazyLoad
이미지가포함된 페이지에 들어가도 전부를 받아오는게 아니라 이벤트에 따라 (스크롤 이벤트 등) 추가적으로 다운로드 받아서 화면에 출력하는 방식
react-lazyload
라는 라이브러리를 사용해 쉽게 구현 가능
Promise.All
여러개의 쿼리를 하나 보내고 rsp를 기다리고 다음 과정을 진행하고 하는 방식이 아니라 전체 쿼리를 한번에 요청하고 모든 요청에 대한 응답을 받을때 까지 기다린 후 종료시키는 방식
모든 요청을 한번에 보내고 답을 기다리기 때문에 전체 실행 시간은 여러가지 요청 중 가장 시간이 긴 쿼리의 동작 시간과 동일하다.
즉, promise만 쓰면 A(3sec), B(4sec), C(5sec) 일 때, 12초가 필요하지만 promise.All로 요청할 경우 한번에 모든 요청을 보내기에 가장 동작 시간이 긴 C의 실행 시간과 동일한 런타임을 가진다.
fulfilled 완료
rejected 거절
pending 결과를 기다리는 중
확장자 (.webp)
파일의 압축율이 높은 확장자로 배포시에 속도측면에서 효율이 좋음
(jpg to webp 로 검색하면 쉽게 가능)
