12-14

기존의 이미지 업로드 방식은 이미지의 크기가 커졌을 때 속도가 느리다는 점이 문제였는데 FileReader라는 기능을 통해서 이미지를 미리 볼 수 있다.
단, 미리보기 시 실제 파일이 업로드가 된 것은 아니다.

state를 이용해서 파일 업로드를 해주고

그 url을 이용해서 다시 이미지를 등록해준다.

약 3메가 크기의 사진으로 테스트 결과
6.5초정도 걸리는 것을 확인할 수 있었다.

같은 이미지 파일을 등록하는데 Promise.all 을 이용한 결과는

약 2초정도로 꽤나 성능이 개선된 것을 볼 수 있었다.

여러개의 파일을 등록할 때는 하나하나 await을 하기보단
promise all을 이용해서 등록하는 것이 시간적으로 이점이 있다.

promise all 뿐 아니라 preload나 lazyload를 활용해서 성능을 개선할 수 있는데

preload 값을 사용하면 무거운 이미지등을 로딩할 때 흰바탕으로 뜬다거나 하는 것을 방지할 수 있다. 말그대로 미리 불러와서 저장해두었다가 필요할 때 꺼내어 쓰는 것.

반대로 lazyload는 불필요하게 모두 같이 불러와 로딩속도가 느려지는 것을 방지할 수 있게끔 로딩해주는 방식이다.

사진파일 하나를 올릴 때에도 그저 올리는 기능만 생각하는 것이 아니라 성능개선을 어떻게 할 수 있을까를 생각해야 한다는 것을 배울 수 있었다. 이런 방법뿐 아니라 다양한 방법들을 사용해서 성능을 개선할 수 있을텐데 기능구현에만 신경 쓰지말고 성능에도 신경을 써서 개발할 수 있는 개발자가 될 수 있도록 하자!