[14기 신성수] step1 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 #270
Conversation
| @@ -14,6 +14,9 @@ | |||
| </a> | |||
| </p> | |||
|
|
|||
| # 팀원 이름 넣기 | |||
| ## 성수님, 세빈님, 도현님, 재원님, 경아, 지혜님 환영합니다~ | |||
There was a problem hiding this comment.
헉 제가 오타를 냈네요 ㅠㅠ 수정 빠르게 하도록 하겠습니다
춤을 추는 ㅎㅎ 까먹지않겠네요 ㅎㅎ
| import { DELETE_MESSAGE, EDIT_MESSAGE } from '../common/constants.js'; | ||
|
|
||
| function Menu() { | ||
| this.$inputText = document.getElementById("espresso-menu-name"); |
There was a problem hiding this comment.
강의에 나온 거지만, 저는 const $ = (selector) => document.querySelector(selector) 처럼 DOM을 선택할 수 있는 유틸 함수를 만들어서 했는데, 코드 반복이 줄어서 편했어요!
|
|
||
| this.editEvent = (event) => { | ||
| const newValue = prompt(EDIT_MESSAGE); | ||
| const menuId = event.target.closest("li").dataset.menuId; |
There was a problem hiding this comment.
오.. 이벤트 리스너 자체는 각 버튼에 달려있는데 이벤트 발생하면 제일 가까운 상위 li 태그를 찾는거죠? 이런 방법도 있었네요!! 😲 closest 문법 알아갑니다!
제가 문벅스 가이드북의 event에 대한 글을 읽었는데, 이벤트 리스너가 달린 요소가 많을 수록 페이지 실행 속도가 늦어진다는 구절이 있었어요! 그래서 부모 요소에 이벤트 리스너를 달아서 자식 요소에 이벤트가 발생했을 때 해당 이벤트를 캡쳐해서 사용하도록 이벤트 위임을 사용해봐도 좋을 것 같아요! 저도 잘은 모르지만ㅎㅎ url 첨부합니다! EVENT
There was a problem hiding this comment.
링크까지 감사합니다 😄
캡처링, 버블링 이런 요소들이 많이 있었네요
| @@ -0,0 +1,16 @@ | |||
| function MenuCount() { | |||
| this.$menuCount = document.getElementsByClassName("menu-count")[0]; | |||
There was a problem hiding this comment.
querySelector 보다 getElementByClassName을 쓰신 이유가 성능 적인 이슈 때문에 쓰신 건지 어떤 이유에서 쓰신 건지 궁금합니다!
There was a problem hiding this comment.
querySelector 보다 getElementById 나 getElementByClassName 같이 명확하게 알수 있을 것같아서 사용했었습니다
https://bobbohee.github.io/2021-02-12/getelementbyid-versus-queryselector
찾아보니깐 속도도 별로 차이도 없고 짧게 쓸수 있고 재사용성도 높은 querySelecto를 좋아하나보네요~
생각할 수 있는 코멘트 남겨주셔서 감사합니다
| document.addEventListener('DOMContentLoaded', () => { | ||
| const app = new App(); | ||
| app.render(); | ||
| }); |
There was a problem hiding this comment.
파일마다 end of line 추가 하시면 좋을 것 같습니다!
github에서 No newline at end of file 떠서 찾아보니 이런 글이 있어서 남겨볼게요!
There was a problem hiding this comment.
아 그렇군요 감사합니다
리액트나 뷰를 할때는 prettier 때문에 알아서 마지막 개행을 생각 안했었네요
🎯 step1 요구사항 - 돔 조작과 이벤트 핸들링으로 메뉴 관리하기
prompt인터페이스를 활용한다.confirm인터페이스를 활용한다.<ul id="espresso-menu-list" class="mt-3 pl-0"></ul>안에 삽입해야 한다.🔥 만들면서 생각한것