[LAB-4] 파이어스토어 query문 - 최신 날짜순으로 정렬하기가 잘 작동이 안됩니다

SeoMiYoung commented 1 year ago

질문 작성자

서미영

문제 상황

파이어스토어를 이용해서 데이터를 관리하고 있습니다. 저는 현재 마켓칼리에서 상품문의파트를 맡고 있고, 사람들이 상품문의글들을 등록하면, 그 문의글들이 가장 최근에 문의한 글이 가장 상단으로 오게 구현해야 하는 상황입니다.

firebase/firestore/useDetailCollection.js에서 onSnapshot함수를 통해 현재 컬렉션안의 문서들을 가져오려고 하고 있습니다. 저는, 위의 사진처럼 문의글은 inquiryData라는 컬렉션에서 date값을 기준으로 query문을 써서 날짜를 최신순으로 정렬하려고 했습니다. 그래서 다음과 같은 코드를 firebase/firestore/useDetailCollection.js에 넣었습니다. const sortCollectionRecentDate = query(collection(db, collectionName), orderBy("date", "desc")); 처음에는 잘 작동이 되나 싶었는데, 이상하게 중간중간 최신순으로 들어가지 않는 걸 확인할 수 있었습니다.

저는 firebase/firestore/useDetailFireStore.js에서

const initialState = {
  title: '',
  textarea: '',
  writer: '',
  date: Timestamp.fromDate(new Date()),
  state: 'pending',
}

이 코드에서 Timestamp를 통해 시간을 관리하고 있는데,

파이어스토어에 보면, 모든 document들이 date가 같은 시간으로 찍히는 걸 확인할 수 있었습니다 ㅠㅠ

제가 원래 생각하는대로라면 document들은 모두 다른 시간에 작성하였으므로 시간이 다르게 저장되어야되는데 왜그럴까요? 아마 그래서 query문을 써도, 최신순으로 나열이 되지 않은 걸로 예상하고 있습니다.

도움을 주시면 감사하겠습니다.

프로젝트 저장소 URL

https://github.com/SeoMiYoung/project-repo branch: feat/#96 상품문의에 접근 방법: npm start => 상품을 누른다(탱탱쫄면)

환경 정보

운영체제 정보: 윈도우 Node.js 정보: v18.14.0

SeoMiYoung commented 1 year ago

앗 야무쌤 해결되었습니다 ㅠㅠㅠㅠㅠ 답변 안해주셔도 될 것 같습니다!! 아마 팝업창에서 등록 버튼을 누를 때 마다 timestamp가 새로 찍히게 했었어야 했는데 그렇게 코드를 짜지 않아서 동일한 시간이 찍히게 된 것 같습니당 해결되서 답변이 오시기전에 이슈를 삭제하려고 했는데 삭제 방법을 못찾아서 댓글 답니다 ㅠㅠ

yamoo9 commented 1 year ago

@SeoMiYoung 님 스스로 문제를 해결 하셨군요! 대견해요! 😃

말씀처럼 새 문서 작성 또는 문서 수정과 같이 Firestore에 요청할 때 날짜 정보를 입력해야 합니다. 또는 Firestore가 제공하는 serverTimeStamp API를 사용해 서버의 날짜 정보를 저장할 수 있어요.

import { doc, updateDoc, serverTimestamp } from "firebase/firestore";

const docRef = doc(db, 'inquiryData', documentId);

// 서버의 날짜 정보로 date 필드 업데이트 
const updateTimestamp = await updateDoc(docRef, {
    date: serverTimestamp(),
});

SeoMiYoung commented 1 year ago

아~ serverTimestamp()라는 것도 있군요!!! 와!! 정말 다양한 방법이 있네요! 감사합니다!!

yamoo9 / likelion-FEQA