210829 트위터 클론코딩 중 메모

노마드코더의 트위터 클론코딩 강좌를 모두 수강하고

내가 개인적으로 조금 더 꾸며보려고 하는 중.

 

트윗을 작성하면 이름인 userObj.displayName과 nweetObj.createdAt을 출력하도록 하였다.

createdAt은 Date.now()로 정의되어 있기 때문에 저런 숫자가 나왔다.

 

Date.now()는 1970년 1월 1일부터 지금까지 지난 밀리초를 반환하기 때문이다.

이를 날짜 포맷으로 바꾸기 위해 Moment 라이브러리를 설치하였다.

 

moment(nweetObj.createdAt).format('YYYY/MM/D h:mm a')

내가 원하는 포맷으로 날짜가 출력된다.

 

트윗이 여러개일 때 랜덤하게 부여되는 doc.id에 따라 정렬되기 때문에, 시간 순서대로 정렬되도록 firebase에서 색인을 추가하고 orderby로 정렬하였다.

useEffect(() => {
    dbService.collection("nweets").orderBy("createdAt", "desc").onSnapshot((snapshot) => {
      const nweetArray = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setNweets(nweetArray);
    });
  }, []);

최근에 쓴 트윗부터 차례대로 보인다!

위에 author가 나오지 않는 트윗은 아직 변경사항을 업데이트하지 않은 깃헙페이지에서 작성한 것이기 때문에 author 필드를 갖지 않는다.

 

 

친구들이 테스트를 도와줬다ㅎㅎ

 

이메일로 가입할 경우 displayName이 null이기 때문에, useEffect()를 통하여 이름이 null이면 '이름이 없습니다'라는 String을 displayName으로 설정하도록 하였다.

 

트위터 클론코딩 끝 ~~~