2/2 maplestory JS 코드 리팩토링

음.. for문을 돌리면서 파라미터를 받아와서 중복 검사까지 진행하는 코드 리팩토링을 완성을 했다.

const termSubmit = document.getElementById("btn_add_term");
const termList = document.getElementById("list_terms");
const termBox = document.getElementById("text_term");
const termLi = document.querySelectorAll("ul li");

termBox.addEventListener("keyup", removeSpecial);
termSubmit.addEventListener("click", removeSpecial);
function removeSpecial(e) {
  e.target.value = e.target.value.replace(/[^ㄱ-힣a-zA-Z0-9+#]/gi, "");
}

termSubmit.addEventListener("click", () => {
  addRelatedTerm(termBox.value);
}, false);

termBox.addEventListener("keyup", (e) => {
  const keyCode = e.keyCode;
  if (e.keyCode == 188 || e.keyCode == 32 || e.keyCode == 13) {
    addRelatedTerm(termBox.value);
  }
});

function addRelatedTerm(name) {
  if (!name) {
    return;
  }
  const trimmedTerm = name.trim();

  const liElem = document.createElement("li");
  liElem.innerText = trimmedTerm;

  const removeBtn = document.createElement("button");
  removeBtn.innerText = 'X';
  removeBtn.addEventListener('click', () => {
    removeBtn.parentNode.removeChild(removeBtn);
    liElem.parentNode.removeChild(liElem);
  })

  const items = document.querySelectorAll("#list_terms > li");
  for (let i = 0; i < items.length; i++) {
    if (items[i].innerHTML.split('<')[0] === name) {
      alert('중복 단어');
      termBox.value = '';
      return;
    }
  };
  termList.appendChild(liElem).appendChild(removeBtn);
  termBox.value = '';
  return;
}

items[i].innerHTML.split('<')[0] 이 부분이 더 깔끔하게 개선할 여지가 있는 코드라고 보여지지만, 일단은 예전에 완성했던 그대로 구현은 되었다. 예를 들어 a라는 관련용어가 있다고 치면, items[0].innerHTML은 a<button>X</button>의 형태이다. 그래서, "<"을 기준으로 나눈 후 [0], 즉 첫 번째 있는 것 (여기서는 a가 될 것이지만, 모든 items에 대해서라면 button을 제외한 순수 li 안의 내용일 것이다)에 해당하게 된다. 그래서, 이게 이런 식으로 파라미터와의 중복 여부를 검사함으로써 중복이라면 return;을 해줘서 아래에 추가하는 코드가 진행되지 않게 하는 것이다.