6주차 과제 코드 리뷰

dataset의 data-id를 이용한 querySelector 사용

• HTMLelement.dataset

  • HTML 요소 인터페이스의 읽기 전용 프로퍼티, 요소의 사용자 정의 데이터 속성들(data-*)에 대한 읽기/쓰기 접근 권한을 제공함

• element.children

  • 요소의 모든 자손 요소들을 포함한 HTMLCollection을 반환함

• element.tagName

  • 요소의 tag 이름을 반환함

// 내 코드
const CLASS = {
  title: ".clock h3",
  time: ".clock p",
}
const $title = document.querySelector(CLASS.title);
const $time = document.querySelector(CLASS.time);
    
$title.addEventListener("click", () => {
  generateEvents[CLASS.title]();
});
$time.addEventListener("click", () => {
  generateEvents[CLASS.time]();
});

// 수정한 코드
const divID = this.$el.dataset.id;
const $div = document.querySelector(`[data-id="${divID}"]`);
const divElements = $div.children;

for (let i = 0; i < divElements.length; i++) {
  divElements[i].addEventListener("click", (event) => {
    if (event.target.tagName === "H3") {
      generateEvents[".clock h3"]();
    } else if (event.target.tagName === "P") {
      generateEvents[".clock p"]();
    }
  });
}

참고 : HTMLElement.dataset, Element.children, Element.tagName

세미 콜론(;)에 대한 일관된 코드 스타일

• 세미 콜론(;)으로 끝나야 하는 문
  • empty 문
  • let, const 선언문
  • import, export 모듈 선언문
  • 표현문
  • debugger
  • continue, break, throw
  • return

참고 : Lexical grammer - Automic semicolon insertion

코드 내 필요 없는 주석 삭제하기