[TIL] firestore 이용하기

 

이번 팀 프로젝트를 시행하면서 나는 댓글 부분을 맡았는데 제일 어려웠던 부분인 각각의 피드에 댓글을 달 수 있는 기능을 구현하는 것이었다.

이번 프로젝트에는 파이어베이스를 사용했는데 파이어베이스만의 데이터 코드가 따로 있는 부분이 있어서 혹시 그런 코드가 따로 있나 찾아보았다. 

처음엔 "댓글 기능은 단순히 useParams로 id를 받아와서 그 아이디마다 컬렉션이나 필드를 나눠주면 되겠다고 단순히 생각만 하고있었는데, 이게 생각보다 오래걸릴지 몰랐다.

단순히 내가 생각만했던 부분을 코드로 실현하고자 했던 부분이라 사용자가 늘어나고 데이터가 커지면 좀 비효율적일수도 있겠다는 생각이 들었다. 

 

feed의 id를 가져오려고하니 파이어베이스에서는 Realtime Database와 firestore를 고민하다가 NoSQL 데이터베이스로 실시간 업데이트를 지원하는 데이터 베이스였다. 

변경사항이 발생할 때 실시간으로 업데이트된다고해서 우리는 수정도 같이 구현해야하기에 firestore를 사용했다.

 

또한 컬렉션안에 하위로 필드를 생성해줄 수 있었지만 아직 페이지가 만들어지기 전이여서 가장 쉬운방법인 하나하나의 페이지 마다의 id값들을 가져오는것이 더 빠르겠다는 생각이 들었다.  

 

댓글 id를 가져오기 위해 Router에 먼저 써놓고

 <Route path="/comment/:id" element={<Comment />} />

 

 

이렇게 postId를 설정해서 map을 돌리니 feed하나하나의 아이디값을 받아올 때 이 코드를 썼어야했다.

 

<CommentStyle to={`/comment/${e.postId}`}>

 

 

addDoc 함수는 newComment를 전달해 Firestore에 새로운 댓글을 추가하는 함수인데 이 작업이 완료되면 docRef 에 새로 추가된 문서에 대한 참조가 포함된다.

 

 

	const docRef = await addDoc(collection(db, "comments"), id);

 

처음엔 useParam을 적고나서 밑에 이렇게 적었었는데 안되서 어떻게할까 찾아보니 템플릿 리터럴을 사용해 동적으로 collection 이름을 생성해준다고 했다. 

 

 

comments로 만들어서 db에 넣었었는데 이 postId를 어떻게 적을까 하다가 

try {
    const docRef = await addDoc(collection(db, `comments-${postId}`), newComment);
    setEditCommentId(docRef.id);
    console.log("이 comment의 아이디는 : ", docRef.id);

 

이렇게 comments-${postId} 로 하니까 url에 찍히는 postId값에 따라서 다르게 들어왔다.

 setEditCommentId(docRef.id)는 댓글이 새로 추가될 때 Id가 설정되는 것이다.

 

이렇게해서 새로 추가된 댓글의 데이터를 Firestore에 추가할 수 있고, 추가된 댓글에도 id가 부여됐다.

 

firestore를 확인해보니 

 

이렇게 comments뒤에 postId값들이 잘 들어온것을 볼 수 있었다.

이렇게하니 확실히 수정할때와 삭제할때 진짜 편리했고, 아직 만들어지지 않은 코드에서 가장 빠르게(?) 가져올 수 있었다.

하지만 게시물 하나가 생길때마다 하나씩 데이터가 늘어나서 DB를 많이 차지할 수 있겠다는 생각이 어렴풋이 들었다. 

지금은 프로젝트이지만 나중에 사용자들이 많아지는 경우에는 이 경우보다는 필드안에 하위로 추가하는것이 더 좋겠다는 생각이 들었다.