[미니프로젝트] 4일차

오늘 한 일

 

1) 피드 페이지 -> 내가 작성한 게시물 -> 내가 작성한 댓글이 보이는 문제 (해결) -> 받아오는 값이 객체 형태여서 map이 안돌아가는 문제 (객체 -> 배열로 바꿔서 해결)

2) 댓글 안써지는 문제 (기존에 있던 댓글에 내가 작성한 댓글을 합쳐야 하는 데 객체 형태라서 합치지 못함)

3) 댓글 쓸 때 작성한 날짜 보여주기 -> moment 패키지 설치

4) 아이디 중복검사

: 중복 검사 버튼 만들어서 검사가 되었는 지 안되었는 지 state로 저장해서 상태 알려주고 중복 검사 통과 못하면 버튼 안눌리게 처리 (disabled)

5) 아이디 중복 검사 추가 후 기존에 있던 회원가입 버튼 활성화/비활성화 코드 수정

6) 게시물 작성 시 이미지 업로드 하는 부분에서 axios로 서버에서 response를 받아온 후 .then에서 미리보기 함수로 이동하면 undefined 오류가 발생

7) 게시물 작성, 삭제 기능 구현 후 합치기

8) 게시물 상세보기, 피드 CSS -> p 태그 세로 가운데 정렬 하기 (line-height 사용)

9) 메인(Index.js)에서 상담하기 눌렀을 때 게시물이 없으면 /post로 이동하지 않고 alert 띄울 수 있도록 하기 위해서

 

기존 : history.push('/post') -> dispatch(postActiosn.randomPostFB())

수정 : dispatch(postActions.randomPostFB()) -> history.push('/post')

 

10) ... 처리, 자동으로 줄바꿈 처리

// ... 처리 (이때, width와 height를 지정 해줘야 함)
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",

// 줄바꿈 처리
word-wrap: break-word

 

해결 방법

 

1) 1번 오류 해결 방법은 아래 게시물에 적어 놓았다.

2021.12.09 - [항해 중/6주차 미니 프로젝트] - 객체를 배열로 바꾸는 방법

객체를 배열로 바꾸는 방법

 

2) post modules에 addCommentFB라는 미들웨어를 추가했고, 아래의 과정을 거쳐 해결함

• post modules에 있는 commets가 객체 형태여서 ...를 사용하지 못함.
• Object.values를 사용해서 배열로 만들어줌
• dispatch 할 때는 내가 작성한 댓글과 기존에 있던 댓글을 같이 보냄

// 미들웨어

const addCommentFB = (postId, comment) => {
  return function (dispatch, getState, { history }) {
    console.log("댓글 작성");

    const token = localStorage.getItem("user_token");

    axios
      .post(
        `http://3.37.36.119/api/comments/${postId}`,
        { comment: comment },
        { headers: { Authorization: token } }
      )
      .then((response) => {
        console.log("댓글 작성 성공");

        const _comment = {
          commentId: getState().post.comments[0].commentId + 1,
          comment: comment,
          createdAt: moment().format("YYYY-MM-DD"),
        };

        const list = Object.values(getState().post.comments);
        // post modules에 있는 commets가 객체 형태여서 ...를 사용하지 못함.
        // 그래서 Object.values를 사용해서 배열로 만들어줌
        // dispatch 할 때는 내가 작성한 댓글과 기존에 있던 댓글을 같이 보냄
        dispatch(addComment([_comment, ...list]));
      })
      .catch((err) => {
        console.log("댓글 작성 실패", err);
      });
  };
};

// 리듀서

[ADD_COMMENT]: (state, action) => {
  return produce(state, (draft) => {
    draft.comments = action.payload.commentList;
  });
},

 

3) 게시물 작성 시 이미지 업로드 하는 부분에서 axios로 서버에서 response를 받아온 후 .then에서 미리보기 함수로 이동하면 undefined 오류

: reponse 데이터를 담은 state 변수를 만들고, image 태그에 src 속성에 해당 state 변수를 바인딩 해서 이미지를 띄워 주었다.

 

현재 구현 상황 (후에 로고, 줄바꿈 처리 해줌)

 

+ 리액트에서 이미지 업로드 구현하는 방법

https://maruzzing.github.io/study/react/%EB%A6%AC%EC%95%A1%ED%8A%B8%EB%A1%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%8D%94-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0/

리액트로 이미지 업로더 구현하기