[javascript] 댓글 작성 기능 (click,keyCode)

HongDuHyeon·2022년 3월 9일

바닐라 자바스크립트.... 날것 그자체의 스크립트...

구현사항

input에 글을 작성하면 게시라는 버튼과 키보드에 Enter를 누르면 내가 쓴 댓글이 댓글란에 추가가 되는 기능을 구현하려고 한다.

먼저, 간과했던 점

그냥 올라가기만 하면 되는거 아닌가? input에 value 값 받아오고 id는 임의로 지정해놓은 string을 받아와서 같이 뿌려주면 되는거 아닌가? 라는 안일한 생각으로 기능구현에 임했다. 쉽게 될 줄 알았ㄷ...

직접 하나하나 작성한 민망함이 가득한 코드를 보면서 회고와 복기를 해보자

내가 했던 방식

const userNickname = document.getElementById("user-nickname").innerHTML;
const userComment = document.getElementById("feed-comment");
const btnComment = document.getElementsByClassName("btn-comment")[0];

먼저 사용될 요소들을 하나하나 다 불러서 변수에 할당을 해주고 시작을 했다. 일단 가장 먼저 필요한건?

1. 버튼에 클릭 이벤트를 받았을때 사용될 함수 선언

2. html에 예시로 하나 만들어둔 댓글 스타일대로 creatElement로 태그 생성

const userNickname = document.getElementById("user-nickname").innerHTML;
const userComment = document.getElementById("feed-comment");
const btnComment = document.getElementsByClassName("btn-comment")[0];

function postComment() {
	const addCommentWrap = document.createElement("div");
  	const addCommentId = document.createElement("span");
  	const addCommentWrite = document.createElement("span");
  	const addCommentBtn = document.createElement("button");
}

3. 댓글에 css를 받는 태그 추가하기

const userNickname = document.getElementById("user-nickname").innerHTML;
const userComment = document.getElementById("feed-comment");
const btnComment = document.getElementsByClassName("btn-comment")[0];

function postComment() {
	const addCommentWrap = document.createElement("div");
  	const addCommentId = document.createElement("span");
  	const addCommentWrite = document.createElement("span");
  	const addCommentBtn = document.createElement("button");
  
  	addCommentWrap.className = "user-comment";
  	addCommentId.className = "feed-id";
  	addCommentWrite.className = "feed-comment";
  	addCommentBtn.className = "btn-like";
}

4. 생성 위치 설정

const userNickname = document.getElementById("user-nickname").innerHTML;
const userComment = document.getElementById("feed-comment");
const btnComment = document.getElementsByClassName("btn-comment")[0];

function postComment() {
  const addCommentWrap = document.createElement("div");
  const addCommentId = document.createElement("span");
  const addCommentWrite = document.createElement("span");
  const addCommentBtn = document.createElement("button");
  // 댓글 클래스 추가
  addCommentWrap.className = "user-comment";
  addCommentId.className = "feed-id";
  addCommentWrite.className = "feed-comment";
  addCommentBtn.className = "btn-like";

  // 댓글 요소 생성,위치
  commentWrap.appendChild(addCommentWrap);
  addCommentWrap.appendChild(addCommentId).innerHTML = userNickname;
  addCommentWrap.appendChild(addCommentWrite).innerText = userComment.value;
  addCommentWrap.appendChild(addCommentBtn);
}

여기서 addCommentId로 userNickname을 가져오고 addCommentWrite에 innerText를 사용해서 input에 작성한 value값을 받아와서 보여준다.

5. addEventListener를 사용해서 클릭 시점에서 함수 호출

버튼 클릭시

btnComment.addEventListener("click", function () {
  postComment();
  userComment.value = "";
  if (userComment.value === "") {
    btnComment.disabled = true;
    btnComment.classList.remove("active");
  } else {
    btnComment.disabled = false;
    btnComment.classList.add("active");
  }
});

버튼을 눌렀을때 함수만 호출해주는게 아니라 댓글을 작성하는 input에 글이 사라져야 하고 버튼이 비활성화 되야해서 attribute인 disabled에 접근해서 true와 false를 사용해 제어해줬고 여기서 되게 기초적인 실수를 한가지 했다.

실수했던 점 ❌

놓쳤던 점이 당연히 userComment.value = "";로 해줬으니 if문에서도 똑같이 써야지 하고 작성을 한 것이다. if문에선 비교를 해서 value값이 비워져있거나 null값일때 if문이 실행되어야하는데 난 비교가 아니라 계속 상속을 하고 있었다. 그래서 =를 ===로 변경해줬다.
(대충 깊은 탄식)

엔터키 눌렀을 때

userComment.addEventListener("keypress", function (e) {
  if (userComment.value === "") {
    e.defaultPrevented();
  } else if (e.key === "Enter") {
    postComment();
    userComment.value = "";
  }
});

엔터키를 눌렀을때는 버튼과 동일하듯 ===로 엄격하게 비교해서
값이 비어있다 -> 엔터키 동작 금지 가 되어야한다.
이 동작을 막지 않으면 아이디는 있지만 비어있는 댓글이 생성이 된다.

keyCode를 사용하지 않은 이유

키보드가 눌렸을 때 시점을 가져오는 여러가지 방법이 있다. keyCode,which..... 등등 있지만 왠지 vscode에서 keyCode라고 작성하면 ~~keyCode~~ 이렇게 나온다. 이게 왜그런가 찾아봤더니 keyCode라고 쓰는 방식은 이제 추천하지 한고 key를 사용하는걸 추천한다해서 그런다고 한다.

keyup / keydown을 사용하지 않고 keypress를 사용한 이유

미칠뻔했다. 별에 별 테스트를 다 해본 것 같다. 일단 사용하기 전에 구글링을 해본 결과

1. keyup
  키보드에서 손을 땠을 때 실행
1. keydown
  키보드를 눌렀을 때 실행
  키보드를 누르고 있을 때 한번만 실행됨
1. keypress
  키보드를 눌렀을 때 실행
  키보드를 누르고 있을 때 계속 실행됨

이라고 나오는데 keyup과 keydown을 아무리 사용해봐도 댓글이 나왔다가 사라지고 영어는 나오고 한글은 안나오는
그야말로 아주 진귀한 상황이 나오게 된다. 그래서 다시 찾아본 결과

keyup은 영문 입력시 이벤트가 1번 일어나는데 한글을 입력할 때는 2번 일어난다.

라는 아주 진귀한 블로그를 보았다. 무슨 말인지 이해를 완벽히 하진 못했지만
신과 같았다.
keypress 관련 이슈

기능 구현 완료

평상시에 편하게 사용하던 기능이었는데 직접 맛을 보니 정신이 혼미하다. 바닐라 자바스크립트로 이런 기능을 구현해봤지만 다들 말한다. 리액트는 이런거 이렇게 안해도 된다고...
앞으로 리액트를 배울 생각에 되게 신나면서도 무섭다. 영혼이 갈려나간다는 얘기도 많이 들ㅇ..