TIL / 20210713

📌한 일

어제 firebase의 값을 못 불러오는 에러가 났었는데, 프로젝트를 붙들고 있다가 도저히 안풀려서, 프로젝트를 새로 만들어 진행했다.
그랬더니 에러가 풀렸다. 에러의 원인은 못찾았으나 아마 여러 변수들이 꼬인것 같다. 변수에 담긴 값을 정확하게 파악해야하는데 머릿속에 잘 정리가 안되어 있다보니까 이런 에러가 났을 때 해결하기 어려웠다.
앞으로 더 프로젝트가 복잡해지면서 변수에 담긴 데이터가 뭔지 잘 정리해야겠다.

오늘은 오래 고생했던 상세페이지로 이동하는 기능을 구현하였고,
게시글 수정 / 삭제 기능도 완성하였다.

수정하기와 삭제하기를 하기 위해서는 해당 게시물을 firebase DB에서 찾아야한다. 그래서 firebase DB에 add작업을 할 때 같이 넘겨줬던 id 값이 꼭 필요하다.

상세페이지에서 props.match.params.id를 이용해 URI로 넘겨진 id값을 불러와 해당 id로 dispatch 작업을 해주면 특정 게시물을 불러올 수가 있다.

이렇게하면 게시물 상세보기, 수정하기, 삭제하기가 모두 가능해진다.

const PostDetail = (props) => {
  const dispatch = useDispatch();
  const id = props.match.params.id; 

  React.useEffect(() => {
      if (post) {
          return;
      }
        dispatch(postActions.getOnePostFB(id));
    }, []);
  
  return (
    <React.Fragment>
    	<Grid padding="8px 0px">
        	<Text>내용: {post.comment}</Text>
        </Grid>
	</React.Fragment>
  );
};

export default PostDetail;

모듈페이지에서 하나의 게시물을 불러오는 getOnePostFB함수를 통해
id가 있으면 아래와 같이 firestore의 collection에서 그 게시물의 data를 불러올 수 가 있게 된다.

const getOnePostFB = (id) => {
  return function (dispatch, getState, { history }) {
    const postDB = firestore.collection("post");
	postDB
      .doc(id)
      .get()
      .then()
    });
  };
};

📌기록

고생했던 기능을 잘 완성해서 다행이다..