클린 코드를 실천해 보자!

앗... 하기도 전에 ⚠️ 문제 발생! 문제 발생!

⚠️ 문제 발생!

문제

아니 이게 뭐야.. 분명히 prop으로 isOwner를 Tweet 컴포넌트에 보낼 때 tweet.creatorId === userObj.uid가 참인 경우에만 수정/삭제 할 수 있는 버튼이 뜨도록 설정해 두었는데 다른 유저로 로그인해서 들어갔는데도 수정/삭제가 가능하다.

이렇게 또 나의 삽질은 시작되었다.

해결

결론적으로 간단한 실수였다. 알고나니 너무나 머쓱타드..

📍 src/components/Tweet.js

// ❌
const Tweet = ({ tweetObj }, isOwner ) => { };

// ✅
const Tweet = ({ tweetObj, isOwner } ) => { };

prop을 이상하게 보내고 있었다는 사실...ㅠㅠ
이런거 실수할 줄은 몰랐기 때문에 거의 2시간은 삽질한 것 같다..ㅎ...ㅎㅎㅎ..
웃긴데 안 웃겨...🥲

클리닝 코드

Home.js 와 Auth.js에 있는 컴포넌트로 뺄 수 있는 친구들을 따로 빼주자.

• 홈에 있던 트윗 만드는 폼 부분을 TweetFactory.js 컴포넌트로 뺐다.
• 어스에 있던 로그인/가입 폼 부분을 AuthForm.js 컴포넌트로 뺐다.

프롭 안 빠지게 잘 보내주자! 다행히도 리액트가 친절하게 코드에 뭐 빠졌는지 알려준다.

getMyTweets 펑션 완성하기

아 저번에 프로필에서 사용자 본인이 적은 트윗만 가져오는 함수를 만들었는데 가져온 doc을 그냥 콘솔로그에만 찍어 두고 있는 실정이었다. 쉅 마무리도 다 되어가는 마당에 일단 화면에 출력이나 시켜보자 하고 home에서 했던 것 처럼 트윗을 가져와서 map메서드로 트윗을 하나 씩 나열하게 만들었다.

import Tweet from "components/Tweet";
import { authService, dbService } from "fbase";
import { updateProfile } from "firebase/auth";
import {
  collection,
  getDocs,
  onSnapshot,
  orderBy,
  query,
  where,
} from "firebase/firestore";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

//생략

 const [tweets, setTweets] = useState([]);
  //내 트윗 가져오기: map으로
  useEffect(() => {
    //snapshot은 쿼리 같은 건데 docs를 가지고 있다.
    //tweets은 페이지를 불러올 때 snapshot에서 나오는 거다.
    //따라서 setTweets()을
    const q = query(
      collection(dbService, "tweets"),
      where("creatorId", "==", userObj.uid),
      orderBy("createdAt", "desc")
    );
    const unsubscribe = onSnapshot(q, (snapshot) => {
      //모든 docs는 {} 오브젝트 반환하도록
      //아이디 가져오고, 그리고 나머지 데이터 전체 가져오기
      const tweetArr = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      //트윗어레이 확인해보자. 오케이 원하는대로 포맷된것을 확인할 수 있다!
      //console.log(tweetArr);
      setTweets(tweetArr);
    });
    return () => {
      unsubscribe();
    };
  }, [userObj.uid]);

//생략

return(
<>
    <div>
        {tweets.map((tweet) => (
          //Tweet을 컴포넌트로 만고 props으로 가져온다.
          //tweetObj 만들 때 각각의 tweet에 할당한 id 값을 div의 key에 넣어주자
          <Tweet
            key={tweet.id}
            tweetObj={tweet}
            isOwner={tweet.creatorId === userObj.uid}
          />
        ))}
      </div>
  </>)

참고: 기존에 작성해 둔 getMyTweets 펑션

기존에 작성했던 펑션의 경우 쿼리 결과 값을 getDocs()메서드로 가져오고 있고, 그걸 forEach()메서드를 사용해서 뿌리고 있었다.

 //내 Tweets 얻는 function 생성
  const getMyTweets = async () => {
    //트윗 불러오기
    //dbService의 컬렉션 중 "tweets" Docs 중에서, userObj의 uid와 동일한 creatorID를 가진 모든 문서를 가져오는 쿼리(요청) 생성
    //트윗한 순서대로 정렬하기
    const q = query(
      collection(dbService, "tweets"),
      where("creatorId", "==", userObj.uid),
      orderBy("createdAt", "desc")
    );
    //getDocs()메서드로 쿼리 결과 값 가져오기
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
      //✅ 콘솔에 찍기
      console.log(doc.id, "=>", doc.data());
    });
  };
  //내 Tweets 얻는 function 호출
  useEffect(() => {
    getMyTweets();
  }, []);

forEach() vs map()

둘다 배열(array)을 사용한다는 공통점이 있는데,

• forEach(): 배열 요소마다 한 번씩 주어진 함수(콜백)을 실행함, 즉 기존 배열을 변경
  그리고
• map(): 배열 내의 모든 요소 각각에 대해 주어진 함수(콜백)을 호출한 결과를 모아서 새로운 배열을 반환함