[error handling log]

스코프범위에 올바르게 접근하지 못해 null 에러가 발생하였다.
그 이유로는 스코프에 대한 이해도가 적었다.그래서 올바 접근이 아닌 다른 곳에서 접근을 시도 하였다. 해결 방법으로는 백틱에서 태그에 접근하는 방법을 검색했다. 전역에는 접근을 할 수 없었고 같은 지역에서 접근을 하니 접근이 가능해졌다. 그래서 문제를 해결하는 것 이면 좋았겠지만 다른 문제 발생하였다. 어떤 문제였냐면 ui에서만 로직을 할당하였기 때문에 ui에서는 내용이 지워졌지만 그 내용을 담고 있던 let commentList = [];에서는 지워지지 않고 계속 랜더링 되어지고 있어서 댓글 하나를 삭제하고 새로 작성을 하게 되면 삭제했던 댓글 다시 나타나는 에러가 발생 되었다.

이 에러를 해결하기 위해서는 렌더링되어지는 함수안에서만 지우는 것이 아니고
let commentList = [];도 댓글을 지워 줘야 했다.
방법으로는 다음 함수를 확인해보면 된다. 댓글에 써진 텍스트의 인덱스와 배열에서 가지고 있는 텍스트의 인덱스를 비교하여 같은 텍스트를 가지고 있는 것을 비교하여 찾은 인덱스만 let commentList = []; 삭제 해주면 된다.
이 경우에 조심해야 할 상황으로는 같은 텍스트를 가지고 있는 인덱스가 또 존재 한다면 같이 삭제되는 에러가 발생되어 질 수도 있다. 그렇지만 실제 상황에서는
객체로 여러가지의 엘리먼트들을 가지고 있기 때문에 비교할 엘리면트들이 많아져 원하는 내용만 삭제를 할 수가 있다.

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

• 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();
  }
}

// let borderHeart = document.querySelector('.fa-regular fa-heart');
// console.log(borderHeart)
// changeHeart.addEventListener('click', function() {
// borderHeart.classList.toggle('borderHeart')
// })

// let redHeart = document.querySelector('.fa-solid fa-heart').style.display = 'none'