#5 CLOCK | Notion

#5.0

Intervals

니꼬샘은 기능을 세분화해서 관리하는 방식(divide and conquer)를 선호한다. 이렇게 관리하면 기능의 이해도 빨라지고 코드가 짧아져서 유지 보수에도 좋아지기 때문이다.

interval은 매번 일어나야하는 무언가를 말한다. e.g. 매 2초 interval은 JS에 이미 내장되어있는 기능이며 다음 사용하는 함수는 setInterval 라는 함수이다.

const clock = document.querySelector("h2#clock");

function sayHello() {
  console.log("hello");
}

setInterval(sayHello, 5000);

위 코드에서 보면 setInterval함수는 두개의 argument를 받으며 하나는 실행할 함수 이름 다른 하나는 주기적으로 실행할 시간이다. 시간 단위는 ms으로 5초 단위로 실행할려면 5000이란 값을 넣으면 된다.

#5.1

Timeouts and Dates

위에서 setInterval를 사용했다면 이번엔 setTimeout을 사용해본다. setTimeout은 setInterval과 같이 두개의 argument를 받는데 동작은 setInterval와 달리 지정한 시간이 지나야 함수를 실행한다.

const clock = document.querySelector("h2#clock");

function sayHello() {
  console.log("hello");
}

setTimeout(sayHello, 5000);

이제부터 시간을 추가하는 기능을 넣을 것이면 JS에 Date object라는 함수를 사용할 것이다. Date mdn에서 document를 확인하면 사용할 수 있는 함수들이 나열되어있다. 그리고 다음과 같은 Date mdn에 있는 함수를 사용하여 매초마다 시간을 표시하는 코드를 구현한다.

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

setInterval(getClock, 1000);

이제 HTML tag에 구현한다.

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  clock.innerHTML = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}

getClock();
setInterval(getClock, 1000);

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="css/stylesheet" href="style.css" />
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Momentum App</title>
  </head>
  <body>
    <h2 id="clock">00:00:00</h2>
    <script src="js/greetings.js"></script>
    <script src="js/clock.js"></script>
  </body>
</html>

위 JS 코드에서 setInterval위에 getClock함수를 호출하는 이유는 setInterval이 실행되기 위해서는 argument에 들어간 ms이후에 동작을 하기 때문에 바로 동작하지 않는다는 문제가 발생한다. 그래서 브라우저가 실행이되고 시간을 바로 표시하기위해 추가로 getClock함수를 넣은 것이다.

#5.2

PadStart

대부분의 프로그래밍 코딩을 할때마다 난관에 부딪히는 문제는 다른 개발자들도 똑같은 문제를 겪었다고 100%확신해도 좋다. 그리고 그러한 문제를 많이 직면한 문제일 수록 해결책이 완벽하게 나와있을 것이다. 그렇기에 해당 언어에서 문제를 해결해주는 기능이 있는지 확인을 해본다.