프로젝트를 통해 처음으로 파이어베이스를 사용할 일이 생겼다!
다양한 작업 중 이미지 처리 부분을 담당하게 됐고 크게 보면 3가지 일이 있다.
- 이미지 업로드
- 이미지 URL 다운로드
- 스토리지 트리거를 통한 리사이징
이번 포스팅에선 이미지 업로드를 하면서 생겼던 이슈와 어떻게 해결했는지 정리를 해보려 한다!
어떻게 이미지를 받을 것인가?
파이어베이스 공식문서를 보면 웹, 앱에서 직접 스토리지로 보내는 방법은 설명이 되있는데, 백앤드에서 처리하는 방법이 명시되있지 않아서 어려움이 있었다.
찾아보니 이미지 정보를 버퍼에 담고 스트림으로 스토리지에 업로드하는 방법이 있어서 사용하고자 했다. 여기서 몇가지 문제가 있었다.
firebase storage 사용
multer 사용불가
보통 file의 경우 form-data로 받게되는데, 노드를 사용할 경우 multer 모듈로 받아서 req.file을 사용한다. 하지만 나는 firebase functions, storage를 사용했는데, functions를 사용하면 multer를 사용할 수 없다. 이유는 이미 데이터가 들어오면 1차적으로 functions에서 미들웨어를 거치면서 데이터에 손을 대서 multer로 미들웨어를 거칠 때 정상적인 결과가 안나오고 undefined가 나오는 것이다.
이에 관한 내용은 하단 스택오버플로우에 정리가 잘 되있다.
multer 관련 스택오버플로우
그래서 정말 고생고생 개고생 하면서 온갖 욕을 다하면서 하지도 못하는 영어로 찾으면서 해결책을 찾았다.
해결책
상단 스택오버플로우를 보면 두 가지 방법을 제시한다. 직접 데이터를 파싱해서 사용하거나, busboy 모듈를 사용하는 방법이 있다. 그리고 추가적으로 데이터를 직접 파싱하는 것을 누군가 npm module로 만들어서 배포하신 분이 계셨다.
나는 최대한 빨리 작업을 마치고 싶다는 생각이 있었기에 제일 간단해보이는 사용자가 만든 모듈을 설치하고 미들웨어로 넣었다. 미들웨어를 거친 결과가 multer file과 똑같지 않았지만, 유사한 부분이 많았고 내가 스토리지에 업로드 하는 부분은 multer를 통한 예제였기에 해결이 가능했다.
정말 힘들었다.
따흑
