That's me
개인 프로젝트
이벤트 위임!!
... 은 아직 정리가 완벽히 되지는 않았지만 어쩌다보니 구현 했더라
Parent Element에 eventListener를 추가해서 Child element를 event를 감지하는 것. 감지할 때는 event.target을 사용하면 된다.
아래와 같은 구조가 있을 때
<body>
<div id="parent">
<div id="child1" class="child">첫번째</div>
<div id="child2" class="child">두번째</div>
<div id="parasite">기생충</div>
</div>
</body>아래는 JS 부분
const parent = document.getElementById("parent");
parent.addEventListener("click", function(event) {
console.log("부모에서 무언가 클릭됨");
if (event.target.matches("child")) {
console.log("child 클릭됨");
}
});즉, child에 이벤트 리스너를 추가하는 것이 아닌 상위 요소에 추가해서 리스너를 다는 것.
TMI) 어쩌다보니 구현한 이유
원래는 child 요소에 이벤트 리스너를 구현했다가 클릭된 요소를 콘솔에 출력하게끔 쓴 코드에서, 1번 child를 누르고, 2번 child를 누르고, 부모를 누르면 콘솔에
child1 clicked (1번 child 눌렀을때)
==============
child2 clicked (2번 child 눌렀을때, 분명 2번 child를 1번만 눌렀다)
child2 clicked
==============
child2 clicked (부모만 눌렀을때, child는 왜 뜨니???)
child2 clicked
parent clicked뭐 이런식으로 떠서 구글링 해보니 저 현상이 event bubbling이라고 하더라. 그리고 저걸 방지하려면 상위 요소에 리스너를 추가하는 것이 해결방식이라고 해서 어쩌다보니 구현해버렸다. ㅇㅅㅇ....
이것이 자기주도적 선행학습인가??
달리기반
오늘은 실습수업이었는데, 중요한것은!!
filter, map, forEach 문법에 익숙해지고 자주 사용할 것!
spread operator: ...는 구조분해할당 혹은 배열 복사 등에 자주 사용되므로 이것도 익숙해질 것
추가로 배운 점)
// example
let someone = { name: "Alice", age: 30, city: "NewYork" };
const chay = { ...someone, name: "Chay" }; // key값이 동일하면 overwrite 됨스프레드 써서 복사후에 키값이 동일하면 덮어쓰인다.
Git 특강
오늘도 돌아온 git 명령어 시간
git branch 브랜치명: 브랜치명 확인 또는 생성git switch 브랜치명/git checkout 브랜치명: 접속 브랜치 바꾸기git merge: 이동 후 합치는 것 잊지 말것, 브랜치 합치기- GitHub pull-request: 당겨서 합치기
git push origin 브랜치명: 방화하고 튀기 (농담입니다ㅋㅋ)
협업할때의 순서 (메뉴얼이라고 봐도 무방해)
- 생성 및 이동
- 기능 개발 및 코드 저장
- 코드 업로드 및 pull request 생성
- Github에서 merge
- 내 로컬에도 반영
실전 협업 가이드
Main 브랜치는 배포용 (사람들이 사용할 수 있도록)
그리고 더 있었으나, 대학때 지겹도록 열심히 한 충돌 해결 내용이길래...
죄송합니다 노트는 여기까지 썼어요
마치며...
코딩과 감자로 미쳐가는 제 방입니다.
첫과 끝이 너무 반전되는 til이군요? 쉽지않네요;