9/17 TIL

< 목차 >

1. 문벅스 메뉴관리 step 1
2. 몰랐던 메서드
3. 회고

---

문벅스 메뉴관리 step 1

지난 과제로 부족함을 많이 느꼈던 나는 전체적인 상태관리(돔 조작, 이벤트 핸들링, 로컬스토리지 등)를 학습하려고 유데미에서 문벅스강의를 구매하였다.

step1 요구사항

먼저, 이 요구사항들을 의사코드로 최대한 쪼개서 작성해보았다.

• 메뉴 추가

  • 메뉴 이름을 입력하고 확인 버튼을 누르면 메뉴가 추가되게 작성
  • 메뉴의 이름을 입력하고 엔터키 입력으로 추가되게 작성
  • 추가되는 메뉴의 아래 마크업은 <ul id="espresso-menu-list" class="mt-3 pl-0"></ul> 안에 삽입해야 한다.
  • 총 메뉴 갯수를 count하여 상단에 보여준다.
  • 메뉴가 추가되고 나면, input은 빈 값으로 초기화되게 만든다.
  • 사용자 입력칸이 빈 값이면 추가되지 않는다.

• 메뉴 수정

  • 메뉴의 수정 버튼 클릭이벤트 구현한다.
  • 이 이벤트를 구현할 경우에 메뉴 수정을 위한 모달창이 나오게 한다.
  • 모달창에서 신규메뉴를 입력하고 확인버튼을 누르면 수정되게 한다.

• 메뉴 삭제

  • 메뉴 삭제 버튼 클릭이벤트를 구현한다.
  • 메뉴 삭제 이벤트를 구현할 경우에 삭제 컨펌 모달창이 나오게한다.
    - 확인 버튼 누르면 메뉴가 삭제된다.
  • 총 메뉴 갯수를 count하여 상단에 보여준다.

---

2. 몰랐던 메서드

• insertAdjacentHTML()

< 구문 >

element.insertAdjacentHTML(position, text);

• position에는 아래 있는 단어만 사용 가능하다.
  
  

• 'beforebegin' element 앞에

• 'afterbegin' element 안에 가장 첫번째 child

• 'beforeend' element 안에 가장 마지막 child

• 'afterend' element 뒤에

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

• Element.closest()

• element의 closest() 메서드는 주어진 css selector와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다.

< 구문 >

closest(selectors)

• contains

• 처음 보는 메서드라 몇가지 특정상황에서 사용할 수 있으나 내가 필요한기능은 특정 class가 존재하는지 확인하는것이다.

• element가 특정 class를 가지고있는지 확인하기 위해서는 contains() 메소드를 사용한다. contain() 메소드는 classList에 특정한 class가 존재하면 true를 반환하고 아니면 flase를 반환한다.

---

3. 회고

이런 강의를 진작에 들었으면 어땠을까? 라는 생각이 날 정도로 강의 퀄리티가 좋았던 것 같다...
나는 이런dom구현이나 이벤트 구현 및 위임을 제대로 알지 못하고 있었던 것 같고 지금이라도 이러한 개념들을 알게되어 다행이라고 생각한다. 오늘 step1을 완료하고 내일은 step2에서 로컬스토리지를 비롯한 상태관리에 대해 학습을 해야겠다!