[내배캠 TIL ] 7주차 금요일 :: 뉴스피드 팀프로젝트

오늘은 팀프로젝트가 마무리 되겠지? 라고 생각을 했지만 결국 마무리 되지 않았다. 

새로운것들을 접목시키고 프론트 쪽도 추가하다보니 아마 시간이 더 걸리지 않았나 싶다.
오늘은 좋아요 버튼을 추가하여 버튼을 눌렸을때 숫자가 카운트 될 수 있게 했다.

card를 찾아 거기에 innerHTML을 추가하여서 

<button> 태그와 <span> 태그를 추가 해서 완료하였다.

cards.innerHTML += `

                      <div class="post-card">

                        <a href="/posts/detail/${post.postId}">게시글 번호: <${post.postId}></a>

                        <span>닉네임: ${post.Nickname}</span>

                        <span>카테고리: ${post.categoryList}</span>

                        <span>게시글: ${post.content}</span>

                        <button class="like-button" data-post-id="${post.postId}">👍</button>

                        <span class="like-count-${post.postId}">

                          ${post.Likes.length}

                        </span>

                      </div>

                      `

버튼을 누르면 post 모델에 담긴 로그인한 유저의 postId값을 받아 각 postId값으로 누적되게 해서 

옆에 숫자가 카운트 될 수 있게 만들었다.

결과물을 확인하자면,

이렇게 방금 누른 좋아요버튼 옆에 1 이 생성 된것을 볼 수 있다.

그리고 라우터에서는 API를 만들면서 DB에 담긴 userId와 postId를 받아오게 하면서 구현을 하였다.