코드캠프 Day 32

이제까지 슈퍼유전자인줄 알았던 내가 걸렸다
동기들에게 피해가 없길

오늘 배운 것

기존 이미지 업로드의 문제점인 storage에 찌꺼기가 남아 용량이 낭비되는 방식을 해결하기 위한 것을 배웠다.
https://velog.io/@owlsuri/%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-idw6vtxf

미리보기 성능을 올리기 위해서 fileReader()를 활용해 임시주소로 이미지를 보여주는 것이다.

그리고 등록버튼을 누르면 파일을 모두 업로드한 후 결과로 받은 배열과 함께 API를 요청한다.

이때 속도를 내기위해 promiseAll을 이용했다.
https://velog.io/@owlsuri/promise-promiseAll

이미지 성능 부분의 lazyload와 preload도 배웠다.

LazyLoad는 아래 위로 긴 페이지에서 이미지를 포함하여 모든 내용을 한 번에 받아 오는 것이 아닌, 스크롤을 내리면서 보여질 필요가 있는 부분만 추가적으로 받아오는 식으로 불필요한 서버와의 통신을 줄일 수 있었다.

PreLoad는 이미지를 사전에 미리 로드해 놓고, 필요할 때 이미 다운로드된 이미지를 보여줌으로써 렌더링 시간을 단축시켰다.

이미지 다운로드 성능을 높이기 위한 .webp 확장자와 PageSpeedInsights 를 활용한 사이트 속도 검증도 배웠다.

게시판 프로젝트 진행상황

이미지 업로드 방식 변경
마켓 댓글 CRUD