[14기 선리] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 #278
Conversation
| $munuCount.innerHTML = `총 ${menuNum}개`; | ||
| $menuNameInput.value = null; | ||
| }; | ||
| const addFunc = () => { |
There was a problem hiding this comment.
addFunc 는 함수가 무슨 일을 하는 지 이해하기 어려우니 의도를 알 수 있도록 네이밍하면 어떨까요~?
| 삭제 | ||
| </button> | ||
| </li>`; | ||
| if (name === '') { |
There was a problem hiding this comment.
name 에 대한 체크가 함수 가장 상단에 위치해서 리턴 하면 아래 코드를 읽어나가기 더 수월할 것 같아요
ealry return에 대해서도 한번 찾아보시면 좋을 것 같아요!😀
There was a problem hiding this comment.
early return 이라는 건 첨 들어보네요...!!!!! 역시 공부는 멀단 걸 느낍니다ㅜ 완전 감사합니다..!
|
|
||
| $menuList.addEventListener('click', (e) => { | ||
| if (e.target.classList.contains('menu-edit-button')) { | ||
| let edit = e.target; |
There was a problem hiding this comment.
위쪽은 const를 사용하고 여기부터는 let를 사용하신 이유가 궁금해요~!
There was a problem hiding this comment.
클릭할 때마다 변수 안에 들어가는 대상이 달라진다고 생각해서 let으로 처리했는데, const로 처리해도 될까요..?
| const $menuNameInput = document.querySelector('#espresso-menu-name'); | ||
| const $menuForm = document.querySelector('#espresso-menu-form'); | ||
| const $menuList = document.querySelector('#espresso-menu-list'); | ||
| const $munuCount = document.querySelector('.menu-count'); | ||
| const $menuSubmitBtn = document.querySelector('#espresso-menu-submit-button'); |
There was a problem hiding this comment.
사용되는 돔을 상단에 모아두니 보기 다음 코드를 읽어나가기 좋은 것 같아요! 👍
There was a problem hiding this comment.
리뷰 정말 감사합니다..!! 민오님 코드도 어떻게 코멘트를 하고 싶었지만 아직 제가 이해하기만도 어려운 부분들이 있는지라 코멘트는 못하고 공부만 하고 있었습니다..ㅎㅜ 계속 발전해서 스터디 끝나기 전에는 꼭...! 이것저것 코멘트 하며 리뷰도 할 수 있도록 해보겠습니다ㅎㅎ!!
이렇게 자바스크립트로 돔 조작을 본격적으로 한 건 거의 처음이나 다름없어서 떨리네요...!
뿌듯하기도 하고 즐겁기도 한데, 한편으로 코드가 너무 덕지덕지는 아닌가 싶어서 부끄럽습니다..ㅎ
앞으로도 열심히 공부해나가야겠어요..!
🎯 step1 요구사항 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기
prompt인터페이스를 활용한다.confirm인터페이스를 활용한다.<ul id="espresso-menu-list" class="mt-3 pl-0"></ul>안에 삽입해야 한다.