자바스크립트 기초 [clock 구현하기]

📍 Clock 구현하기

clock을 구현하기 전 Intervals, timeout의 차이점을 알고가는게 좋다.

✔️ Intervals

'매번' 일어나야하는 무언가

기본적이 작성 방법

setIntervals(호출 function, 호출되는 간격)
// 1. 실행하고자 하는 function을 작성
// 2. 호출되는 function 간격을 몇 ms(milliseconds)로 할지 작성

작성예시

const clock = document.querySelector("h2#clock");
function sayHello(){
    console.log("Hello");
}
setInterval(sayHello, 5000); //5초 간격으로 콘솔을 반복하여 실행한다.

✔️ timeout

Intervals와 비슷하게 생긴 구조지만 한 번만 실행한다.

기본적이 작성 방법

setTimeout(호출 function, 얼마나 기다릴지 ms)
// 1. 실행하고자 하는 function을 작성
// 2. 호출되는 function을 얼마나 기다릴지 ms단위로 할지 작성

작성예시

const clock = document.querySelector("h2#clock");
function sayHello(){
    console.log("Hello");
}
setTimeout(sayHello, 5000); // 5초 이후 표시된다. 한 번만 실행된다.

✔️ new Date()

현재 날짜를 호출 할 수 있다.

clock을 만들기 위해서는 Date object를 사용한다.

getDate, getDay, getFullYear, getHours, getMillisecods, getMinutes등 다양하게 존재한다.

💻 Javascript

const clock = document.querySelector("h2#clock");
function getClock(){
    const date = new Date();
    console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}
getClock() //1초 이후 실행되기 때문에 getClock을 미리 실행 시킨다.
setInterval(getClock, 1000);

❗️문제점

현재 시, 분, 초를 보여줄 수 있지만 초단위의 경우 0초 부터 다시 돌아갈 경우 0~9(한자리)로 표시 된다. 예를 들어 16:20:9로 표시되는데 생각 보다 보기 불편한다.

✔️ 해결 방법

해결하기 위해선 padSart(), padEnd()를 알아야한다.

padSart()

글자개수가 정해진 개수 보다 적을 경우 앞에 요소를 추가한다.

"1".padStart(2."0"); // 01
"안녕".padStart(4."0"); // 00안녕
"안녕".padStart(2."0"); // 자릿수가 맞기 때문에 적용되지 않는다.

padEnd()

글자개수가 정해진 개수 보다 적을 경우 뒤에 요소를 추가한다.

"1".padEnd(2."0") // 10
"안녕".padEnd(4."0"); // 안녕00
"안녕".padEnd(2."0"); // 자릿수가 맞기 때문에 적용되지 않는다.

💻 Javascript

const clock = document.querySelector("h2#clock");
function getClock(){
    const date = new Date(); 
  	const hours = String(date.getHours()).padStart(2,"0");
   	const minutes = String(date.getMinutes()).padStart(2,"0");
  	const seconds = String(date.getSeconds()).padStart(2,"0");
  	clock.innerText = `${hours} : ${minutes} : ${seconds}`;
}
getClock() //1초 이후 실행되기 때문에 getClock을 미리 실행 시킨다.
setInterval(getClock, 1000);

✔️ new Date()는 현재 날짜를 알려준다.
✔️ padStart, padEnd의 경우 String에만 사용 가능해 숫자인 시, 분, 초를 String()을 이용해 변경해 준다.
✔️ padStart를 이용해 숫자가 두자리가 아닌 경우 앞에 0을 붙여준다.

✏️ 마치며

노마드 코더 바닐라 JS를 보면서 javascript를 배우는데
항상 개발팀에 요청했던 사항을 내가 직접 코드를 작성해 화면에 노출 시키니 정말 신기하고 재밌다.

이걸 이용해 D-day도 만들 수 있을 거 같다.

프로그래밍 언어를 이용해서 html화면에 내가 원하는 모습으로 만들 수 있다는건 정말 멋진거 같다.

공부 출처 : 노마드 코더