웹 파일 업로드 기능을 구현하는 것은 일반적인 텍스트 데이터를 처리하는 것과 비교했을 때, 꽤나 어려운 것 같다. 주로 텍스트 데이터를 처리한다면 객체 안에 string의 값이 담긴 데이터들을 전송하고 처리하는 작업일 것이다.
풀스택 입장에서 어떻게 파일을 요청하고 처리하는지 알아보자.
해당 글에서는 다음의 기술 스택 기준으로 설명하며, 개발 코드는 다루지 않는다.
- react
- react-hook-form
- express
- multer
폼 데이터 전송
프론트엔드에서 <input type="file" /> 태그를 사용하여 이미지를 form에 추가하고 서버에 전송을 할 수 있을 것이다. 여기서 주의할 점은 그냥 막무가내로 전송하면 서버측에서는 해당 이미지 데이터를 받지 못한다.
따라서 다음과 같은 조건을 갖추어야 한다.
이미지 파일이 바이너리 형태로 전송되어야 함
아래의 사진과 같이 "(바이너리)"라는 형태로 전송되어야 multer 라이브러리가 이미지를 받을 수 있다.
바이너리 형태로 안바껴요
내가 이미지 데이터를 전송할 때, 바이너리 형태로 전송이 가지 않아 시간을 꽤나 쓴 경험이 있다. 결과적으로, 나는 두 가지의 방법을 찾을 수 있었다.
-
onSubmit핸들러에서form생성자를 사용하여form을 생성하여 이미지를append한 후 전송 -
요청 헤더에
Content-Type을multipart/form-data로 설정후 데이터 전송
서버에서 이미지 받기
클라이언트 측에서 성공적으로 바이너리 형태로 데이터를 보냈다면, 서버 측에서도 해줘야 할 것이 있다.
express에서 req.body로 출력했을 때, 바이너리 파일을 인식하지 못한다. 따라서 multer라는 라이브러리를 사용해 줘야 한다.
multer는 바이너리 파일을 받아서 업로드 과정을 통해 서버 폴더에 이미지로 저장하거나 메모리에 저장할 수 있다. 여기서는 외부 저장소에 파일을 저장하기 위해 메모리에 저장하는 방식으로 설명하겠다.
외부 저장소에 이미지 저장
외부 저장소는 특별한 것은 아니고, 그냥 DB나 Cloud 서비스 등을 말한다. 나의 경우 Cloudinary 라는 이미지 최적화 클라우드 서비스에 이미지를 저장하였다.
multer로 처리한 바이너리 파일을 Base64로 인코딩 한 후, Cloudinary에 업로드를 하게된다.
DB에 이미지 url 저장
Cloudinary에 업로드 하는 코드를 사용하면 반환 값으로 url을 준다. DB에 이미지를 저장할 때는 다음과 같은 방법이 있다.
- Blob 데이터로 저장
- Base64 인코딩하여 저장
- 이미지 url로 저장
1번의 경우 DB 관리가 어려워 질 수 있고, 2번의 경우 Base64 인코딩을 하면 크기가 30% 증가하므로 저장 공간이 비효율적으로 차지한다.
일반적으로는 이미지를 url로 저장하는 것이 바람직하다. DB의 부담을 줄이고 이미지 처리를 쉽게 만들 수 있다.
이미지 최적화
웹사이트에 이미지를 다루는 서비스라면, 이미지를 로드하는 작업이 웹사이트의 성능의 대부분을 차지할 것이다. jpg, png 등은 꽤나 파일 크기가 크다. 따라서 압축 효율이 뛰어난 webp확장자도 같이 적용하는 것이 좋다.
결론
이미지 데이터를 바이너리 형태로 전송하여 multer를 통해 처리한 후, DB에 url형태로 저장하는 과정을 통해 이미지를 저장 및 처리 할 수 있게 된다.
해당 글에서 설명한 과정이 정답은 아니다. 단지, 독학을 통해 나의 개인 프로젝트에 적용된 흐름을 글로 풀어낸 것 뿐이다. 따라서 잘못된 내용이나 좀 더 기발한 흐름이 있다면 공유해주면 좋겠다..🐻!
