[TIL] 240417 (미니 프로젝트 카운트 기능 제작)

솔·2024년 4월 17일

JavaScript TIL

TIL

목록 보기

15/268

🥞 오늘 한 일

팀 소개 페이지 미니 프로젝트
- 댓글 좋아요 카운트 기능 제작
- 메인 페이지 헤더 html 및 css로 재제작 (폰트 다운로드 후 적용)
- 메인 페이지 About Us 파트 css 수정
- 메인 페이지 프로필 카드 css 수정 및 호버 시 커지는 기능 추가
- 팀원 소개 페이지 내 페이지 디자인
- 각자 만든 html을 메인 페이지인 index.html로 병합 및 디테일 수정
- reset.css 제작 및 공유
그 외 한 일
- ZEP 자리 지정에 대한 팁 공유

🍽️ 문제 해결

팀원 소개 페이지 댓글 좋아요 카운트 기능

문제

팀원 소개 페이지에서, 각 댓글마다 좋아요를 눌러 카운트가 올라가게 하는 기능을 구현해야 했다.
우선 팀원분이 만들어두신 코드를 토대로 기능을 작성해나갔다.

let heartBtn = document.getElementById('like');

heartBtn.addEventListener('click', function () {
  heartBtn.classList.toggle('active') // 이미지 컬러 변경 기능
  const likeNum = heartBtn.nextElementSibling; // heartBtn 다음 요소가 카운트 될 숫자 요소
  likeNum.innerText= +likeNum.innerText+1 // 1씩 카운트
})

이 때 처음에는 nextElementSibling이 아닌 nextSibling을 썼는데, 제대로 요소가 가져와지지 않았다. nextSibling은 공백이든 텍스트든 가리지 않고 다음에 있는 것을 가져오고, nextElementSibling은 Element(요소)만 가져오는 것이기에 nextElementSibling을 써야한다는 걸 알았다.
카운트 기능은 잘 되었지만, 맨 위에 위치한 댓글 하나만 카운트 기능이 적용된다는 문제점이 있었다.

해결

일단 댓글은 하나가 아닌 여러 개이기 때문에 id가 아닌 class로 해야한다고 생각이 들어, 전체 댓글에 class를 주고 해당 class를 전부 가져올 수 있도록 했다.

const heartBtn = document.querySelectorAll('.like')

그러고 나니 함수 실행 시 오류가 났다. 댓글을 전부 다 가져온 것이기 때문에 여러 요소가 각자 기능할 수 있도록 해야겠다는 생각이 들었는데, 역시 검색을 해보니 heartBtn이 NodeList이기 때문에 forEach 등을 이용해서 이벤트를 붙여줘야하는 것이었다. 때문에 이렇게 코드를 변경했다.

const heartBtn = document.querySelectorAll('.like')

heartBtn.forEach((target)=>target.addEventListener('click', function () {
    target.classList.toggle('active')
    const likeNum = target.nextElementSibling;
    likeNum.innerText = +likeNum.innerText+1
}))

각각의 heartBtn들이 target이란 이름으로 바뀌면서 기존 heartBtn이었던 함수 내 요소들을 target으로 변경해주었다. 이로써 문제를 해결하였다.

🍪 새로 알게된 것

nextSibling & nextElementSibling

nextSibling : 공백이든 텍스트든 가리지 않고 다음에 있는 것을 가져온다.
nextElementSibling : 다음에 있는 Element(요소)만 가져온다.

🍴 느낀 점

아직 많이 부족하지만 팀원분들께 나름 많은 도움을 드린 날이라고 생각이 들어서 뿌듯하다. 그리고 TIL에 문제를 해결한 내용을 적을 수 있게 되어 기쁘다. 앞으로도 수많은 문제를 만나보고, 그 문제를 해결하고, 해결한 방법을 기록하고 싶다. TIL에 대한 스타일을 조금씩은 갖춰가는 것 같기도 해서, 아직 극초반이지만 일단은 잘 나아가고있지 않나 하는 생각이 든다.