인스타그램 큰론코딩 추가기능 모델링 다시하기

주말을 이용하여 내가 작업한 문서들을 다시 살펴 보았다. 다행이도 주말에 JS의 전첵적이 그림이 조금씩 보이기 시작했다.
큰 틀을 보고 작은 요소들을 하나씩 채워나가기, 특별하게 이벤트를 주지 않는 이상 JS는 위에서 아래로 스캔을 한다.
전역에서 선언 변수는 지역에서 사용가능하지만 지역에서 선언된 변수는 전역이나 다른 지역에서 사용이 불가하다. 라는 기본적인 것에
조금씩 깨닫게 되고 내가 작성한 JS코드들을 다시 살펴보았다.
처음부터 모델링이 잘못되었다는 것을 알게 되었다.

let newComment = document.querySelector('.writing-input');
let addButton = document.querySelector('.writing-btn');

let commentList = [];

addButton.addEventListener('click', addComment);

function addComment() {
  let userComment = newComment.value;
  commentList.push(userComment)
  newComment.value = ''
  render();  
}

function deleteComment(commentText) {
  //commentList에서 commentText와 일치하는 요소 찾아서 삭제...!
  // console.log(commentText)
  let index = commentList.indexOf(commentText)
  commentList.splice(index, 1)
}

function render() {
  let resultHTML = '';

  for(let i=0; i<commentList.length; i++){
    let commentHTML = `
    <div class="comment">
      <div class="comment-box">
        <div>
          <span class="userId">afdgdfsd</span>
          <span class="commentText">${commentList[i]}</span>
        </div>
        <div class="deletebtn">
          <button class='commentDelete'>삭제</button>
          <i class="fa-regular fa-heart comment-heart"></i>
        </div>
      </div>
      <div class="comment-time">42분 전</div>
    </div>`

    resultHTML = resultHTML + commentHTML
    document.querySelector('.comments-section').innerHTML = resultHTML
    
    let deleteBtns = document.querySelectorAll('.commentDelete'); //배열
    //반복문으로 배열을 순회하여 요소마다 addEventListener 추가!

    for (let i = 0; i< deleteBtns.length; i++) {
      deleteBtns[i].addEventListener('click', function(event) {
        let commentText = document.querySelector('.commentText').innerHTML
        event.target.parentNode.parentNode.parentNode.remove();
        deleteComment(commentText)
      })
    }
  }
}

function onKeyUp(event){
  if(event.key === "Enter"){
    addComment();
  }
}

댓글 삭제를 하고 좋아요 버튼누르기. 추가기능을 구현할려고 했다. 이 부분에서 문제를 찾게 되었다. 지금 나의 모델링에서 가장 잘못된 점이라 라면
데이터에 접근하는 방식이 아닌 UI에서만 삭제를 하고 있었다. 이대로 작업을 계속 한다면 앞에서 발생한 에러들이 똑같이 또 발생을 하게 될거라는
문제가 생겨 다른 고민을 하게 된 것이다.우선 comment하나 하나에 고유의 아이디를 부여해준다. 여기서 헷갈렸던 내용은 유저ID가 아닌 임의의
ID를 부여해줘야 한다. 부여하기 전에 comment하나 하나를 배열만이 아닌 배열의 인덱스안의 객체로 전환하여 데이터화 해줘야 한다.
그럼 비교 할 수 있는 대상들이 고유의 ID, 댓글의 내용, 좋아요 버튼들의 각각 요소마다 변화되는 방식을 줄 수가 있다. 이는 객체의 엘리먼트들을
각각의 key의 value만 바꿔줄 수 있기 때문이다. 사실 지금 당장 내가 이해한 로직을 바로바로 JS로만 만들 수 있지는 않다. 검색을 해서 작업을 하고 계속 에러와 맞딱뜨려 이 에러에 대해 굳은 살이 생길정도로 반복을 할 필요가 있다. 지금 많이 버겁기는 하지만 실무에 나가기전에 여러 에러를 느껴보고 이 해결책을 찾아가야 하는 것이다. 내 코드는 절대 완벽할 수가 없다. 앞으로도 정답이라 할 수 없는 코드 일 것이다. 나의 기준점을 세우고
코드를 작성해야 겠다.