안녕하세요. 현재 프론트엔드 공부를 독학으로 하고 있습니다. 공부한지 한달 좀 지났는데, 혼자 연습하려고 클론코딩을 하고 있습니다.ㅠㅠ 거의 무작정하는 클론코딩이라 많이 부족하네요 ㅠ

본론으로 인스타그램 클론코딩을 혼자 해보고 있습니다. HTML,CSS까지는 구현을 했는데 JavaScript는 아직 공부를 많이 하지 않았지만 몇몇 조금의 기능만 따라해볼려구 합니다. 막히는데 뭐라고 구글링 해야할지도 모르고 감이 전혀 안 잡혀서 지식인에 올려봅니다 ㅠㅠ

현재 좋아요 기능을 따라해보려고 하는데, 버튼을 누르면 하트 아이콘의 색깔을 체인지하면서 구현할려고했는데 컬러만 바꾸니깐 하트의 테두리만 바껴서 두개의 아이콘(버튼) 꽉 찬 하트 아이콘+빈 하트 아이콘을 사용했습니다. 꽉찬 하트의 색깔을 핑크색으로 해놓고 CSS에서는 hide라는 클래스를 추가해줘서 display:none; 으로 해논 상태입니다.

빈하트를 누르면 빈하트에 hide라는 클래스가 추가되어서 display가 none으로 되고 꽉찬하트에 hide클래스가 지워지면서 display가 block으로 되게끔 만들었습니다.

제가 현재 자바스크립트로 해논 코드 상태가

const likeNullBtn = document.querySelector('.like-null-btn'); 
const likeActionBtn = document.querySelector('.like-action-btn'); 
const CLICKED_CLASS = 'hide'; 
const likeCount= document.querySelector('#like-count'); 

likeNullBtn.addEventListener('click', ()=> { 
  likeNullBtn.classList.add(CLICKED_CLASS); 
  likeActionBtn.classList.remove(CLICKED_CLASS); 
  likeCount.innerHTML = "좋아요 1,295개"; 
}); 

likeActionBtn.addEventListener('click', ()=>{ 
  likeActionBtn.classList.add(CLICKED_CLASS); 
  likeNullBtn.classList.remove(CLICKED_CLASS); 
  likeCount.innerHTML = "좋아요 1,294개"; 

}); 

const likeNullBtn2 = document.querySelector('.like-null-btn2'); 
const likeActionBtn2 = document.querySelector('.like-action-btn2'); 
const likeCount2= document.querySelector('#like-count2'); 

likeNullBtn2.addEventListener('click', ()=> { 
  likeNullBtn2.classList.add(CLICKED_CLASS); 
  likeActionBtn2.classList.remove(CLICKED_CLASS); 
  likeCount2.innerHTML = "좋아요 3,350개"; 
}); 

likeActionBtn2.addEventListener('click', ()=>{ 
  likeActionBtn2.classList.add(CLICKED_CLASS); 
  likeNullBtn2.classList.remove(CLICKED_CLASS); 
  likeCount2.innerHTML = "좋아요 3,349개"; 
}); 

대충 이런 상태입니다. 제가 봐도 너무 지저분하고 분명 간결하게 할 수 있는 방법이 있을텐데 무엇을 활용해야 하느지 모르겠습니다ㅠ innerHTML 에도 저렇게 문자를 다 갖다가 써놓은 것도 맘에 안들지만 일단 어떻게든 막무가내로 구현만 해놨습니다.ㅠㅠ 클릭시 숫자 +1로 하면 뭔가 더 정확하게 표현이 될 거 같은데 처음부터 코드가 지저분해서 이렇게 쓰게 됐네요 ㅠ

두개의 버튼들의 같은 기능을 여러 컨테이너(?) 안에서 따로따로 같은 기능이 작동이 되게 만들고 싶습니다. 하나의 함수로 지정해서 한번에 쓰는 방법이 있거나 다르게 간결하게 작동하는 방법이 있으면 꼭 알고싶습니다ㅠㅠ 자바스크립트를 얼마 배우지 않고 바로 혼자 해보는 거라 많이 부족하지만 도움 주시면 감사하겠습니다