DOM Node에 #text가 추가되는 이유

Q 어떤 문제가 있었는지

미니 프로젝트의 방명록 페이지를 구현하면서 기존에 작성된 데이터를 불러올 때 사용할 태그를 미리 정의하고 사용했다.

(아래 이미지와 같이 데이터만 변경되고 사용되는 태그와 스타일이 동일하기 때문에 미리 정의를 해두었음)

 

초기 작성 코드는 다음과 같다.

const selector = (element) => document.querySelector(element);

const guestbookTemplate = (id, author, content) => {
  selector(
    "#itemList"
  ).innerHTML += `
  <div class="item" id="${id}">
    <p class="author">${author}</p>
    <img class="cancle" src="../../photos/cancle.svg" alt="${author}의 방명록 수정을 취소하는 아이콘">
    <img class="insert" src="../../photos/pencil.svg" alt="${author}의 방명록을 수정하는 아이콘">
    <img class="update" src="../../photos/send.svg" alt="${author}의 수정한 방명록을 등록하는 아이콘">
    <img class="delete" src="../../photos/trash.svg" alt="${author}의 방명록을 삭제하는 아이콘">
    <p class="content">${content}</p>
  </div>`;

 

위 코드를 사용하여 DOM Node에 접근하여 조작할 때 예상과 다른 값이 출력되어 조작하려고한 인덱스 위치에 있는 Node의 값을 출력해보니 '#text'가 들어가 있었고 부모 Node부터  e.target.parentNode.childNodes.forEach()로 확인해 보니 모든 태그 사이에 '#text'가 들어가 있었다.

그리고 마우스 클릭 이벤트를 두 번 실행해야 함수가 실행되는 문제도 있었다.

개발자 도구로 확인한 HTML 코드에서는 #text와 관련된 것은 보이지 않았다.

 

Q 내가 시도해본 것들

• console.log()로 클릭 이벤트가 정상적으로 동작하는지 확인
  • 첫 클릭에는 log가 출력되지 않고 두 번째 클릭에 이벤트가 발생
• 비슷한 문제를 겪은 경험자의 기록이 있는지 구글링
  
  • 두 번 클릭되는 이유를 물어보는 글 중 나와 같은 케이스가 없었음

Q 어떻게 해결했는지

다음 코드처럼 빈 문자열없이 작성하면 '#text'가 포함되지 않고 두 번 클릭해야 이벤트가 발생하는 현상이 해결되었다.

` `내의 들여쓰기 부분이 문자열로 인식되어 발생한 것이다.

두 번 클릭 이슈는 공백 문자열과 무슨 연관이 있는지 솔직히 원인을 잘 모르겠다.

const guestbookTemplate = (id, author, content) => {
  selector(
    "#itemList"
  ).innerHTML += `<div class="item" id="${id}"><p class="author">${author}</p><img class="cancle" src="../../photos/cancle.svg" alt="${author}의 방명록 수정을 취소하는 아이콘"><img class="insert" src="../../photos/pencil.svg" alt="${author}의 방명록을 수정하는 아이콘"><img class="update" src="../../photos/send.svg" alt="${author}의 수정한 방명록을 등록하는 아이콘"><img class="delete" src="../../photos/trash.svg" alt="${author}의 방명록을 삭제하는 아이콘"><p class="content">${content}</p></div>`;
};

 

Q 무엇을 새롭게 알았는지

• ` `을 사용해 미리 태그를 정의할 때 들여쓰기 시 태그들 사이에 '#text'가 추가되어 DOM Node 조작이 예상과 다르게 동작
• HTML과 JS에 대한 추가 공부가 필요