#TIL(Today I Learned)_댓글 좋아요/싫어요 기능에 관한 고찰 1편

# 좋아요/싫어요 기능이란? 

좋아요/ 싫어요. 버튼은 SNS 혹은 웹사이트에서 사용하는 기능으로 사용자의 표현 수단입니다. 쉽게 말해 콘텐츠의 반응을 드러내는 방식의 양적 대안입니다. 좋아요의 처음 시작은 2000년대 초반 탐색 서비스의 스텀블어폰(Stumble Upon) 떰즈업 기능이 있었지만 이를 제대로 활용한 건 페이스북이었습니다. 2010년대 페이스북이 유명인의 페이지의 구독으로 팬이 되는 것을 조금 더 심플하게 재정의하면서 탄생한 것이 좋아요. 버튼이었습니다.

작은 기능이었지만 좋아요. 기능이 갖고 있던 파급력은 생각보다 거대했고 사람들이 주목하는 흐름을 재빠르게 파악하는데 큰 기여를 했습니다. 이를 통해 사용자를 추적하고, 행동을 프로파일링하고, 타깃광고를 보여주면서 비즈니스의 핵심이 되었습니다. 

이번 시간에는 경과시간을 구현하고 나서 조금 더 댓글 창을 꾸며보기 위해 좋아요 싫어요 기능을 추가로 구현하려고 합니다. 팀 프로젝트 기한까지 맞추기는 힘들겠지만 좋아요/싫어요. 기능도 구현해 보고 싶었던 기능이라서 한번 시작해 보겠습니다. 

 

# 좋아요/싫어요 로직을 어떻게 접근했는지에 대해

[처음 생각했던 로직]
1) 페이지 로드 시 호출되는 `updateLikeDislikeUIOnLoad()` 함수를 이용해 로컬 스토리지에서 저장된 댓글 데이터를 가져와서 화면을 업데이트 합니다. 

 

2) 이때 로컬 스토리지안에 `posts` 키로 저장된 데이터를 가져와 `posts` 배열로 파싱하고 만약 데이터가 없으면 빈 배열을 사용합니다. 

 

3) 배열을 순회하면서 각 댓글의 `MovieId`와 현재 페이지의 `MovieId`를 비교하여 일치하는 경우 해당 댓글의 좋아요와 싫어요 상태를 화면에 업데이트 합니다. 

 

4) `toggleLikeDislike(commentId, action)` 함수를 이용해 좋아요 싫어요 버튼을 토글하여 댓글의 상태를 추적하고 로컬스토리지에 저장합니다. 

 

5) ` commentId`를 이용해서  `posts` 배열에서 해당 기능 댓글을 찾아오고 `action` 매개변수에 따라 `like` 또는 'dislike' 동작을 수행합니다. 

 

6) 댓글의 상태를 업데이트한 후, 변경된 데이터를 다시 `localStorage`에 저장합니다. 

 

7) `updateLikeDislikeUI(commentId, likes, dislikes)` 함수를 이용하여 좋아요/싫어요 상태가 변경될 때 호출하고 버튼의 상태를 업데이트 합니다. 

 

8)  commentId`를 통해 어떤 댓글을 업데이트해야 하는지 식별하고, 해당 댓글의 좋아요와 싫어요를 화면에 반영합니다. 

 

9) 이벤트리스너에서 `likeBtns` 변수는 `likeBtns` 클래스를 가진 모든 버튼 요소를 선택하고 각 버튼에 대한 이벤트리스너가 등록이 됩니다. 

 

10) 사용자가 좋아요, 싫어요 버튼을 클릭하면 해당 댓글의 아이콘 상태를 변경하고, 이를 화면에 반영합니다. 

 

# 진행하면서 겪었던 문제에 대해

[알 수 없는 실행충돌 오류]

html에서 이전에 작업한 글 작성 버튼 on click 버튼이 like Dislike 버튼을 만들고부터는 실행이 안 되는 오류가 발생했습니다. 이전부터 심심하면 한 번씩 작성 등록이 적용되었다가 실패하는 오류가 있었습니다. 처음에 코드상 열심히 찾아봐도 원인이 없다고 생각해서 두 시간은 헤맸습니다. 

원인: 기능별로 JS 파일을 만들어 호출하기 때문에 html에서 호출하면 간섭이 생겨 실행이 안 되거나 되다 안되다 먹통이 될 수 있습니다. 이런 경우 실행 부분을 JS에서 실행하면서 문제를 해결할 수 있습니다. 

onclick="writing()"부분 수정필요

---

작동 부분을 지우고 id 값을 준 다음 js파일로 넘어감

---

getElementById로 지정하고 addEventListener로 클릭할 때마다 실행

---

코드 수정 후 테스트 진행

---

테스트 확인 이상없이 잘 동작함

 

# 2편에서 계속>>