[클론코딩] 5일차 진행상황

오늘 한 일

 

1) api 수정된 부분 설명 듣고 블로그에 정리

2) 게시물 상세 페이지, 게시물 작성 페이지 서버와 연결 시도

-> 게시물 상세 페이지에서 댓글 작성이 안되고 있음.

TypeError: Cannot read property 'split' of undefined
    at module.exports (/home/ubuntu/temp/middlewares/auth-middleware.js:6:51)
    at Layer.handle [as handle_request] (/home/ubuntu/temp/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/ubuntu/temp/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/home/ubuntu/temp/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/home/ubuntu/temp/node_modules/express/lib/router/layer.js:95:5)
    at /home/ubuntu/temp/node_modules/express/lib/router/index.js:281:22
    at param (/home/ubuntu/temp/node_modules/express/lib/router/index.js:354:14)
    at param (/home/ubuntu/temp/node_modules/express/lib/router/index.js:365:14)
    at Function.process_params (/home/ubuntu/temp/node_modules/express/lib/router/index.js:410:3)
    at next (/home/ubuntu/temp/node_modules/express/lib/router/index.js:275:10)

-> 좋아요 / 취소가 DB에 반영 되고 있는 게 맞는 지 확인 해야 함.

 

해결한 오류

 

- 게시물 상세 페이지에서 댓글 작성이 안되고 있음.

: 백엔드에서는 content를 객체 타입으로 받아야 하는 데 string 타입으로 넘겨줘서 오류가 발생 했었다.

const CommentAddFB = (postId, content) => {
  return async function (dispatch, getState, { history }) {
    try {
      console.log(postId, content);
      const contents = { content: content };
      const response = await writeComment(postId, contents);

      dispatch(CommentLookUpFB(postId)); // 댓글 목록 다시 요청
    } catch (error) {
      console.log("AddCommentFB error");
    }
  };
};

 

- 좋아요 / 취소가 DB에 반영 되고 있는 게 맞는 지

: 반영은 되고 있었으나 프론트 단 코드에서 비동기 처리가 아닌 동기 처리로 진행이 되고 있어서 반영이 안됐던 것이다.

1) 게시물 상세 페이지 didMount 시 dispatch(postActiosn.PostDetailLookUpFB(postId))를 통해서 상세 페이지 정보를 불러온다.

2) 그럴 경우 서버에서 데이터를 가져오기 전에 const [like, setLike] = useState(postInfo.myLike ? true : false)가 실행 되기 때문에 값을 반영하지 못한다.

3) dispatch는 비동기 통신이기 때문에 like state에 값이 반영이 안된다고 판단하여 async, await를 사용하여 비동기 처리를 해줬다. (해당 작업이 끝날 때까지 대기 했다가 다음 코드 실행)

(dispatch 코드는 PostDetail.jsx -> Main.jsx로 이동 시켰다. 상세 페이지 버튼을 눌렀을 때 dispatch를 비동기 처리로 해주고 그 후 상세 페이지 모달이 열리도록)

  const detailOpen = async postId => {
    await dispatch(postActions.PostDetailLookUpFB(postId));
    // 동기 처리 -> 비동기 처리를 해줘야 상세 페이지 갔을 때 좋아요가 반영된다.
    setPostDetailModal(true);
  };

 

- 내가 쓴 댓글, 내가 쓴 게시물 삭제 버튼 띄우기

const ProfileModification = (userId, userInfoNew) => {
  return async function (dispatch, getstate, { history }) {
    console.log(userInfoNew);
    await editMyProfile(userId, userInfoNew);
    localStorage.setItem("userInfo", JSON.stringify(userInfoNew)); // ***
    history.push("/");
  };
};

  const userInfo = JSON.parse(localStorage.getItem("userInfo")); // ***
  // localStorage.setItem에 데이터가 JSON 형태로 들어가서
  // 가져다 쓸 때 JSON.parse()를 사용해서 JSON 형태로 바꿔줘야 한다.

 

+ localStorage에 JSON 형태 데이터 주고 받기 

https://velog.io/@hojin11choi/TIL-JavaScript-JSON-localStorage

JavaScript: JSON 데이터, localStorage