230901) Firebase Timestamp를 date 형식으로 바꾸기

1. 현재 포스트에 date 로 저장되어 있는 것

 

여기에 백 날 new Date(date)를 해 줘도 invalid Date가 뜰 뿐이었다...

그래서 정말 혹시 모르는 마음에 date.seconds 로 new Date() 를 해 줬더니 아래와 같은 결과가 나왔다

 

위가 date.seconds 의 결과, 아래가 new Date(date.seconds)를 한 결과이다.

 

엥? 근데 실제 저장된 날짜는 1970년도 1월 20년도에 작성된 글이 아니다... nanoseconds 를 해 보아도 비슷한 결과가 나온다... 이건 아닌 듯하다...ㅠㅠ

 

const postDate = post.date.toDate().toDateString()

 

결론은 해당 방법으로 해결했다...

post.date = 게시물의 date(TimeStamp 형식)

을 Date로 만들어 주는 것으로 해결할 수 있었다.

 

toDate() 와 toDateSring()모두 firestore에서 지원하는 메서드라고 한다...

지금 jsx로 문자를 출력해야 하는 상황이기 때문에 toDateString()도 사용해 주었고, toDateString()만 사용하면 안 되나?! 해서 toDate()를 삭제해 봤더니 에러가 뜨는 것으로 보아 혼자 사용은 어려운 듯하다!

 

위 코드를 콘솔로 찍어 보면 이와같은 결과가 나온다...

 

하지만!!! 이건 내가 원하는 데이터 형식이 아니다!!!!!!

나는 2023.08.29 | 18:38 과 같은 데이터 형식을 원한다!!!!!!!

그렇게 데이터를 변형하는 방법은 아래와 같다!!!!!!!!!!

 

// TimeStamp를 date형식으로 바꾸는 부분
const date = post?.date.toDate();

// date의 옵션을 따로 만들어 줌
  const dateOptions = {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  };

// time의 옵션도 따로 만들어 줌
  const timeOptions = {
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
    // hour12: true 로 표시하면 06:35PM(AM) 등으로 표시된다!
  };

// 앞에 소문자는 언어, 뒤의 대문자는 국가를 뜻한다! 
  const postDate = date.toLocaleString("ko-KR", dateOptions);
  const postTime = date.toLocaleString("en-KR", timeOptions);

그리고 이 뒤에 span 태그를 이용해 jsx 에서 postDate, postTime을 각각 출력해 주면 아래와 같은 결과물이 나온다 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

 

 

---

 

 

오늘도 잘 해냈다!