240902

FACTS(사실, 객관) : 내가 한 일

어제 마친 기능이긴 한데

메인에서 댓글 갯수를 볼 수 있으면 좋겠다 싶어 기능을 추가했다.

.select(
  `*, userinfo:userId (
    username,
    profileImage
  ),
  Comment:Comment!postId (id)`
)

 

이렇게 Comment 테이블의 postId의 갯수를 가져오고

//댓글 갯수를 post객체안에 commentCount속성으로 넣어줌
const commentCount = data.map((post) => ({
  ...post,
  commentCount: post.Comment.length,
}));
setPosts(commentCount);

 

댓글 갯수를 post안에 속성으로 담아준다. 그러면 list.jsx에서 post.commentCount로 댓글의 갯수를 가져올 수 있게된다.

 

 

피드백을 받고 리팩토링을 시작했다. 

1.

useEffect(() => {
    //게시글 정보
    const fetchPosts = async () => {
      const { data, error } = await supabase
        .from("Post")
        .select("*")
        .eq("id", id)
        .single();
      console.log(post);
      if (error) {
        console.log("error =>", error);
      } else {
        console.log("post data =>", data);
        setPosts(data);

        // 작성자 정보 로드
        if (data.userId) {
          fetchAuthor(data.userId);
        }
      }
    };

    //작성자 정보
    const fetchAuthor = async (userId) => {
      const { data, error } = await supabase
        .from("userinfo")
        .select("id, created_at, email, username, profileImage")
        .eq("id", userId)
        .single();
      if (error) {
        console.log("error =>", error);
      } else {
        console.log("post data =>", data);
        setUserInfo(data);
      }
    };

    fetchAuthor();
    fetchPosts();
  }, [id]);

 

이렇게 나눠서 가져오던걸

useEffect(() => {
    //게시글 정보 & 작성자 정보 & 댓글 갯수
    const fetchPostAndAuthorAndComment = async () => {
      const { data, error } = await supabase
        .from("Post")
        .select(
          `*,
          userinfo:userId(
            id, created_at, email, username, profileImage
          ),
          Comment (id)`
        )
        .eq("id", id)
        .single();
      console.log(post);
      if (error) {
        console.log("error =>", error);
      } else {
        console.log("post data =>", data);
        setPosts(data);
        setUserInfo(data.userinfo);
      }
    };
    fetchPostAndAuthorAndComment();
  }, [id]);

 

한번에 가져오는 것으로 수정. 

뭔가 400 오류가 나는데 왜 나는지 모르겠다 화면에 문제되거나 제대로 표시되지 않는 정보가 있는건 아닌데 그냥 계속 에러가 뜸..

2. 

이미지 alt는 이미지를 설명하는 역할도 있지만 seo적으로 중요하기 때문에 반드시 아무렇게나 쓰면 안되고 직관적으로 잘 알아볼 수 있도록 적어줘야 한다.

 

3. 

import 부분의 양이 많을 경우엔 역할? 가져오는 내용을 분류해 정리하는 편이 가독성에 좋다.

예를 들면 가장 위에는 리엑트에서 제공하는 것 -> 컴포넌트 -> 스타일 기타등등.. 이런식으로

 

---

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

어렵다..

---

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

 

{post.length ?? 0} <= null병합 연산자

코드리뷰중에 알려주신 연산자인데 팀플이 끝나면 뭔지 더 파봐야겠다

---

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지