일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 실수
- GIT
- 메타태그
- JavaScript
- 리눅스 명령어
- ReactQuery
- open gragh
- 옵셔널 체이닝
- 리액트쿼리
- 동적메타태그생성
- 커스텀훅
- 3-21
- customHook
- CSS
- ContextAPI
- 오픈그래프
- 변수선언
- Today
- Total
나를 위한 기록
Firestore를 사용하여 댓글 카운트 구현하기 본문
Firestore를 사용하는 웹 애플리케이션에서 'post' 도큐먼트마다 댓글 수를 계산하고 포스트 커버이미지에 댓글수가 표시되도록 구현하는 것이 목표였다. 'posts' 컬렉션의 각 도큐먼트에는 'comments'라는 하위 컬렉션이 있고, 이 하위 컬렉션 내의 댓글 수를 각 'post'에 반영해야 했다.
시도1: 댓글 수 계산하는 함수를 만들어 매번 getPosts를 할때 마다 댓글 수 읽게 하기.
처음에는 'post'를 조회할 때마다 'comments' 컬렉션의 문서 수를 쿼리하여 댓글 수를 계산하는 함수를 만들었다.
그리고 updateAndFetchPosts 함수를 만들어 commentCount값을 가져오면서 posts도 읽어오게 했다.
이렇게 하고 나니 코드 양이 많아지고 복잡해졌다.
시도 2:getPosts 함수에서 updateCommentCount호출
updateAndFetchPosts를 사용하지 않고 posts를 읽어오는 함수(getPosts)가 실행될 때 updateCommentCount 함수를 호출해보았다. 그런데 이 방법은 문제가 있었다.
1. 성능문제: getPosts 함수가 호출될 때마다 이 함수가 실행되게 하면, 각 게시물의 댓글 수를 업데이트하기 위해 많은 수의 데이터베이스 읽기 및 쓰기 작업이 필요했다. 만약 게시물이나 댓글이 많아 지는 경우, 성능 저하 및 비용 증가가 생길 수 있다.
2. 비효율적인 데이터 처리: getPosts는 단순히 게시물 데이터를 조회하는 것이 목적인데, 댓글 수를 업데이트하는 로직을 포함시키면 함수의 기본 목적에서 벗어나게 된다. 함수 하나가 두 가지 일을 동시에 처리하게 되므로, 코드의 가독성과 유지보수성이 떨어지게 된다.
3. 데이터 일관성 문제: getPosts 호출 시마다 댓글 수를 업데이트하면, 댓글이 추가되거나 삭제된 후 getPosts가 호출되기 전까지는 최신 댓글 수가 반영되지 않는다. 따라서, 사용자에게 항상 최신 데이터를 제공한다는 보장이 없다.
시도3: Firestore의 increment 함수 사용
Firestore에서 제공하는 increment 함수는 숫자 필드의 값을 지정된 수만큼 증가시키거나 감소시키는 데 사용된다. increment를 사용하면 아래와 같은 이점이 있다.
코드의 간결함: increment 함수를 사용하면 복잡한 로직 없이 한 줄의 코드로 필드 값을 쉽게 조정할 수 있다.
성능과 효율성: 댓글 수를 서버 측에서 계산할 필요 없이, 단순히 필드 값을 증가시키거나 감소시키는 것으로 충분하기 때문에 서버의 부하를 줄이고, 읽기 및 쓰기 작업을 최소화한다.
데이터 일관성: increment 연산은 한번에 하나씩 수행되므로, 동시에 여러 사용자가 댓글을 추가하거나 삭제해도 데이터의 일관성을 유지할 수 있다.
결국 댓글이 추가되거나 삭제될 때 'post' 도큐먼트의 commentCount 필드를 업데이트하는 방식으로 전환했다. 이 방법은 Firestore의 increment 함수를 사용하여 댓글 수를 쉽게 조절할 수 있었다.
수정된 코드
'Today I Learned' 카테고리의 다른 글
[React] 카카오톡 공유하기 /미리보기 썸네일 이미지가 안보이는 문제 (0) | 2024.01.25 |
---|---|
React/ TypeScript 좋아요 기능 Optimistic Updates 구현하기 (0) | 2024.01.17 |
React Router의 <Link> 컴포넌트와 e.stopPropagation()의 상호 작용 문제 해결 (0) | 2024.01.12 |
프로젝트 SA1 (0) | 2024.01.04 |
'Check Chaek'프로젝트 KPT회고 (2) | 2024.01.03 |