블랙커피 스터디 1주차 - 문벅스 lv1

클린한 자바스크립트 코드에 대한 갈증을 느끼던 나

블랙커피 스터디에 참여하게 되었다. 바닐라 자바스크립트로 카페 메뉴판을 만들며
스터디원들과 서로서로 코드 리뷰를 하며 진행이 된다!

우리팀은 6명인데 경력이 있으신분도 많고 취준하고 계신분도 있다.

첫 주차에는 메뉴판에 메뉴를 추가,수정,삭제 하는 것이 과제다.

TWIL (한 주동안 배운 것)

insertAdjacentHTML

insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml과는 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다. - MDN -

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

원래 innerHTML innerText밨에 몰랐었는데 insertAdjacentHTML를 알게 되었다.

쓰는 방법은 insertAdjacentHTML("원하는 위치", text)

포지션 값들은 아래와 같이 넣어주면 된다.
'beforebegin': element 앞에
'afterbegin': element 안에 가장 첫번째 child
'beforeend': element 안에 가장 마지막 child
'afterend': element 뒤에

text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.

position 의 예시 그림

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

나의 경우에는

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

$("#espresso-menu-list").insertAdjacentHTML("beforeend", menuItemTemplate(espressoMenuName));


  const menuItemTemplate = (espressoMenuName) => {
    return `<li class="menu-list-item d-flex items-center py-2">
    <span class="w-100 pl-2 menu-name">${espressoMenuName}</span>
    <button
      type="button"
      class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
    >
      수정
    </button>
    <button
      type="button"
      class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
    >
      삭제
    </button>
  </li>`
  };
  

새로 추가 되는 메뉴가 상단으로 올라오도록 beforeend를 줬다.
그리고 menuTemplate함수를 분리해서 li태그자체를 리턴했다.

이벤트 위임

캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation) 을 구현할 수 있다.

공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링한다.

-https://ko.javascript.info/event-delegation

링크에도 잘 설명 되어있는데 이벤트 위임을 개념만 들어봤었지 직접 적용해 본적은 없었다.

거의 1년의 경력을 가지고 있었는데도 말이다.

이번기회에 라도 적용해 볼수 있어서 좋았던 것 같다.
li태그에 있는 수정, 삭제 버튼을 눌렀을때 상위의 ul 태그에 addeventLister를 달고

 if (e.target.classList.contains("menu-edit-button")){
      editMenuName(e);
    }

contains 메소드도 몰랐었는데 이런식으로 수정버튼을 클릭했는지 삭제를 클릭했는지 체크하여 처리한다.

기타

• e.preventDefault도 호출 하는 위치를 추가, 수정, 삭제할때 했었는데
  form 태그 자체 엘리먼트에 submit 될 때 하는 것이 더 간결해보여서 좋았다.

  $("#espresso-menu-form").addEventListener("submit", (e) => {
    e.preventDefault();
  })

회고

요즘 개인적으로 주 6일을 일하면서 퇴근 후 스터디와 병행하려니 체력적 무리가 왔었는데
그리고.. 왼쪽 손목에 간헐적이지만 터널 증후군이 처음 도졌다...ㅠㅠ

손목받침대 사두고 잘 안썼는데ㅠ 여러분은 미리미리 잘 챙기시길!
개발자로 오래 건강하게 일하려면 체력관리도 필수적이라는 생각이 들었다.