TIL(20240713) [프론트 연결 및 구현 :카드 수정/삭제/댓글 생성]

---

카드 수정전

카드 수정 모달창

카드 수정 후

댓글 추가전

댓글 추가후

댓글 삭제

.then(comments => {

  const commentsContainer = document.getElementById('commentsContainer');
  comments.forEach(comment => {
    const newComment = document.createElement('div');
    newComment.className = 'comment';
    newComment.innerHTML = `
      <div class="comment-content">${comment.message}</div>
      <div class="comment-createdAt">${comment.createdAt}</div>
    `;
    commentsContainer.appendChild(newComment);
  });
})
.catch(error => {
  console.error('Error fetching or processing comments:', error);
  // Handle error gracefully, e.g., display a message to the user
});

타임리프를 사용해서 html 구현한 댓글 조회부분인데 계속 해서 콘솔에

Error: Expected an array of comments, but received something else

해당 에러가 떴고, 컨트롤러 쪽에서 응답형식을 바꾸고 나서 해당 에러가 발생한다는 것을 알게 되었다.

그래서 다시 반환 형식에 맞춰서

.then(data => {
    console.log(data); 
    const comments = data.data; 

    const commentsContainer = document.getElementById('commentsContainer');
    comments.forEach(comment => {
      const newComment = document.createElement('div');
      newComment.className = 'comment';
      newComment.innerHTML = `
        <div class="comment-content">${comment.message}</div>
        <div class="comment-createdAt">${comment.createdAt}</div>
      `;
      commentsContainer.appendChild(newComment);
    });
  })
  .catch(error => {
    console.error('Error fetching or parsing comments:', error);
    // Handle errors appropriately
  });

const comments = data.data; 해당부분을 추가해주었다. ……………………..ㅎㅎㅎㅎㅎㅎ