[TIL] 2022-04-26

오늘의 TIL

1. 기존 이미지 업로드 방식은 비효율적이야! >> FileReader

• FileReader

  기존의 이미지 업로드 방식은 선택한 이미지를 storage에 보내고 url을 반환받아서 사용했다. 이 방식은 선택만하고 업로드 하지 않은(DB에 올리지 않은) 파일들도 전부 storage에 올라가게 되기 대문에 용량 낭비 문제가 있다.
  FileReader()의 readAsDataURL()을 이용하면 파일을 업로드(uploadFile API)를 요청하지 않아도 임시 url을 통해서 이미지를 보여줘서 storage 용량 낭비를 막을 수 있다.
  실제로 DB에 사진을 업로드할 때에는 이전과 동일하게 uploadFile을 요청해서 받은 url을 업로드해야 한다.

2. Async-await를 for문에서 쓰면 안된다고?! >> Promise.all

기존에 파일이 변경됐을 때마다(onChange) uploadFile API를 실행했던 것을 Promise.all을 이용하는 것으로 바꾸면 시간 효율성을 높일 수 있다.
Promise.all은 요청을 각각 보내는 것이 아니라 Promise들을 한번에 보내서 속도가 빠르다.

3. 이미지를 내가 원할 때 불러올 수 있대! >> LazyLoad/PreLoad

• PreLoad
• LazyLoad

  LazyLoad는 세로로 긴 페이지에서 이미지를 포함한 모든 내용을 한번에 받아오는 것이 아니라, 스크롤을 내리면서 보여져야 하는 부분만 추가적으로 조금씩 요청해서 받아오는 것으로, 불필요한 서버와의 통신을 줄여준다.
  PreLoad는 이미지를 사전에 미리 다운받아놓고, 요청이 오면 다운로드 되어있는 이미지를 보여줘서 렌더링 시간을 줄일 수 있다.
  이미지의 확장자인 webp로 사진을 변환하면 png, jpeg보다 압축률이 높아 더 좋은 성능을 보여줄 수 있다.

self-study

• 포트폴리오 이미지 성능 높이기(FileReader, Promise.all)
• 이미지 수정 기능 추가