자바스크립트 파일에서 html 문법 쓰기

우리는 자바스크립트에서 동적으로 html 문법을 만들어줘야할 때 dom에 접근해서

createElement, classList, innerHTML, appendChild를 써서 직접 하나하나 설정을 해주었다.

html을 직접 작성하면 코드가 이렇게 길지 않을텐데 dom에 직접적으로 조작을 하려하니

아래와 같이 코드도 길어지고 그에 따라 신경써야할 것도 늘어나면서 코린이인 나는 좀 헷갈리기도 했다.

그러다 구글링을 하면서 알게 된 훨씬 간단하면서도 친숙한 코드를 발견했다.

  const comment = document.createElement("div");
  const userID = document.createElement("span");
  const commentText = document.createElement("span");
  const likeBtn = document.createElement("button");
  const deletBtn = document.createElement("button");

  comment.classList.add("comentClass");
  userID.classList.add("userIDClass");
  commentText.classList.add("commentTextClass");
  likeBtn.classList.add("likeBtnClass");
  deletBtn.classList.add("deletBtnClass");

  userID.innerHTML = "wecode ";
  commentText.innerHTML = inputComment.value;

  newComment.appendChild(comment);
  comment.appendChild(userID);
  comment.appendChild(commentText);
  comment.appendChild(likeBtn);
  comment.appendChild(deletBtn);

html 문법을 자바스크립트에서 바로 쓰려면 백틱(템플릿 리터럴)을 써주면 된다!

맥북의 경우 영어키로 돌리고 옵션과 ~ 키를 같이 눌러주면 `뒤집어진 따옴표인 백틱을 쓸수있다.

그리고 html 문법에서 변수 처리를 해줘야하는 부분이 있다면 $를 써주고 중괄호 안에 변수를 써주면 된다.

${원하는 변수명} 이렇게 사용하면 변수도 손쉽게 바꿀 수 있다.

위 코드에 비하면 거의 반정도로 코드를 줄일 수 있고 원하는대로 직관적으로 볼 수 있어서 더 쉽게 다가온다.

위 코드와 클래스 명은 좀 다를 수 있지만 같은 내용이니 참고해주면 좋겠다.

dom 조작이 필수인 코드도 있겠지만 이 경우에는 템플릿 리터럴을 쓰는게 코드가 더 짧아지고

더 직관적으로 다가오니 이렇게 써보는 것도 좋을 것 같다.

그래서 이미 댓글기능은 만들어두었기때문에 아이디 검색기능을 구현할 때 써보았기 때문에 게시물을 참고해보면 좋을 것 같다.

const newComment =`
<div class="commentText">
  <span class="name">wecode</span>
  <span>${value}</span>
</div>
<div class="buttonwrap">
  <img src="/images/empty_heart.png" />
  <span class="delete">x</span>
</div>`;
newCommentList.innerHTML = newComment;