게시글 작성 시 Firebase Storage 이미지 경로 설정(Quill)

프로젝트를 거의 마무리 해 가는 지금 돌이켜보면 Quill 에디터를 다루면서 이런 저런 고생을 많이 했던 것 같다. 이번에는 게시글을 작성하면서 이미지가 저장되는 storage 경로에 대해 고민한 흔적을 남겨보고자 한다.

❓이미지? 저장 됐으면 된거지🤣

Firebase를 처음 다뤄보고 Quill 에디터를 처음 사용하는 나에게는 게시글 DB 경로나 이미지 파일을 어떤 경로로 설정해서 저장해야할지에 대한 고민은 사치처럼 느껴졌다. 파일을 어떻게 저장하지? 그 파일은 어떻게 불러오지? 등 단순히 기능하게 끔 하는 것 조차 도전적인 과제처럼 느껴졌기 때문이다.

 

결국 게시글을 저장하는 최초의 로직은 다음과 같이 구현했다.

게시글 작성 중 이미지가 첨부되면 유저의 uid를 파일명으로 하는 storage 경로에 이미지를 저장한다.
storage에서 postImage/userUid/{파일명}

그리고 게시글 작성이 완료되면 게시글 관련 데이터를 feeds/articleId에 저장한다.
articleId는 게시글을 저장하는 단계에서 firebase firestore에서 제공하는 unique한 ID를 사용했다.

 

여기서 이미지를 DB와 유사하게 articleId에 저장하지 못한 이유는, 게시글이 저장되 전에 이미지가 업로드 되어야 한다고 생각했기 때문이다. 게시글이 저장되지 않은 상태에서는 게시글에 대한 데이터베이스가 생성되지 않은 상태이기 때문에 이미지를 사용자의 uid에 저장하게 되었다.

❗️방법은 언제나 존재한다.

위의 방법 처럼 이미지를 저장하는 storage 경로와 데이터베이스의 경로에 대한 관계가 게시글의 id로 유사하지 않다보니 여러가지 부작용이 발생했다. 특히 이미지 파일 조회, 삭제 등 파일에 대한 참조에 가장 큰 불편을 겪었고, 로직과 코드를 작성한 나도 이렇게 불편한데 협업에 있어서 이런 체계없는 방식은 말도 안된다고 생각이 됐다.

 

그리고 Firebase 콘솔에서 firestore와 storage의 공식 문서를 정독하며 게시글이 firestore에 저장되기 전에 게시글이 저장될 id를 생성할 수 있는 방법은 없을지를 확인했다. 다행히 firestore는 데이터베이스가 생성되기 전에 doc의 ID를 생성하는 기능을 제공해준다는 것을 확인했다. 정확히 말하면 아직 저장되지 않은 doc의 참조를 제공한다. 그리고 이 참조를 useState로 관리했다.

  // db의 'feeds'에 새로운 reference를 생성하여 state로 관리
  // 게시글에 대한 참조가 변경될 일은 없기 때문에 setNewFeedRef를 사용할 필요가 없다.
  const [newFeedRef] = useState(doc(collection(db, 'feeds')));

newFeedRef라는 참조를 통해 게시글이 저장되기 전에도 유저가 업로드한 이미지를 게시글 ID로 관리하며 이미지 파일에 대한 접근, 삭제를 할 수 있게 되었다.

// 게시글 경로
feeds/articleId

// 이미지 경로
postImage/articleId/{파일명}

프로젝트를 진행하며 마음이 급하다보니 우선 어떻게든 목표하는 기능을 만들어보자! 라는 생각으로 코드를 구현한 부분이 많았다. 하지만 설계와 문서화에 소홀할 경우 오히려 리팩토링에 사용하는 시간이란 비용이 더 늘어나고, 현업에서는 팀워크도 망치게 될 것이 분명하다.

 

스스로 나 자신에 대한 좀 더 높은 기준을 세우고 체계적으로 계획과 실행할 필요가 있겠다.