[TIL] 팀프로젝트 영화사이트(자바스크립트로 댓글 작성 기능 구현)

대빵·2023년 10월 26일

내일배움캠프에서 영화검색사이트 추가 구현 중 저번에는 상세페이지로 이동하는걸 구현했다면, 이번에는 댓글 기능을 구현하는 일이다..ㅎㅎ
일단 먼저 순수 바닐라 자바스크립트로 댓글 기능을 구현해보기로 했다.

HTML

<h1>댓글달기</h1>
    <form id="commentForm">
      <input type="text" name="nickname" placeholder="닉네임" />
      <input type="text" name="comment" placeholder="내용" />
      <input
        type="password"
        maxlength="8"
        pattern="[0-9a-fA-F]{4,8}"
        name="password"
        placeholder="password"
      />
      <button>확인</button>
    </form>
<h2>댓글:</h2>
<ul id="comments"></ul>

input안에 type을 password를 넣는다면 내가 원했던 **표시로 확인을 할 수 있게 되었으며 maxlength를 이용해서 8자리 이상 못쓰게 하며 pattern을 이용해서 숫자, 영어소문자, 영어대문자에 4~8자리를 작성해야 확인이될 수 있게 적용을 했다. (이러면서 input에 type값도 많여러 종류가 있는것을 확인할 수 있었다)

input태그 type="password"공식문서

JavaScript

const commentForm = document.querySelector("#commentForm");

commentForm.addEventListener("submit", (e) => {
  alert("확인!!");
  e.preventDefault();
});

버튼 타입 = 버튼(?)

button의 type에는 3가지 값을 지정해 줄 수 있는데 각 submit, reset, button이다.

button === button type="submit"이 기본 디폴트값이다.

혹시 form 안에서 버튼을 클릭했을 때 새로고침이 된 적 없으신가요? 바로 이것 때문이었습니다.

만약 어떤 이유로 특정 영역을 form 태그로 감싸게 된다면, 그 안에 있던 타입 명시 없는 버튼은 모두 submit 버튼으로 동작합니다.

그래서 이때 버튼을 클릭하면 페이지가 새로고침이 된다.

event.preventDefault()

a와 submit태그 같은 몇몇 태그들은 특수한 기능을 가지고 있다.

a는 href에 연결된 링크를 통해, 해당 페이지로 이동하는 기능을 가지고 있으며, submit태그는 그 태그의 값을 전송하면서 해당 페이지를 새로고침 하는 기능을 가지고 있다.

이러한 기능들은 매우 유용하지만, 그 의도로 사용하지 않게 될 경우 불편함을 야기할 수 있다.

이때 사용하는 것이 바로 event.preventDefault() 이다.

주로 사용되는 경우

a태그를 눌렀을때도 href링크로 이동하지 않게 할 경우

form안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우(submit은 동작됨)

value

댓글을 받아오려면 input값에 있는 값을 읽을 수 있어야해서 그때 필요한 것이 바로 value이다.

input창에 입력한 값이 콘솔창에 그대로 출력이 되는지 확인해봐야 한다.

위에 코드를 확인해보면 변수로 저장된 input요소에 value라는 프로퍼티를 넣어주니 username이나 comment, password에 입력된 값을 확인할 수 있게 되었다.

const commentForm = document.querySelector("#commentForm");

commentForm.addEventListener("submit", (e) => {
    e.preventDefault();

    const nicknameInput = commentForm.nickname;
    const commentInput = commentForm.comment;
    const passwordInput = commentForm.password;

    console.log(nicknameInput.value, commentInput.value, passwordInput.value);
});

innerHTML

이제 input에 value값을 가지고 왔으니 마지막으로 댓글에 입력이 될 수 있도록 만들어야한다.

ul의 id값인 #comments를 이용하여 컨테이너를 만든 후, 그 안에 innerHTML를 이용해서 화면에 출력을 했다.

+만 사용한 결과 댓글은 한개 이상 작성이 안되었지만, +=을 사용하여 댓글을 여려개로 붙일 수 있게 되었다.

const comments = document.querySelector("#comments"); 

comments.innerHTML += `
    <li>
        <span>${nicknameInput}: ${commentInput}</span>
    </li>
`;

이렇게 이쁘게 댓글 기능을 구현하게 된것을 확인할 수 있게 되었다. 다만... 여기서 댓글을 쓰고 완료했는데도 댓글의 내용은 그대로 남아있어요.

input안에 value값 초기화

nicknameInput.value = "";
commentInput.value = "";
passwordInput.value = "";

value값을 초가화 시키기 위해서 어렵게 생각하지 않고 빈 문자열로 바꿔주었다.

댓글 삭제기능

function deleteComment(btn) {
      const commentItem = btn.parentNode;
      const password = btn.dataset.password;

      const inputPassword = prompt("댓글 삭제를 위해 비밀번호를 입력하세요:");
      
      if (inputPassword === password) {
        commentItem.remove();
        alert("댓글이 삭제되었습니다.");
      } else {
        alert("비밀번호가 일치하지 않아 삭제를 취소합니다.");
      }
 }

this는 JavaScript에서 현재 실행 중인 함수를 호출한 객체를 참조하는 특별한 키워드입니다. 여기서 this는 삭제 버튼을 클릭했을 때 해당 버튼 요소를 참조하게 됩니다.

deleteComment(this)는 삭제 버튼이 클릭되었을 때 deleteComment 함수를 호출하면서 클릭된 버튼 요소 자체를 this로 전달하는 역할을 합니다. 이렇게 함으로써 deleteComment 함수 내에서 this를 사용하여 클릭된 버튼에 접근할 수 있습니다.

따라서, this를 사용하여 deleteComment 함수에 클릭된 버튼을 전달함으로써, 함수 내에서 해당 버튼을 참조하여 삭제 동작을 수행할 수 있게 됩니다.

즉, deleteComment(this)는 삭제 버튼이 클릭되었을 때 해당 버튼 요소를 deleteComment 함수에 전달하여 댓글을 삭제하는 동작을 수행하기 위해 사용되는 것입니다.