요구사항을 명확하게 하기 위해 리스트화 한다.

• 요구 사항을 분석하고 거기에 필요한 지식들을 나열한다.
• 이 과정은 우리가 길을 해맬수 있는 과정을 줄여 줄 수 있다.
• 추가로 내가 필요한 지식을 바로 배워서 적용 할 수 있다.

수정 버튼으로 메뉴 수정하기 기능 구현

• 문제점 : 애초에 수정버튼이 동적으로 만들어지기 때문에, 현재 index.html에는 수정 버튼에 대한 정보가 없다!
• 해결책 : 이벤트 위임을 이용한다.
• console.log(e.target)으로 ul안의 어떤 요소를 클릭할때마다, 다른 요소를 target으로 잡는 것을 확인했다.

• 그렇다면? 수정 버튼과 삭제 버튼 어떻게 구분 할 수 있을까?

  <aside> 💡 Class 이름으로 비교하자. 되도록이면 innerText의 값보다는 엘리먼트가 가지고 있는 속성으로 비교하는게 낫다!

  </aside>

  ulElement?.addEventListener('click', (e) => {
      const target = e.target as HTMLElement | null
      console.log(target?.classList)
    })
  

  • 해당 요소 e.target이 가지고 있는 class들을 배열로 가지고 올 수 있다. e.target.classList

    

  • contains() 라는 메서드로 class name이 있는지 없는지 알 수 있다.

  if (target?.classList.contains('menu-edit-button')) {
        console.log("수정 버튼")
      }
  

• element.closet(’li’)

  • 클릭한 녀석의 가장 가까운 li 태그를 찾는다. 엄청 쉽게 찾았다. 따로 내가 클릭한게 어떤것 이라는 flag값을 주지 않았는데도!!!

• 함수를 접어가면서 어떤 함수를 쓰고 있는지 그때그떄 확인을 해보자.

로컬 스토리지 사용

• 로컬 스토리지에 저장할때 Object그대로 저장하는 것보다는 문자열로 바꿔야 되서 JSON.stringify(object) → 문자열로 바꿔서 localStorage 에 저장해야한다.
• 상태라는 것은 변하는 데이터이다.