230706 firebase 좋아요 기능 만들기

230706 firebase 좋아요 기능 만들기

내일배움캠프 선발대 수업 中 좋아요 기능 공부

 

좋아요 데이터를 별도 컬렉션으로 관리

좋아요 데이터를 하나의 컬렉션으로 따로 관리하거

각 문서는  'userId'를 가진 유저가 'postId'를 가진 글을 좋아요 눌렀다 라는 정보를 저장한다.

해당 문서가 있다면 좋아요를 누른 상태, 없다면 안누른 상태이다.

이렇게 좋아요 데이터를 관리하면 좋아요 상태를 업데이트 할 때 크기가 작은 해당 문서만 생성, 삭제하면 되고,

게시글 데이터를 건들이지 않는다.

{
postId:"pT4sE5e6Y2rrr7R8C0Um"
userId:"user2"
}

 

사용자가 좋아요를 눌렀을 때

먼저 해당 게시글을 해당 유저가 좋아요를 누른 상태인지 확인해야 한다.

postId와 userId를 조건으로 하여 해당 좋아요 문서가 있는지만 확인하면 된다.

단일 문서를 가져올 것이지만 쿼리를 사용해야 하기 때문에 getDoc가 아닌 getDocs()를 사용한다.

// 해당 게시글에 해당 유저가 좋아요를 누른 데이터가 있는가
const  q = query(
  collection(db, "likes"),
  where("postId", "==", postId),
  where("userId", "==", userId)
)
//문서 스냅샷 가져오기 
const querySnap = await getDocs(q); // getDocs는 기본적으로 배열을 가져옴
const likeDocSnap = querySnap.docs[0];

 

좋아요 버튼은 일반적으로 토글 버튼이다.

처음에는 좋아요를 누르면 좋아요 상태가 되고

좋아요가 되어 있는 상태에서 다시 누르면 좋아요가 취소 된다.

따라서 이미 좋아요한 상태라면 문서를 삭제하고, 없다면 문서를 생성하여 좋아요 상태로 바꾼다.

if (likeDocSnap?.exists()) {
// 이미 좋아요 문서가 있다면(좋아요 상태라면) -> 문서 삭제(좋아요 상태를 취소)
  await deleteDoc(likeDocSnap.ref); 
} else {
// 아직 좋아요 문서가 없다면(좋아요가 아닌 상태) -> 문서 생성(좋아요 상태로 변경)
  await addDoc(collection(db, "likes"), { postId, userId });
}

 

게시글의 좋아요 개수 구하기

해당 게시글의 전체 좋아요 개수는 likes 컬렉션의 postId 값이 일치하는 모든 문서의 개수와 같다.

const q = query(
  collection(db, "likes"),
  where("postId", "==", document.id)
);
const count = await getCountFromServer(q);
const likesCount = count.data().count