1. 구현하기

진행 상황

• 답변 조회, 답변 작성, 답변 삭제 기능
• 질문 삭제 기능
• 로그인 전 헤더 & 로그인 후 헤더 레이아웃
• 네비게이션 레이아웃

진행 예정

• 질문 수정 & 답변 수정 기능
• 사이드바 & 푸터 레이아웃

---

2. TIL

2-1. json server 댓글 api 구현

질문 밑에 댓글 보이게 하기

어제는 미리 질문 서버에 한 질문의 키 값으로 댓글 더미데이터로 넣어놨다.
그리고 하나의 질문을 useParams를 이용하여 id 값으로 접근해 get 요청으로 json server에 있는 데이터를 받아 온 후, data.comments를 map으로 렌더링 시켜주었다.
댓글이 조회는 되는 듯 싶었지만 post 요청을 보내면 질문의 댓글안에 들어갈 줄 알았지만 그냥 질문 서버의 또 다른 데이터로 들어갔다.

시도한 방법

백엔드 분들과 회의를 하고, 댓글에는 postId가 존재하는데 그것으로 같은 postId를 갖고 있는 댓글들을 get하고 post를 하면 된다는 것을 알게 되었다.
그래서 단순하게 아까의 방법에서 postId만 추가해봤지만 여전히 제대로 작동하지 않았다.

 "questions": [
    {
      "id": 1,
      "username": "kim",
      "title": "질문 1",
      "content": "본문",
      "comments" : [
      {   
     	"id": 1,
      	"postId": 1,
      	"username": "kimk",
      	"comment": "질문 1의 댓글 1",
        },
      {   
     	"id": 2,
      	"postId": 1,
      	"username": "kimk",
      	"comment": "질문 1의 댓글 2",
        }
      ]
    },
  ]

해결 방법

서버를 분리해보았다. 우선 댓글 서버를 분리하여 댓글을 map으로 렌더링 했던 것을 쿼리 파라미터를 사용하여 댓글 서버의 postid와 질문 서버의 id가 같은 것을 get으로 받아왔다.
그리고 post 요청을 댓글 서버로 보내는데 이때 작성한 댓글과 함께 postId로 id 값을 보내니 잘 적용 되었다.

 "questions": [
    {
      "id": 1,
      "username": "kim",
      "title": "질문 1",
      "content": "본문",
    }
  ],
  "comments" : [
    {   
      "id": 1,
      "postId": 1,
      "username": "kimk",
      "comment": "질문 1의 댓글 1",
     },
    {   
      "id": 2,
      "postId": 1,
      "username": "kimk",
      "comment": "질문 1의 댓글 2",
    }
  ]

// get
 const comments = useFetch(`http://localhost:3001/comments?postid=${id}`);

// post
  const handleSubmit = (e) => {
    e.preventDefault();
    axios
      .post('http://localhost:3001/comments', {
        postid: id,
        comment,
      })
      .then(() => {
        location.reload();
        window.scrollTo(0, 0);
      })
      .catch((err) => {
        console.log(err);
        toast.error('Post Failed!');
      });
  };

2-2. 렌더링 에러

map is not a function

댓글을 get 요청으로 받아오고 렌더링을 해주어야하는데 어제와 비슷한 방법으로 시도 했지만 not a function 에러가 발생했다.

{
  comments && comments.map((comment) => {
    return <Answer comment={comment} key={comment.id} />;
  });
}

시도한 방법

parser 적용 문제 때문에 comment의 state 초기값으로 {content:''} 를 주었는데 콘솔에 comment를 찍으니 초기값이 먼저 찍히면서 에러가 발생함을 알게되었다.
그래서 comment의 content는 빈 문자열이니 false라면 map을 실행하지 않으면 에러가 나지 않겠다고 생각했지만 여전히 같은 에러가 발생했다.
아무래도 false로 멈추지 않고 초기값 객체 그 자체를 렌더링 하려고 하는 것 같기도 했다.

{
  comments.content && comments.map((comment) => {
    return <Answer comment={comment} key={comment.id} />;
  });
}

해결 방법

그래서 강제로 초기 값은 빈 문자열이니 초기값은 빈 문자열이 아니라는 변수를 만들어 처음에 false를 반환하게 하여 바로 다음 식인 get으로 요청을 받아온 후의 데이터를 렌더링하게끔 해주었더니 에러가 해결되었다.

const blankComment = comments.content !== '';
{
  blankComment && comments.map((comment) => {
    return <Answer comment={comment} key={comment.id} />;
  });
}