[14기 유원영] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

[yooveloper]

🎯 step1 요구사항 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기

• 에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다.
  • 메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.
  • 사용자 입력값이 빈 값이라면 추가되지 않는다.
• 메뉴의 수정 버튼을 눌러 메뉴 이름 수정할 수 있다.
  • 메뉴 수정시 브라우저에서 제공하는 prompt 인터페이스를 활용한다.
• 메뉴 삭제 버튼을 이용하여 메뉴 삭제할 수 있다.
  • 메뉴 삭제시 브라우저에서 제공하는 confirm 인터페이스를 활용한다.
• 총 메뉴 갯수를 count하여 상단에 보여준다.
• 추가되는 메뉴의 아래 마크업은 <ul id="espresso-menu-list" class="mt-3 pl-0"></ul> 안에 삽입해야 한다.

<li class='menu-list-item d-flex items-center py-2'>
  <span class='w-100 pl-2 menu-name'>${name}</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>

설명

constants.js

• 문자열 상수들을 사용하기 위한 함수

dom.js

• querySelector 로 dom 요소를 가져오기 위한 함수

구현 중점 사항

• 메뉴 등록 시 메뉴명 중복체크, 메뉴명 수정 시 빈값 체크등 유효성 검사에 신경썼어요!
• 네이밍 컨벤션에 유의하면서 읽기 쉬운 코드를 작성하려고 노력했어요!

부족했던 부분

• index.js 안에 모든 기능 구현을 몰아넣어서 개발했는데 추 후 과정을 고려하면 메뉴별 컴포넌트화가 필요할 것 같아요

[dev-riverkim]

와 이런식으로 상수를 빼 놓은거 좋네요!

[areumsheep]

오잉 index.js가 어디있는지 안 보이네요?!