개요
시계는 1초마다 갱신되고 디지털 시계의 형식을 따른다.
타이머 아래에는 오늘의 날짜를 출력한다.
시계 기본 로직
new Date()객체를 통해 현재 시간 정보를 얻어오고 이를 가공해서 1초마다 뿌려준다.
시간 정보는 시계 외의 다른 컴포넌트들도 사용하므로 시간 정보를 얻는 코드는 유틸리티에서 구현하고 여기서는 그것을import해온다.
import { getDate, getTime } from '../utility/date.js';전역 변수로는 타이머 id, 전체 창 요소를 담을 변수, 각각 시간과 날짜를 출력할 요소들을 뒀다.
이미 열린 창에 대한 제어는 main.js에서 하므로 창을 닫을 때 필요한 타이머 id를 main.js에 넘겨줘야 한다.
전체 창, 시간, 날짜 요소는 clock.js 안의 많은 함수들이 접근해야 하므로 전역으로 빼줬다.
let TIMERID = null; // for clearInterval()
let clockEl = null; // ancestor element of clock
let printTimeEl = null;
let printDateEl = null;createClockEl()에서 전체 창을 생성한다. 새 창은 없던 요소가 생기는 것이므로 createElement()와 innerHTML을 이용해 뼈대를 만들어줬다.
const createClockEl = () => {
clockEl = document.createElement('div');
clockEl.id = 'clock-window';
clockEl.className = 'window';
clockEl.draggable = true;
clockEl.innerHTML = getInnerHtmlOfClockEl();
attachFullTimer();
return clockEl;
};
const getInnerHtmlOfClockEl = () => {
return `
<div class="title-bar">
<div class="title-bar-text">Clock</div>
<div class="title-bar-controls">
<button id ="close-btn" aria-label="Close"></button>
</div>
</div>
<div id="clock-body">
<div id = "clock-content-body"class="window-body">
<div id="clock-time-print">0</div>
<div id ="clock-date-print">0</div>
</div>
</div>
`;
};시계 뼈대를 만든 뒤 attachFullTimer()를 통해 시간, 날짜가 출력될 요소를 가져오고 initClock()을 호출한다.
const attachFullTimer = () => {
printTimeEl = clockEl.querySelector('#clock-time-print');
printDateEl = clockEl.querySelector('#clock-date-print');
initClock();
};
// Set the timer and call it by setInterval (every sec)
const initClock = () => {
setTime();
setDate();
TIMERID = setInterval(() => {
setTime();
setDate();
}, 1000);
};initClock()에서는 먼저 setTime(), setDate()를 호출해서 시간 정보들을 초기화해준 뒤 setInterval()의 콜백으로 위 함수들을 다시 호출하게끔 한다.
// Get and set real-time datas and display it on the screen
const setTime = () => {
printTimeEl.innerText = getTime();
};
const setDate = () => {
const dateInfo = getDate();
printDateEl.innerText = `
${dateInfo.day}, ${dateInfo.month} ${dateInfo.date}
`;
};setTime: 시, 분, 초setDate: 요일, 달, 일
utility의 date.js에서 가져온 getTime(), getDate() 정보를 기반으로 clock.js를 완성한다.
시계 닫기
창의 x 버튼을 누르면 해당 요소가 바탕화면에서 삭제된다.
시계 창의 경우 타이머를 제거해주지 않으면 창을 열 때마다 새로 생긴 타이머들이 계속 백그라운드에서 돌게 된다.
시계를 닫을 때 타이머를 제거해주기 위해 위에서 받아온 timerId로 clearInterval을 호출한다.
..utility/date.js
clickCloseBtn()은 창을 닫을 때 사용하는 공용 함수지만
창을 닫을 때timerId가 넘어오면clearInterval()을 실행해준다.
const clickCloseBtn = (elem, TIMERID) => {
elem.querySelector('#close-btn').addEventListener('click', () => {
if (TIMERID) clearInterval(TIMERID);
OPEN_EL_LIST.delete(elem);
elem.remove();
});
};마무리
시계 로직을 더 다듬거나 createClockEl에서 함수를 더 쪼개야 하나 싶었지만 진도를 위해 일단 이 정도에서 만족하기로 했다.
