이미지 업로드 용량 줄이기 browser-image-compression

이번에 첫 프로젝트를 배포하면서 PWA에 대해 공부하다가 알게 된 lighthouse! 크롬에서 제공하는 홈페이지 성능 측정도구?라고 합니다.

처음 배포하고나니 점수가 영 별로네요.. 근데 생각보다 부족한 부분에 대해 정확히 짚어주기 때문에 

잘 읽어보고 따라 하면 홈페이지 성능을 높일 수 있습니다.

우리 서비스의 가장 큰 문제는 performance 부분이었는데, 그 이유도 "이미지"가 대부분이었습니다.

properly size images는 실제로 유저에게 보이는 사진 크기에 비해 이미지 데이터가 너무 크다는 말 같습니다.

serve images in next-gen formats는 이미지 포맷을 적절하게 맞추라는 뜻 같은데, 저는 가이드에 따라 webp라는 파일로 바꿔서 사용했습니다. 검사에서 걸린 png파일을 전부 webp형식으로 바꾸고 사이즈도 줄여주니 모두 통과되었습니다.

 

유저 이미지 업로드 용량 줄이기 

위에서 보시다시피 유저가 댓글에 이미지를 첨부할 수 있는데, 처음에는 아무런 제어가 없어서 유저가 용량이 큰 이미지를 올렸을 때,

서버에 큰 이미지를 올리고 다시 다운로드 받아서 화면에 뿌려주는 데까지 무려 1초 가까이 나오던 것 같습니다. 아무리 큰 사이즈를 입력받아도 유저에게 보여주는 최대 픽셀은 375픽셀이기 때문에 이미지를 업로드할 때 용량과 사이즈를 줄여주기로 했습니다.

browser-image-compression 라이브러리를 사용했습니다.

 

일단 과정을 생각해보면, 사용자가 등록버튼을 눌렀을 때 압축을 시작하는 게 아니라 사진을 선택해서 onChange이벤트가 실행되면 바로 압축이 시작되어야 합니다. 그렇지 않으면 등록버튼을 누르고 나서야 압축이 시작될 것이고 사용자는 조금 버벅거린다고 생각할 수 있을 것 같습니다. 

 

onChange이벤트가 시작되면 FileReader를 불러와서 미리보기를 띄워주는 기능을 합니다. 이때 state로 관리 중인 files에 데이터가 들어갑니다. 

즉 useEffect의 dependency array에 files를 넣는다는 것은 사용자가 파일을 선택하는 순간 실행하는 것과 마찬가지가 될 것 같아요.

imageReady라는 state는 혹여라도 손이 엄청 빠른 사용자가 압축이 진행되는 와중에 등록버튼을 누르지 못하도록(에러가 아니라 이미지가 준비 중이라는 것을 시각적으로 확인시켜줄 수 있도록) 만들어두었습니다. 버튼 모양을 바꾸는 state로 활용합니다.

 

actionImgCompress라는 함수는 실제로 입력한 파일 정보를 가져다가 압축을 하는 함수입니다.

imageCompression 매소드에 우리가 받은 파일 정보랑 options를 만들어서 넣어주면 라이브러리가 압축된 파일을 내놓습니다.

아주 편해요.

이번에도 FileReader를 사용해서 base64로 변환을 합니다. 저것을 변환하는 이유는 ASCII가 데이터를 전달하는데 안전하지 않다고 합니다. 그래서 중간에 이미지가 깨지거나 잘리는 문제를 방지하기 위해 base64로 변환한다고 합니다. 변환된 값을 base64data라는 변수에 담아서 handlingDataForm 함수로 보냅니다. handlingDataForm함수는 실제로 백엔드에 보내기 위해 formData를 준비하는 함수입니다.

위 함수에서 받은 base64data를 콘솔에 찍어보면 아시겠지만 콤마를 기준으로 뒤쪽에 뭔가 의미 있는 값이 있어 보입니다. 

그 값을 위 함수와 같이 처리하고 나면 blob이 생깁니다. 그것을 파일객체에 담아서 state로 가지고 있다가 사용자가 등록버튼을 누르는 순간 가져다가 서버로 보내주면 됩니다. 

이제 압축파일까지 모두 준비되었으니 마지막으로 imageReady 를 true로 돌려놔서 등록버튼이 활성화되게 해 주었습니다. 

https://developer.mozilla.org/ko/docs/Web/API/Blob

Blob - Web API | MDN

폼데이터에 사진과 텍스트를 넣는 방법은 검색을 해보시면 아주 많이 나오니 생략하도록 하겠습니다.