[TIL] 23/10/24 javascript : 팀과제, 이벤트위임, 모듈

🎅 한 일

[과제 해설 강의]

과제 해설 덕분에 좀 명쾌해졌다.
고민을 먼저하고 답을 보는게 역시 도움이 됨.
TIL 👇

 

[팀과제 회의]

같이는 처음하는 거라, 장시간의 마라톤 회의 후.

내 의견으로 다같이ㅋㅋ 튜터님을 괴롭히러 갔. 아니 물어보러 갔는데 

덕분에 역할 분담에 대해 명쾌해 졌다~!

필수 구현사항이 양이 아쉽긴 해서 분담이 어려우니

아쉽게 끝내지 않고 각자 하나씩 구현 해 보기.

내일까지 두개정도 씩  생각해 오고 그중에 하나정도 구현하겠지 ? 싶다.

 

🦌 할 일 / 부족한 점

1) 과제 구현 하고 싶은 부분 찾아 오기

2) 개인과제 개선할 점 반영

 - 파일 나누기

 - 함수 잘 나누기 별표

  =>그 수강생 코드 설명할 때 느낀건데 함수 잘 나눠놓고 딱딱 시퀀스 보이게 짜논거 감탄.. 

 

🙄 TIL

1) 여러개의 카드 노드에 클릭 핸들러 한번에 달아 주는 법 : 이벤트의 위임

상위 노드에만 이벤트를 달아서 자식 노드들의 이벤트를 처리 할 수 있다.

포문 돌려서 자식들에게 다 달아주지 않아도 됨.

• 그런데 본인이 눌리면 ?
  addEventListener에 등록시킨 함수에 매개변수를 적어주면 event 를 받아온다!
  if(event.target === 본인) 이면 return 쳐주면 끝~
  • event.target : 이벤트가 발생한 요소 (내가 클릭한 노드)
  • event.currentTarget : 이벤트가 핸들러가 등록되어있는 요소 (아까 핸들러 달아준 부모 노드)
  • html 노드를 가져오는 것이므로 event.target.id ,event.target.parentNode 등의 속성들을 사용하면 된다

const parent = document.querySelector("#parent");

parent.eventListener("click", handleClicked);

function handleClicked(event) {
	if(event.target===parent) return;
}

너무 강력하고.. 마음에 들고...

 

2 ) javascript 모듈

<script type="module" src="main.js"></script>

html 에 js 파일 가져올 때 type = "module" 써주기
파일 나눠서 구현하기. 협업에 좋음.
각자의 스코프를 가져서 이름이 중복 선언되어도 상관 없음

다른 파일의 함수를 가져올 경우 import 필요. (다른파일에서 export)

 

- script 지연 실행
header에서 js를 가져와도 됨

로딩이 백그라운드에서 먼저 일어나 시간절약 (defer 와 같음)

- strict 적용

a=10;

let, const  등 변수 선언 없이 사용 이런거 안됨

덕분에 과제에서 선언 안한거 찾아버렸네..