[바닐라 자바스크립트] 요구사항 분석 및 구현 연습 일기

[바닐라 자바스크립트] 요구사항 분석 구현 연습

첫 번째 미션

 - 카페의 에스프레소 메뉴판 만들기
 

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

• 에스프레소 메뉴에 새로운 메뉴를 확인 버튼 또는 엔터키 입력으로 추가한다.
  • 메뉴가 추가되고 나면, input은 빈 값으로 초기화한다.
  • 사용자 입력값이 빈 값이라면 추가되지 않는다.
• 메뉴의 수정 버튼을 눌러 메뉴 이름 수정할 수 있다.
  • 메뉴 수정시 브라우저에서 제공하는 prompt 인터페이스를 활용한다.
• 메뉴 삭제 버튼을 이용하여 메뉴 삭제할 수 있다.
  • 메뉴 수정시 브라우저에서 제공하는 confirm 인터페이스를 활용한다.
• 총 메뉴 갯수를 count하여 상단에 보여준다.

---

step 1. 요구사항 구현을 위한 전략

TODO 메뉴 추가

1. 메뉴의 이름을 입력 받고 엔터키 입력으로 추가한다.

   세부사항
   1-1. form 태그가 자동으로 전송되지 않도록 막아준다.
   1-2. input태그에 메뉴의 이름을 입력받도록 한다.
   1-3. 확인 버튼의 클릭 이벤트를 등록해준다.
   1-4. espresso-menu-list에 메뉴 리스트 태그가 생성되고 추가된다.

2. 메뉴의 이름을 입력 받고 확인 버튼을 누르면 메뉴가 추가된다.
3. 메뉴가 추가되고 나면, input은 빈 값으로 초기화한다
4. 사용자 입력값이 빈 값이라면 추가되지 않는다.
5. 총 메뉴 갯수를 count하여 상단에 보여준다. (TODO 메뉴 총 갯수 카운팅)

TODO 메뉴 수정

1. 메뉴의 수정 버튼을 클릭하면 메뉴 이름을 수정할 수 있는 prompt 창이 열린다.

   세부사항
   1-1. 메뉴 수정시 브라우저에서 제공하는 'propmt' 인터페이스를 활용

2. 수정 창에 메뉴 이름을 변경하고 완료버튼을 클릭하면 메뉴 이름이 수정된다.

TODO 메뉴 삭제

1. 메뉴 삭제 버튼을 클릭하면 해당 메뉴가 삭제된다.

  세부사항
  1-1. 메뉴 삭제시 브라우저에서 제공하는 'confirm' 인터페이스를 활용

2. 총 메뉴 갯수를 count하여 상단에 보여준다. (TODO 메뉴 총 갯수 카운팅)

---

step 1 과정에서 배운 내용 및 회고

1. 이벤트 위임이란 무엇이고 실제로 어떻게 적용하느지에 대해 알게 되었습니다.
2. 요구사항을 전략적으로 접근하기 위해 단계별로 세세하게 분석하는 것이 중요하다는 것을 알게 되었습니다.
3. DOM 요소를 가져올때는 '$표시를 사용하여 변수처럼 사용'할 수 있는 것을 배우게 되었습니다.
4. 새로운 메서드 insertAdjacentHtml, closest, contains을 알게 되었습니다.
5. window 내장 함수 prompt, confirm 사용 방법에 대해 알게 되었습니다.
6. form 태그가 가지고 있는 기본값 이벤트에 대해 알게 되었습니다.