multer를 사용하여 이미지 업로드 및 불러오는 과정

개인 프로젝트를 진행하면서 간단하게 프로필과 배경 이미지를 등록, 저장하고 이를 불러와서 보여줘야하는 기능이 필요했다. 

보통 회사에서 Java로 해당 기능을 구현할때 랜덤한 path를 만들고 해당 경로에 파일을 저장하고 이와 관련된 정보를 DB에 insert하고 다시 불러올땐 저장한 DB에서 조회하여 보여주는 방식으로 처리했는데 

 

React에서는 multer라는 라이브러리가 있고 이를 많이들 사용하는 것 같아 조사 후 적용해봤다.

 

multer를 사용해서 대부분 프로젝트 내 public 폴더에 원하는대로 폴더를 생성하거나 하여 정적 파일로 업로드를 시키는데 나는 처음부터 이게 배포되었을때 경로가 바뀌게 되면 뻔히 문제가 생기는데 왜 프로젝트 내에 파일을 업로드할까 의문이었다. 

 

프로젝트 생성 시 default로 생성되는 public 폴더는 리액트 프로젝트를 배포하기 위해 패키징할 경우 하나의 파일로 압축되는데 이때 public 폴더는 압축되지 않고 형태를 그대로 유지하기 때문에 public에 저장되고 이를 불러오는 과정에서 경로가 일치하지 않는 일은 없을 것이라고 이해했다. 

 

multer를 사용하는 방법은 많은 블로그에 나와있고 이를 적용하는 것도 어렵지 않았다. 

다만 저장한 이미지를 다시 불러오는 것은 찾는데 조금 애를 먹었기 때문에 이 부분에 대해서 써 놓으려 한다. 

 

불러올때 사용할 파일명이나 필요한 정보는 각자 알아서 저장하는 로직을 구현하면 될 것이고 

불러올 필요가 있을 때 해당 데이터를 조회한 뒤 

 

public 경로가 필요한 부분에 

즉, img 태그 안에 src에 경로를 지정해 줄때 `${process.env.PUBLIC_URL}`을 사용하고 그 뒤에 public 폴더 내의 경로를 써주면 된다. 위 속성은 프로젝트에서 public 폴더의 경로를 찾아주는 역할을 하기 때문에 public 폴더의 경로를 찾을 때는 공통으로 적용된다고 보면 된다. 

 

결국 저 속성?을 하나 찾지 못해 이틀은 족히 고생했다. 해결되었으니 다음부터는 똑같은 실수를 반복하지 않아야지.