💻 D-day 05

실시간으로 시간을 알 수 있도록 시계를 만들기로 했다. new Date를 이용해서 실시간 시간은 알 수 있다는 것을 알고 있어서 class를 만들어보기로 했다.

어제부터 자동으로 시계가 돌아가도록 만들고 싶었는데 코드를 구현하고 실행을 시키면 처음 시간만 나오고 setInterval이 작동이 되지 않았다. 구글링을 해서 함수로 만들어진 코드를 보고 class를 수정했지만 방법을 찾지 못했다. 오늘은 개발자인 지인에게 도움을 요청했다. 지인은 힌트를 주면서 하나의 기능을 다 만들어보고 나누는 것이 더 좋은 방법일거같다고 조언을 주었다. codestate에서 했던 과제를 참고해서 만들었는데 초보인 내가 따라하기엔 너무 완성된 코드였다는 것을 알게 되었다.

그래서 기능을 나누어서 생각하기보다 우선 작동이 되게 만들고 그 다음에 나누라는 조언을 참고해서 class에 내가 원하는 기능을 구현해보기로 했다. 객체를 만드는 것은 어렵지 않았지만 1초마다 업데이트를 하는 기능 구현하는 것이 어려웠다.

this를 배울때는 왜 이렇게 어려운것을 배워야하는지 몰랐는데 직접 만들어보니 생각보다 사용하는것이 더 편한 방법이구나 생각을 하게 되었다. this없이 구현하려면 얼마나 힘들었을까...this가 전역객체를 가르키고 있어서 binding을 해주고 실행을 하니 작동이 되었다.

//time.js
//time.js
if (typeof window === "undefined") {
  var jsdom = require("jsdom");
  var { JSDOM } = jsdom;
  var { document } = new JSDOM("").window;
}

class clockPrint {
  constructor() {
    //1초마다 실행
    setInterval(this.format.bind(this), 1000);
  }

  padLeft(ele) {
    if (ele < 10) {
      return "0" + String(ele);
    } else {
      return String(ele);
    }
  }

  format() {
    let elTime = document.querySelector(".Time");
    let date = new Date();
    var yyyy = date.getFullYear();
    var month = this.padLeft(date.getMonth() + 1);
    var dd = this.padLeft(date.getDate());
    var HH = this.padLeft(date.getHours());
    var mm = this.padLeft(date.getMinutes());
    var ss = this.padLeft(date.getSeconds());
    elTime.innerText = `${yyyy}년 ${month}월${dd}일
${HH}시 ${mm}분 ${ss}초`;
    return elTime;
  }
}

if (typeof window === "undefined") {
  module.exports = clockPrint;
}

//init.js에 추가된 코드
//init.js에 추가된 코드
function printTime() {
  new clockPrint();
}

printTime();

class를 실행만 시켜주면 시계가 만들어 진다. 다 만들고 꾸며보고 싶었으나 역시 디자인이 가장 어렵다.