32day - FileReader, useRef, LazyLoad/PreLoad

기존의 우리가 사용하던 이미지 등록 방식은 이러했다.

1. 브라우저에서 이미지 등록 버튼을 누르면 백엔드에 uploadFile로 전송되어 storage에 file이 보내진다.
2. 백엔드는 storage로부터 다운로드URL을 받아와서 다시 브라우저에 돌려준다.
3. 브라우저는 state에 이미지URL을 저장하고 있다가 게시글 등록 버튼을 누르면 제목, 내용, 이미지 이런 것들을 업로드해준다.
4. 백엔드에 createBoard로 들어가 DB에 저장된다.

여기에는 두 가지 문제점이 있다.

1. 미리보기가 느리다.
   파일이 백엔드로 가고 storage로 가서 저장이 된 후 백엔드에서 다운로드를 받아와 브라우저로 돌려준 후에 미리보기 화면에 이미지가 뜬다.
2. 이미지 등록만 하고 게시글 등록 화면을 꺼버리게 되면 storage에는 사용하지 않는 파일(찌꺼기)이 이미 저장이 되어버린 상태이다.
   이런 것들이 반복되면 storage에 저장된 이미지와 DB에서 사용 중인 이미지와 동기화 처리가 되지 않는다.

이런 문제를 해결하기 위해서 어떻게 해야 할까?

이미지 등록 버튼을 누르면 백엔드 uploadFile로 보내는 것이 아니라 브라우저 자체에서 이미지를 읽어들일 수 있게 임시URL을 만들어 빠르게 미리보기에 보여준다.
파일은 state에 담아둔다.
이렇게 하면 동시에 storage에도 찌꺼기가 남지 않아 두 가지 문제 해결이 가능하다.
하지만 DB에는 이미지 주소만 넘길 수 있는데 주소가 없다. 그래서 createBoard를 할 때 uploadFile도 하고 게시글 등록도 하게끔 만들어준다. 이렇게 하면 게시글 등록은 조금 느려질 수 있다.

이미지를 여러 장 올릴 때 for문을 사용하면 느리다. 그럴 때 사용하는 것이 promise.all이다.

이미지를 개별적으로 하나씩 보내면 총 6초가 걸리는 것을 확인할 수 있다.

Promise.all 안에는 배열이 들어가야 한다.

Promise.all로 한꺼번에 보내면 총 3초가 걸리는 것을 확인할 수 있다.

LazyLoad/PreLoad/Prefetch

PreLoad는 이미지를 먼저 load해놓고 메모리에 올려놓는 것이다. 이미지는 사이즈가 크기 때문에 실제로 다운로드 받아서 화면에 보여주려면 아무래도 속도가 느리다.
Prefetch는 미리 다른 페이지에서 보여줄 이미지를 다운로드받아서 저장해놓는 것이다.
LazyLoad는 스크롤을 내리면 나올 이미지를 그때 조금씩 받아오는 것이다.

이런 것들은 웹사이트 성능 지표에 영향을 미치게 된다.
(google page speed insights)

.webp

.webp는 이미지 용량을 작게 만들어주는 확장자이다.