2/8 maplestory JS 코드 리팩토링 완성

https://jsfiddle.net/45xv7swm/5/ 에 maplestory 프로젝트 JS 코드 최종 완성본을 올렸다.

 

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");

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) {
  const special = /[^ㄱ-힣a-zA-Z0-9+#]/gi;
  const newTerm = name.replace(/[^ㄱ-힣a-zA-Z0-9+#]/gi, "");
  if (!newTerm) {
    return;
  }
  console.log(newTerm);
  const trimmedTerm = newTerm.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] === newTerm) {
      alert('중복 단어');
      termBox.value = '';
      return;
    }
  };
  termList.appendChild(liElem).appendChild(removeBtn);
  termBox.value = '';
  return;
}
addRelatedTerm("**(*(*(*");

마지막 행은 addRelatedTerm 함수 자체에서 특수문자를 없애는 것을 구현하기 위해 넣어본 테스트 코드이다. 대충 3달전에 올린 코드와 비교했을 때, 하는 일은 같으나 난잡했던 코드가 많이 간소화되었고 재사용화가 가능하게끔 구현했다. 몇개 테스트해보니 괜찮긴 한데.. 뭔가 좀 아쉬운 느낌이 강하다. MVP는 구현되었으나 좀 어딘가 허술하다. 일단 구현이 되었으니 차차 생각해보기로 하고.. 이정도면 될 것 같다.