날짜, 시간 표시에 대해

채팅 앱 작성시 고전했기 때문에 정리해 둔다.
메시지를 보낼 때 Cloud Firestore(firebase)에 timestamp를 저장하고, 그 timestamp를 꺼내서 포맷한 후 표시시킨다.

큰 전제로서,,,

○firestore에 timestamp 만들기

firebase.firestore().collection("messages").add({
      content: value,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(), //<-new Date()だとそのパソコンの時刻が使われるのでズレる場合を考慮してサーバーサイドの時刻を追加する
      // timestamp: new Date(),
    });

new Date() 는 클라이언트측(브라우저)의 시각이 되지만, 단말의 시각이 미치면(또는 고의로 어긋나고 있으면) 문제가 일어날 가능성이 있다.
serverTimestamp() 는 Firebase 서버 측에서 시간을 설정합니다.

※serverTimestamp()에 대해서

firebase.firestore.FieldValue.serverTimestamp()로 firebase에 timestamp를 만들고 있지만, 여기에서 조금 빠져 버렸다.
단지 페이지를 열거나 갱신하거나 하는 것만으로 날짜와 시간을 표시할 수 있지만, 메시지를 송신했을 때에 표시를 할 수 없어, 에러가 되었다.



이번 에러는 timestamp가 null이기 때문에 toDate()를 사용할 수 없다는 에러였다.
즉 timestamp가 null가 되어 있지만, 이것은 취득시에 재기록을 하는 것으로 회피할 수 있었다.
firebase serverTimestamp는 자료를 add 한 타이밍에 만들기 시작한다.
그래서 onSnapshot에서 데이터를 잡으려고하면,
데이터를 add ⬅serverTimestamp 작성 시작
데이터 소득 ⬅serverTimestamp 작성 도중
serverTimestamp가 null입니다 (오류) ⬅ 작성 완료
같은 흐름이 되어 있는 것 같습니다.

☆firebase.firestore.FieldValue.serverTimestamp() (을)를 사용하면(자), 곧바로 timestamp가 들어가는 것은 아니고, 타임 스탬프가 설정될 때까지, 조금 타임 러그가 있는 것 같습니다.

이를 피하기 위해 useEffect에서 데이터를 검색 할 때

timestamp: doc.data({serverTimestamps:"estimate"}).timestamp.toDate(), //この部分でfirebaseより取得（このように書くことで、serverTimestampが作成途中の時は見積もり時間を返してくれる）
//エラーが起きていたときにコード➜timestamp: doc.data().timestamp.toDate(),

하는 것으로 회피할 수 있었다.
doc.data의 인수에는 SnapshotOptions라는 옵션을 지정할 수 있으며, 이번에는 serverTimestamp가 작성 도중일 때는 견적 시간을 돌려준다고 하는 것이 되어 있다.
즉, timestamp가 null일 때는 견적 시간을 반환하고 timestamp가 만들어지면 그 시간을 표시해 줍니다.

○firestore에서 꺼내기

우선 firebase에서 데이터를 가져올 때 Date형으로 바꾸는 toDate()를 실행한다.

timestamp : doc.data().timestamp.toDate() // firebaseのtimestampの型からDate型にかえる

로 가져옵니다.
그 후 취득한 데이터는 Date형이므로 그대로 화면에 표시시킬 수 없습니다.
일단 문자열 유형, 요점은 문자열이어야합니다.
그 방법은 ↓로 정리한다. (string 형으로 포맷 된 날짜를 만드는 방법과 moment.js를 사용하는 방법)

실제로 표시

[이번 두 가지 방법으로 실현했다. ]

①포맷하면서 string형으로 변환

const formatTime = `${message.timestamp.getFullYear()}/${message.timestamp.getMonth()+1}/${message.timestamp.getDate()} ${message.timestamp.getHours()}:${message.timestamp.getMinutes()}:${message.timestamp.getSeconds()}`

문자열 형식으로 형식화 된 날짜를 만듭니다.

<span>{formatTime}</span>

로 표시해 준다.

②moment.js 사용

※moment.js 이외에도 사용할 수 있는 라이브러리는 다수 있습니다.

import dayjs from 'dayjs';

// 略
            <span>{dayjs(message.timestamp).format('YYYY/MM/DD HH:mm')}</span>