[1.16~1.22] 12주차 WIL

이번주에 TIL을 너무 못썼다..반성..ㅠㅠ

 

이번 주에는 TypeScript 이론을 배웠다.

실제로 TodoList를 만들어보았는데 프로젝트에 적용하려하니 아직 너무 어렵다..

일단 오늘까지 구현한건, Data 불러오는것까지,

그리고 timestamp 로 저장된 데이터를 불러와서 어떻게 가공해 보여줄 것인지에 대해 고민하고 찾아봤다.

firebase에 이렇게 데이터가 저장되어있다.

createdAt을 불러오니 정말 저대로 불러와진다.

그럼 어떻게 가공하느냐,

getPost라는 함수에서 데이터를 불러오는데, 여기에서 1차 가공해준다.

const getPost = () => {
    onSnapshot(q, (snapshot) => {
      const newPosts = snapshot.docs.map((doc) => {
        console.log('doc', doc.data());
        const newPost = {
          id: doc.id,
          ...doc.data(), // <- poststate
          createdAt: doc.data().createdAt.toDate(),
        } as PostState;
        // poststate로 들어올걸 확신해서 as를 사용함
        // as 사용하기 전에는 doc을 추론하지 못해서 계속 에러가 났음
        console.log('newpost', newPost);
        return newPost;
      });
      setPosts(newPosts);
      console.log('posts2', newPosts);
    });
  };

createdAt 을 보면, doc.data() 안에 createdAt을 가져와 toDate를 사용했는데, 이렇게 하면 결과는

저걸 slice로 잘라주기만 하면 된다.

근데 그냥 post.createdAt 만 불러오면 에러가 난다.

이렇게 데이터를 출력하려고 하면

이런 거지같은 에러가 난다.

구글링 해본 결과, JSON.stringify() 를 사용하면 된다고 해서 이렇게 해줬다.

결과는?

아주 잘 가공되어서 나왔당 헤헷

 

아직 제네릭에 대한게 이해가 잘 안되서..

타입스크립트가 얕은 지식으로 프로젝트를 하기에는...너무 엄격한 애라 머리가 아프다...