지난 이야기
좌충우돌 회원 가입 validation 만들기(2)
파일이 너무 큰데요?
어쨌든 로컬에서 분명 테스트를 진행 했을 때, 너무 잘 됐는데 production에서 안된 이유가 뭘까? 로그를 보니까 파일이 너무 크다는 경고 였다. Multer에서 파일 사이즈를 3Mb로 제한 한것이 원인이었다. 그래서 처음에 multer에서 에러를 넘겨 받으면 사용자에게 파일이 너무 크다고 경고 메시지를 던져주려고 시도를 했다. 하지만 이게 얼마나 구시대적인 생각인가 싶었다. 지금까지 사용자 경험 때문에 validation을 구현하고 있는데 갑자기 프로필 사진을 올리는데 용량은 사용자보고 해결하라고? 어처구니가 없는 생각이었다.
sharp, multer-s3-transform 사용하기
설계를 변경했다. 사용자가 용량이 큰 사진을 올려도 아주 작은 사이즈로 줄여주기로 했다.
how to resize prfile image multers3
검색을 하자 npm 패키지 sharp를 사용해서 이미지를 줄이는 방법이 많았다. 그리고 인터넷에 설명이 아주 친절하게 올라와있고, multer-s3-transform의 공식문서 맨 아래를 보면 어떻게 사용하는지도 나와있었다.
이미지를 바꾸는 방법은 여러가지가 있었다. 프론트에서 전환해서 S3로 올리는 방법과 웹 스토리지에 올린 다음에 그 파일을 transform하는 방법이 있었다. 나의 목적은 프론트에서 전환해서 서버로 올려주는 방법이었다.
참고한 블로그. 블로깅 해주셔서 너무 감사드립니다.
sharp를 활용한 image resizing + buffer 이해하기
위의 참조한 블로그에서 다른 여러가지 글을 발견할 수 있었는데, 당근 마켓에서 이미지 리사이징에 관한 블로깅을 읽게 되었다.
보면 이미지를 서버에 올리면 람다 트리거가 작동해서 이미지를 resize하는 방법이었다. 당근 마켓에서 지금은 다른 방법으로 전환했다고 한다. 그냥 참고 삼아서 읽어보았다.(복선)
정말 너무 느리다
드디어 테스트를 거친 후에 heroku에 업로드를 했다. 그러나...
너. 무. 느. 리. 다.
로컬에서는 순시간에 진행되던 과정이, 프러덕션 환경에서는 너무 느렸다. 심지어 로딩바가 구현된게 없어서 사용자가 버튼을 클릭하고 나서 회원 가입이 진행 되고 있는 건지 아닌지 조차 알 수가 없었다. 오. 마이. 갓.
이번에 드디어 끝낼 수 있을 줄 알았지만 또 다른 변수를 만나버렸고... 나는 두 가지 선택중에 하나를 해야한다.
그래 결심했어! 난....
❶ 웹 스토리지에 올린 다음에 파일을 transform하는 방법을 찾아서 구현한다. 일단 빠를 것이다. 왜냐하면 이전에 multer-s3-transform을 쓰기 전에 이미지 업로드 속도는 정말 빨랐기 때문이다.
❷ 아, 몰랑 그냥 로딩바를 구현하는 방법을 찾는다. 그래서 사용자가 느리더라도 진행이 되고는 있다는 것을 보고 기다리게 한다.
😂그런데 생각해보니까 좋은 서비스를 위해서는 둘다 필요하다는게 함정.
