Vanilla JS로 댓글 기능이 있는 게시판 만들기_2일차

Vanilla JS로 댓글 기능이 있는 게시판 만들기_2일차

🧱 2일차 구현 내용

2일차에 목표로 했던 부분은 아래와 같다.

list li에 클릭이벤트 걸기
1-1. li를 클릭시 댓글 영역이 slideDown 효과와 함께 나타나고 다시 클릭하면 slideUp 효과와 함께 사라진다.

1. 댓글작성버튼 클릭시 유효성 검사(댓글 작성자, 댓글 내용)
   2-1. 댓글 작성자 또는 댓글 내용이 비어있다면 alert과 함께 해당 부분에 포커스 주기

목표를 세우긴 했는데 뭔가 좀 막혀서 엄청 삽질만 했다. 그래서 오늘은 구현 내용이라고 하긴 했지만 그냥 삽질 기록이다 🙄

list li 클릭이벤트

const btnAddReply = document.getElementsByName('btnAddReply');
const listLis = document.querySelectorAll('#list li');
const replyBox = document.querySelector('.reply-box');

// list li 클릭시 reply-box show hide toggle
listLis.forEach(function(listLi, index, arr){
  listLi.addEventListener('click', function(){
    if (replyBox.classList.contains('show')) {
      replyBox.classList.remove('show');
    } else {
      replyBox.classList.add('show');
    }
  });
});

📝 수정내역

댓글 등록 버튼 id => id는 페이지에 유일해야하는데 게시글이 여러개가 추가되면 각 게시글의 댓글 영역도 함께 추가되면서 btnAddReply라는 이름을 가진 버튼이 여러개가 생기게 된다. 그래서 id에서 name으로 수정함.

1. 댓글 작성 영역의 input들 => 위의 내용과 마찬가지로 같은 id를 가진 요소가 여러개가 될수는 없기때문에 name으로 수정.

처음 생각으로는 게시글 등록버튼 이벤트 / li 클릭 이벤트 / 댓글 등록 이벤트 세가지를 다 따로 작성하려고 했는데 막상 게시글 등록버튼 이벤트 아래에 li 이벤트를 작성했더니 계속 에러가 났다. 뭐가 문제지 싶었는데 생각해보니 에러가 날 수밖에 없었다. 이 스크립트에서 li는 게시글 버튼 이벤트가 실행될때 동적으로 생성되는 부분이라 처음에는 존재하지 않기때문이다. 그 부분을 미처 생각못하고 냅다 밑에다 코드를 작성해버렸으니🤦‍♀️🤦‍♀️

그래서 일단 지금은 list li 클릭이벤트와 댓글등록 버튼 이벤트도 게시글 버튼이벤트 안에 넣어두었다. 이렇게 해도 되는지는 모르겠지만.. 어쨌든 지금은 다른사람의 도움 없이 최대한 혼자서 구현해보는것이 목표니까 일단은 계속 진행하기로 했다.

댓글작성 버튼 클릭이벤트

btnAddReply.addEventListener('click', function(){
  const replyUserName = document.querySelectorAll('replyUserName');
  const replyContent = document.getElementById('replyContent');
  const replyList = document.querySelector('.reply-list');
  const makeReply = document.createElement('p');
  let addReply = '';

  if (replyUserName.value == '') {
    alert('댓글 작성자를 입력해주세요.');
    replyUserName.focus();
  } else if (replyContent.value == '') {
    alert('댓글 내용을 입력해주세요.');
    replyContent.focus();
  } else {
    addReply = '<p class="reply">['
      + replyUserName
      + ']'
      +  replyContent
      + ' | '
      + fullDateTime
      + '</p>';

    makeReply.innerHTML = addReply;
    replyList.append(makeReply);
  }
});

댓글버튼 클릭 이벤트도 게시글 이벤트와 동일하게 구조를 작성했다. 그런데 자꾸 에러가 나서 일단은 주석처리를 해두었다.

우선은 li 클릭이벤트를 먼저 해결하고 그다음에 천천히 해보려고 한다.

 

📝 정리

id는 유일한 값이니 여러개가 생성되는 요소(댓글 input, 댓글작성 버튼 등)에 있는 id는 name이나 class로 수정하도록 하자.

list li는 각각의 li에 클릭 이벤트가 걸려야 하고 클릭시에는 클릭된 li에 한해서만 이벤트가 일어나야한다. 이부분에 대해서는 원본소스의 event.target을 조금 더 알아보고 코드를 작성해보기로 했다.

3일차에는 둘중 하나라도 해결할 수 있으면 좋겠다..😢