[TIL] Javascript 댓글구현

내가 작성 한 HTML코드

<div class="feeds-commit">
  <p><a href='#' class="name">eenooyos</a> 어쩌구저쩌구 <span>더보기</span></p>
  <ul id="comment-wrapper">
  </ul>
</div>

<form id="comment">
  <input type="text" placeholder="댓글 달기..." id="commentInput">
  <button id="submit">게시</button>
</form>

comment 클래스에 있는 input창에 댓글을 입력하면
comment-wrapper클래스에 li를 추가해주는 댓들 구현을 했다.

"use strict"
const commentInput = document.getElementById("commentInput");
const commentSubmit = document.getElementById("submit")
function checkInput() {
    const newComment = commentInput.value;
    if (newComment.length > 0) { // input의 값이 0 보다 클때
        addComment(newComment); // addComment함수를 실행한다.
    } else if(window.event.code === 'Enter'){ // 엔터를 입력하면
        if(newComment.length > 0){ // input의 값이 0보다 클때
            addComment(newComment);// addComment함수를 실행한다.
        }else{ // 0 보다 작을 때
            alert("댓글을 입력하세요!");// alert 창을 띄워준다.
        }
    }else { // input 의 값이 0보다 작을 때
        alert("댓글을 입력하세요!");// alert 창을 띄워준다.
    }
    event.preventDefault(); // 이벤트를 취소 해 준다.
}

• 처음에는 checkInput함수와 enter 이벤트가 실행되는 함수를 따로 작성하였다.
  -> 결과로는 Enter 이벤트와 checkInput 함수가 같이 실행되면서,
  댓글을 입력하게 되면 2개의 댓글이 달리게 되는 현상이 발견되었다.
• addEventListener() 메서드로 사용했던 enter 이벤트를 checkInput함수에 중첩 if문으로 수정하면서 댓글이 2개 달리는 현상을 수정 할 수 있었다.
• 댓글은 하나씩 달리지만, 댓글을 달때마다 페이지가 새로고침이 되면서 scroll이 위로 올라가는 현상이 발생되었다.
  -> 다른분들 코드와 똑같이 js코드를 작성했지만, 내 코드에서만 새로고침 현상이 발생하였다.

  -> 처음에는 HTML 코드 내에서 위치가 잘못되어 이런 현상이 발생한건지 js코드 내에서 값을 잘 못 처리해서 그런건지 도무지 알 수 없었다.

  -> 🏁 HTML 안에서 form 태그 안에 있는 button은 기본값이 데이터를 제출하기 위한 submit으로 지정되기때문에, 페이지가 새로고침 된다.

• 여기서 나는 HTML 안에서도 form 태그 안에 type="submit" 으로 지정했기 때문에,
  계속 페이지가 새로고침이 되었던것이다.

  -> 📍 해결방안 : event.preventDefault(); 메서드를 사용함으로써,

  이벤트를 중지하며 새로고침현상을 막을 수 있었다.
  -> form 태그를 div 태그로 변경하고, event.preventDefault(); 메서드를 지워봤을 때, 새로고침현상은 발생하지 않았다.

function addComment(value) {
    const commentLists = document.getElementById('comment-wrapper');
    const newCommentList = document.createElement('li');
    const defaltComment = `<span class="name">eenooyos</span><span> ${value}</span><span class="delete"> x </span>`;

    newCommentList.innerHTML = defaltComment; // li 태그에 댓글defalt값을 설정 해 준다.
    commentLists.appendChild(newCommentList);// ul에 li 를 자식요소로 붙인다.
    commentInput.value = ""; // 댓글 입력 후 input의 값을 비어있게 만든다.

    deleteComment(newCommentList);// deleteComment 함수를 실행시킨다.

}

function deleteComment(newCommentList) {
    const deleteBtn = newCommentList.querySelector('.delete');
    deleteBtn.addEventListener('click', () => newCommentList.remove());
}

const init = () => {
    commentSubmit.addEventListener('click', checkInput);
}

init();

아래에 코드는 이렇게 진행된다.
사실 DOM에서 함수에서 함수로 이동되는 부분이 혼자 생각해서 구현하기에는 많이 버겁지만,
예시를 보며 구현 할 수 있도록 블로그에 기록을 남긴다.

해결 할 순서를 생각하며, 하나하나 어떻게 구현 할 지 생각해보는 능력을 많이 키워야겠다.