10.04 항해 22일차 TIL

이때까지 강의를 들으면서 한번도 숙제 해설 영상을 본적이 없었는데 이번 숙제를 하면서 도저히 답이 보이지 않아 해설 영상을 보며 숙제를 완성 하였다.

업데이트 기능을 하는 미들웨어를 구현해야 했는데 혼자서도 뭔가 될 것 같아서 계속 해보다가 5시간을 삽질 하고나서 더 하다가는 한달 뒤에나 과제를 시작하겠다 싶어서 결국 해설 영상을 보았는데 해설 영상을 보고 나서도 코드 자체가 이해가 되지 않아 한줄 한줄 나름대로 해석을 해가며 작성 해보았다.

달아놓은 주석이 100% 맞는다는 확신은 없지만 어느정도 코드의 흐름을 이해 하는데 도움이 된 것 같다..

그리고 느낀 점이 답을 보지 않고 풀더라도 해설 영상을 보며 조금 더 효율적인 코드를 설계하는 법을 배우는게 더 좋은 방법인 것 같다.

아래는 post를 업데이트 하는 미들웨어 코드를 해석한 것이다.

// update middleware
// 파라미터로 게시글을 구분하기 위한 post id와 업데이트한 내용인 post를 받는다
const editPostFB = (post_id = null, post = {}) => {
  return function (dispatch, getState, { history }) {
    // post_id가 없다면 return한다.
    if (!post_id) {
      console.log("게시물 정보가 없어요!");
      return;
    }
	
    // preview를 state에서 가져온다.
    const _image = getState().image.preview;
// findIndex를 사용하여 state에 있는 게시글 중 파라미터로 받은 post_id와 같은 id값을 가진 게시글을 가져온다.
    const _post_idx = getState().post.list.findIndex((p) => p.id === post_id);
    const _post = getState().post.list[_post_idx];

    console.log(_post);

    // firestore에서 post 콜렉션을 가져온다.
    const postDB = firestore.collection("post");
	
    // preview값이 기존에 있는 이미지와 같을 때(이미지를 변경하지 않음)
    if (_image === _post.image_url) {
      
      // postDB의 post_id를 가진 항목을
      postDB
        .doc(post_id)
      // post로 업데이트 한다.
        .update(post)
      //후처리가 끝나면 editPost함수를 호출하여 Post를 수정한다.
        .then((doc) => {
          dispatch(editPost(post_id, { ...post }));
        // 수정 후 홈으로 돌아간다.
          history.replace("/");
        });

      return;
      // preview값이 기존에 있는 이미지와 다를 때 (이미지를 변경 함)
    } else {
      //state에서 user의 uid를 가져온다.
      const user_id = getState().user.user.uid;
      //"images/uid_현재시간" 의 형식으로 참조를 만든다
      const _upload = storage
        .ref(`images/${user_id}_${new Date().getTime()}`)
      // 이미지를 data_url형식으로 storage에 추가한다.
        .putString(_image, "data_url");

      // data_url을 이미지 주소로 변환해서 가져온다.
      _upload.then((snapshot) => {
        snapshot.ref
          .getDownloadURL()
          .then((url) => {
            console.log(url);

            return url;
          })
        	//체이닝으로 url을 가져온다.
          .then((url) => {
           //post정보와 변경 된 이미지를 업데이트 한다.
            postDB
              .doc(post_id)
              .update({ ...post, image_url: url })
              .then((doc) => {
                dispatch(editPost(post_id, { ...post, image_url: url }));
                history.replace("/");
              });
          })
        // 에러 발생 시 alert를 띄운다.
          .catch((err) => {
            window.alert("앗! 이미지 업로드에 문제가 있어요!");
            console.log("앗! 이미지 업로드에 문제가 있어요!", err);
          });
      });
    }
  };
};