CLOCK _ 노마드코더 _ 바닐라JS크롬앱만들기

노마드코더 바닐라 JS로 크롬 앱 만들기 강의를 듣고 정리한 기록입니다. 아래 내용은 5.0 - 5.2 에 해당합니다.

5.0 Intervals

우선 별도의 clock.js 파일을 만들어서 새로운 기능을 추가합니다. 하나의 파일에 여러 기능을 넣는 것보단 기능별로 파일을 불류하는 게 좋습니다. 우선 html 문서에 시간을 넣어줄 태그를 작성하고 js 문서에서 해당 태그를 선택합니다.

// html
<h2 id="clock">00:00:00</h2>

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

이제 시계에 쓰이는 함수 Intervlas 와 timeout 을 알아봅니다.
setInterval() 은 매번 반복해서 일어나야 하는 무언가가 있을 때 사용합니다. 개발을 하다보면 주기적으로 확인해야 하는 일들이 있습니다.

function sayHello() {
	console.log("hello");
}
setInterval(sayHello, 5000); // 5초에 한번씩 함수 실행
// 첫번째 인자는 실행할 함수, 두번째 인지는 호출되는 간격 ms 입니다.

5.1 Timeouts and Dates

일정 시간 후 딱 한 번만 함수를 실행하고 싶다면 setTimeout() 을 사용합니다.

function sayHello() {
	console.log("hello");
}
setTimeout(sayHello, 5000); // 5초 후에 함수 실행

시간을 보여주기 위해서는 js 가지고 있는 Date object 를 사용해야 합니다.

new Date() // 현재, 오늘, 지금 시간 정보를 불러옵니다.
const date = new Date();

date.getDate() // 날짜
date.getDay() // 요일
date.getFullYear() //년도
date.getHours() //시간
date.getMinutes() //분
date.getSeconds() //초

매 초마다 반복해서 시간, 분, 초를 불러오고 싶다면 interval 과 위 date 메소드를 활용합니다.

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

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

setInterval(getClock, 1000);

이대로 실행하면 1초 후에 첫 시간이 뜹니다. 그래서 앞에 함수를 넣어 첫 시간은 실행시켜 줍니다.

getClock();  
setInterval(getClock, 1000);

h2 에 값을 넣어주는 코드로 함수를 수정하면,

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

현재 코드에서는 초가 0, 1 처럼 한자리로 표현되는데 이 부분을 수정해야 합니다.

5.2 PadStart

어떤 문제를 발견했을 때 다른 개발자들도 이미 똑같은 문제를 겪었을 확률이 100% 입니다. 그렇다면 js 언어 자체에 그 작업을 수행하는 function 이 있을 확률이 높습니다.

string 이 최소 2개의 문자를 가지게 하고 싶다면, padStart() 를 사용하면 됩니다.

"1".padStart(2, "0")
"01"

// padding start, 문자열 앞쪽에 추가합니다.
// 첫번째 인자 2의 길이 만큼 있다면 그냥 두고, 없다면 두번째 인자로 채워줍니다.

"1".padEnd(2, "0");
"10" // padEnd 는 뒤쪽에 추가합니다.

padStart() 는 문자열만 확인하므로 받는 값을 문자열로 변환해서 붙여줘야 합니다. 기존 코드를 바꿔주면,

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();  
setInterval(getClock, 1000);