Twitter 클론코딩 6.Firebase : Data Delete, upDate

UI구현

트윗에서 바로 수정 삭제하는 버튼이 보여지는 것이 아니라 도트버튼을 클릭하면 Nav가 보여지고, Nav를 클릭하면 클릭한 값에 대한 화면이 보여지도록 UI를 만들어 보았다.

텍스트 수정까지는 실시간으로 이뤄지도록 작성했지만 아직 이미지수정은 하지 못했다.
진짜 트위터처럼 이미지도 최대4개를 넣고 싶지만 이건 부족한 부분을 채우고 다시 진행해보기로 했다.

Delete Tweet 트윗삭제

공식문서에서 알려준대로 코드를 작성했다.

const user = auth.currentUser;
const deleteTweet = async () => {
  const accept = confirm(
    '정말로 게시된 로켓을 파기합니까?'
  );
  if (!accept || user?.uid !== userId) return;
      try {
      await deleteDoc(doc(db, 'tweets', id));
    if (imgUrl) {
      const imgRef = ref(
        storage,
        `tweets/${user?.uid}/${id}`
      );
      await deleteObject(imgRef);
    }
  } catch (error) {
  	console.log(error);
  }
};

upDate Tweet 트윗수정

const onSubmit = async (
  e: React.FormEvent<HTMLFormElement>
) => {
  e.preventDefault();
  if (!user || editText === '' || editText.length > 150)
    return;
  try {
    const editRef = doc(db, 'tweets', id);
    await updateDoc(editRef, {
      text: editText,
    });
    // if(editimgFile){
	// 이미지를 수정했을 때 코드
    // }
    setEditText('');
  } catch (error) {
    console.log(error);
  } finally {
    callBack(false);
  }
};

회고

내 경우엔 부모요소에서 자식컴포넌트에 props로 데이터를 넘겨주고 자식요소에선 props로 받은 데이터를 활용을 해야했는데, 비슷한 이름의 컴포넌트들이 많다보니 A컴포넌트에 줘야할 데이터를 B컴포넌트에 전달하고는 왜 값이 출력되지 않는지 계속 찾아봤다. 이유를 알고나서는 굉장히 허무했다. 타입스크립트를 사용한 프로젝트이기 때문에 데이터들의 타입을 명시해줬어야했는데 이부분도 상당히 어렵게 받아들여져서 시간을 많이 소모했다.
이번 프로젝트가 종료되면 타입스크립트 공부를 꼬옥 해볼 작정이다.