javascript - 댓글을 달아보자

인스타그램 클론페이지 제작에서 댓글 추가기능 구현

구현 사항

• 댓글 입력시에만 게시버튼 활성화 (공백만 입력했을땐 활성화되지않음)
• 댓글 입력후 input요소에 작성한 내용이 엔터키 혹은 게시버튼 클릭시 createElenent 메서드를 통해 HTML요소 추가

1. 댓글 입력에 사용될 DOM요소 접근하기

let input = document.getElementById('commnetInput');
let inputBtn = document.getElementById('commnetButton');
let comments = document.getElementById('articleComments');

댓글을 작성할 input요소, 작성후 클릭해 댓글을 추가 할 button요소, 자식요소로 댓글이 추가될 부모태그인 div요소를 getElementById 메서드를 통해 접근한다.

2. 댓글 입력 유효성 검사하기

document.addEventListener('keyup', inputCheck);

function inputCheck() {
  let emptyCheck = input.value.replace(/(\s*)/g, ''); //공백 삭제
  let isEmpty = true;
  emptyCheck == '' ? (isEmpty = true) : (isEmpty = false); 
  //공백이 삭제된 값을 통해 공백만 입력한 경우에도 빈 문자열로 간주한다.
  
  if (isEmpty === true) {
    inputBtn.disabled = true;
    submitBtnDeactivate();
  } else {
    inputBtn.disabled = false;
    submitBtnActivate();
  }
}

addEventListener메서드를 통해 keyup이벤트가 발생할 때마다 input내의 value에 대해 유효성검사이벤트를 발생시킨다.

input.value에 대해 replace메서드와 정규식을 사용해 입력된 값에서 공백은 전부 지운다.
삼항 연산자를 사용해 emptyCheck변수가 비어있다면 isEmpty를 true로 설정한다.

if문을 통해 input이 비어있다면 버튼을 비활성화하고 비활성화 상태의 스타일을 적용한다.
input이 비어있지 않다면 버튼을 활성화하고 활성화 상태의 스타일을 적용한다.

3. 엔터키 혹은 버튼을 클릭했을때 요소 추가하기

document.addEventListener('submit', addComment);

function addComment(e) {
  let newDiv = document.createElement('div');
  newDiv.classList.add('comments');

  let newSpanUserName = document.createElement('span');
  let newSpanDesc = document.createElement('span');

  newSpanUserName.classList.add('user-name');
  newSpanDesc.classList.add('user-desc');

  let newUserName = document.createTextNode('moooo_nhs');
  let newDesc = document.createTextNode(input.value);

  newSpanUserName.appendChild(newUserName);
  newSpanDesc.appendChild(newDesc);

  newDiv.appendChild(newSpanUserName);
  newDiv.appendChild(newSpanDesc);
  comments.appendChild(newDiv);

  input.value = '';

  submitBtnDeactivate();
  e.preventDefault();
}

submit 이벤트를 통해 발생하는 addComment함수에는 DOM요소의 생성과 생성한 요소를 자식 요소로 추가하는 DOM메서드가 사용된다.

1. createElement메서드를 통해 이벤트가 발생했을 경우 추가할 HTML요소를 생성한다.
2. 기존에 구상한 댓글의 형태에 때라 그 요소에 자식 노드로 추가될 HTML요소까지 순차대로 생성해 appendChild메서드를 통해 원하는 형태로 트리구조를 만들어 준다.
   만약 해당 요소내에 Text같은 자식 요소가 필요하다면, 그 요소역시 텍스트의 경우 createTextNode메서드로 노드를 생성해 자식요소로 추가하는 방식으로 추가해준다.
3. 이렇게 완성한 HTML요소를 댓글을 담고있는 HTML요소의 마지막 자식으로 appendChild메서드를 통해 추가하면 이벤트가 발생할 때마다 원하는 요소가 추가된다.
   
   

이번 클론 코딩을 통해 javascript의 DOM개념에 대해 익혀볼 수 있었고 아직은 span태그나 div태그를 semantic 태그로 바꾸면 더 좋을것 같은부분들이 많아 프로젝트를 진행하면서 적절한 태그사용을 익힐 필요성이 느껴졌다.