TIL #11 댓글 기능 구현

댓글 추가 기능

코드를 작성할 때 아래 코드처럼 먼저 주석으로 어떻게 구현할지 순서대로 작성!

function onAdd() {
  //  1. 사용자가 댓글창에 입력한  value 값을 받아온다.
  const text = commentInput.value;

  // 입력창이 비었으면 input창으로 focus
  if (text === "") {
    commentInput.focus();
    return;
  }
  //  2.  comment를 생성함 ( 닉네임(Hyunjoong) + 댓글 내용 + 삭제 버튼 + 하트버튼)
  const comment = createComment(text);

  //  3.  comments 컨테이너에 새로만든 댓글 추가
  comments.appendChild(comment);

  //  4.  input창 value ="" 로 초기화 + input창 focus
  commentInput.value = "";
  commentInput.focus();
  
  // 5. 댓글 게시 후 게시 버튼 비활성화
  unActiveBtn();
}


// 1. 제출 버튼을 누르면 onAdd() 함수 실행 
submitBtn.addEventListener("click", () => {
  onAdd();
});

// 2. input창에서 enter 누르면 onAdd() 함수 실행
commentInput.addEventListener("keypress", (e) => {
  if (e.keyCode === 13) {
    e.preventDefault();	// 이벤트를 안 막으면 리로드가 됨
    onAdd();
  }
});

댓글 기능 구현중 어려웠던 부분

해결한 부분

• input 창에서 버튼을 누르면 홈페이지가 reload 되는 현상
  => 버튼 type의 기본속성은 "submit" 이여서 type = "button"으로 속성줌