[코드 리뷰] 6주차 (this, prototype)

내가 구현했던 방법)

⛔ 첫 번째 퀘스트
const html = generateTemplate.call(this).trim();

⛔ 두 번째 퀘스트
const digitalClock = new Clock({
  root: "#root",
  title: "Digital Clock",
  backgroundColor: "#E0F7FA",
  time: initialTime,
});

setInterval(() => {
  digitalClock.render();
  digitalClock.time = getTimeStamp();
}, 1000);

⛔ Advanced
const tag_H3 = document.querySelectorAll(".clock h3");
const tag_P = document.querySelectorAll(".clock p");
    
  for (let i = 0; i < html.length; i++) {
    this.$el.addEventListener("click", function (event) {
      if (event.target === tag_H3[i]) {
        clickEvents[".clock h3"]();
      }

      if (event.target === tag_P[i]) {
        clickEvents[".clock p"]();
      }
    });
  }

다른 이벤트의 객체도 추가되었을 시에 활용할 수 있는 방법

개선 전 Advanced 다른 구현 방식)
 Component.prototype.addClickEvent = function () {
    const DigitalClock = {Tittle: ".clock h3", Time: ".clock p" }

    this.$el.addEventListener(("click"), (e) => {
      if (e.target.localName === "h3") {
        generateEvents[DigitalClock.Tittle]();
      }
      
      if (e.target.localName === "p") {
        generateEvents[DigitalClock.Time]();
      }
    });
  }

여기서 만약 generateEvent가 주어진 .clock h3, .clock p외에 .clock .title 이런 식으로 들어온다면 어떻게 캐치할 수 있을까요?

지금은 .clock h3, .clock p일 때만 작동하도록 되어있기 때문에 다른 key값이 들어온다면 작동하지 않을 것입니다.

그러면 generateEvent/clickEvents의 key 값을 그대로 활용할 수 있는 방법으로 바꿔보는 것은 어떨까요?

✅ 개선 코드

Component.prototype.addEvents = function() {
  for (const target in generateEvents) {
    const $target = this.$el.querySelector(target);
    $target.addEventListener('click', generateEvents[target]);
  }
}

generateEvents / clickEvents의 key 값(target)을 순회하면서 this.$el 내에서 해당하는 요소를 가져와서 이벤트를 거는 흐름.

이런 식으로 조금 범용적으로 하는 방식을 추천.

events구현 객체 인자로 넘길 때 네이밍

동사로 시작하는 네이밍 => 함수에 사용

첫 번째 매개변수 generateTemplate은 html 태그를 string 형태로 반환하는 함수지만,
두 번째 매개변수 generateEvents는 이벤트에 관한 정보를 가진 객체이니 이렇게 적을 시 읽는 사람 입장에서 혼란이 있을 수 있다.

기존 코드에 네이밍 등을 맞추려는 노력은 좋지만,
내가 작성한 변수명이 변수의 타입과 관련해서도 좋은 가독성을 가지고 있는지도 같이 고민해볼 것.

👉 generateEvents -> clickEvents

시간 업데이트 부분 Component의 프로토타입의 메소드로 개선하기

좀 더 개선 ->
시간 업데이트 하는 부분을 Component의 프로토타입의 메소드로
넣어보는 방법.

setInterval(() => {
  digitalClock.render();
  digitalClock.time = getTimeStamp();
}, 1000);




✅ // component.js
 Component.prototype.updateTime = function (getTimeStamp) {
    setInterval(() => {
      this.time = getTimeStamp();
      this.render();
    }, 1000);
  }
  
✅ //app.js
digitalClock.render().updateTime(getTimeStamp);

Component.prototype.render 같은 경우는 this를 리턴을 하는데
이게 바로 시계(Component) 객체를 리턴

따라서 메소드 체이닝을 이용해서 다시 updateTime을 실행해주고 여기서
인자로 getTimeStamp 시간을 구해주는 함수를 넣어주면 깔끔하게
구현을 가능

• 메소드 체이닝