๋๋ ๊ฐ์ธ์ ์ผ๋ก ํฌ๋ฆฌ์ค๋ง์ค์ ๋ถ์๊ธฐ์ ๋ฌด๋๋ฅผ ๋งค์ฐ ๋งค์ฐ ์ข์ํ๋ ์ฌ๋์ด๋ค. ์์ง ํ์ฌ๋ฆ๋ ์ฑ ์ค์ง ์์์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ์ฌ ์ฌํด ํฌ๋ฆฌ์ค๋ง์ค๊น์ง ๋จ์ ์๊ฐ์ ๊ณ์ฐํด ๋ณด์!
1. JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ํฌ๋ฆฌ์ค๋ง์ค๊น์ง ๋จ์ ์๊ฐ ๊ณ์ฐํ๊ธฐ
๋จผ์ HTML์ ๊ฐ๋จํ๊ฒ ์์ฑํ๊ณ , ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์์ฑํด๋ดค์! ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ธ๋ญ ๋ด์ ์์ ๋จ๊ณ๋ฅผ ์ฃผ์์ผ๋ก ์ ์ด๋์๊ณ , ์์ธํ ์ค๋ช ์ ์ฝ๋๋ธ๋ญ ํ๋จ์์ ํ์ด์ ์ ์ด๋ณด๋ ค๊ณ ํ๋ค.
<!DOCTYPE html>
<html>
<head>
<title>Santa is coming!<</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Santa is coming!</h1>
<h2 class="countdown"></h2>
<script src="src/index.js"></script>
</body>
</html>// 1) ์๊ฐ์ ํ์ํ HTML ์์ ์ง์
const countdownClock = document.querySelector(".countdown");
// 2) ํจ์ ์์ฑํ๊ธฐ
const waitingXmas = () => {
// (1) ์ค๋ ๋ ์ง์ ์ฌํด ํฌ๋ฆฌ์ค๋ง์ค ๋ ์ง ๊ตฌํ๊ธฐ
const today = new Date();
const currentYear = today.getFullYear();
const xmas = new Date(currentYear, 11, 25);
// (2) ํฌ๋ฆฌ์ค๋ง์ค์ ์ค๋ ๋ ์ง ์ฐจ์ด ๊ตฌํ๊ธฐ
const diff = Math.abs(xmas - today);
// (3) ์ผ, ์, ๋ถ, ์ด ๋จ์์ ๋ง์ถ์ด ํํ
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
// (4) innerHTML๋ก ํ๋ฉด์ ํํ
const countdown = `${days}d ${hours}h ${minutes}m ${seconds}s`;
countdownClock.innerHTML = countdown;
};
// 3) ์ด๊ธฐํ ํ 1์ด ๋จ์๋ก ๋ค์ ํจ์๋ฅผ ํธ์ถํ์ฌ ๋ฆฌ์
waitingXmas();
setInterval(waitingXmas, 1000);1) ์๊ฐ์ ํ์ํ HTML ์์ ์ง์
- Document.querySelector()๋ฅผ ์ฌ์ฉํ์ฌ HTML์ h2 ์์๋ฅผ ์ง์ ํ๋ค.
- Document.querySelector()๋ ์ ๊ณตํ ์ ํ์ ๋๋ ์ ํ์ ๋ญ์น์ ์ผ์นํ๋ ๋ฌธ์ ๋ด ์ฒซ ๋ฒ์งธ Element๋ฅผ ๋ฐํ (๋จ, ์ผ์นํ๋ ์์๊ฐ ์์ผ๋ฉด `null` ๋ฐํ)
2) ํจ์ ์์ฑ
(1) ์ค๋ ํ์ฌ ๋ ์ง์ ์ฌํด ํฌ๋ฆฌ์ค๋ง์ค ๋ ์ง ๊ตฌํ๊ธฐ
- ๊ทธ๋ฅ Date()๋ก ํธ์ถํ๋ฉด ์๋๋? ์์ new ์ฐ์ฐ์๋ฅผ ๋ถ์ฌ์ new Date()๋ก ์์ฑํ๋ ์ด์
์๋ก์ด Date ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ new ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ ์ผํฉ๋๋ค. now = Date();์ฒ๋ผ Date๋ฅผ ์ง์ ํธ์ถํ๋ฉด ์๋ก์ด Date ๊ฐ์ฒด๊ฐ ์๋๋ผ ๋ฌธ์์ด์ ๋ฐํํฉ๋๋ค.
- Date.prototype.getMonth() : ํ์ง ์๊ฐ ๊ธฐ์ค ์์ ๋ํ๋ด๋ 0์์ 11 ์ฌ์ด์ ์ ์๋ฅผ ๋ํ๋ธ๋ค. ์ฆ, 0์ 1์, 1์ 2์... 11์ 12์์ ์๋ฏธํจ์ ์ ์ํ ๊ฒ!
(2) ํฌ๋ฆฌ์ค๋ง์ค์ ์ค๋ ๋ ์ง ์ฐจ์ด ๊ตฌํ๊ธฐ
- const diff = Math.abs(xmas - today)
- (xmas - today)๋ฅผ ํตํด ๊ตฌํ diff ๊ฐ์ ํฌ๋ฆฌ์ค๋ง์ค ๋ ์ง์์ ์ค๋ ๋ ์ง๋ฅผ ๋บ ๊ฐ์ ์ป๊ฒ ๋๊ณ , ์ด ๊ฐ์ ๋ ๋ ์ง ์ฌ์ด์ ์๊ฐ ๊ฐ๊ฒฉ์ ๋ํ๋ธ๋ค. (์ด ์๊ฐ ๊ฐ๊ฒฉ์ ๋ฐ๋ฆฌ์ด ๋จ์๋ก ๊ณ์ฐ๋จ)
- Math.abs() ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ํด๋น ์๊ฐ ๊ฐ๊ฒฉ์ ์ ๋๊ฐ์ ๊ณ์ฐํ๋ค. ์ ๋๊ฐ์ ์ทจํ๋ฉด ํญ์ ์์๊ฐ ๋๊ณ , diff ๋ณ์์๋ ํฌ๋ฆฌ์ค๋ง์ค์ ์ค๋ ๋ ์ง ์ฌ์ด์ ์ ๋์ ์ธ ์๊ฐ ๊ฐ๊ฒฉ์ด ์ ์ฅ๋๋ค.
- ์ด๋ ๊ฒ ๊ตฌํ diff ๊ฐ์ ๋ฐ๋ฆฌ์ด ๋จ์์ด๋ฏ๋ก, ์ด ๊ฐ์ ์ด์ฉํ์ฌ ์ผ, ์, ๋ถ, ์ด ๋จ์๋ก ๋ณํํ์ฌ ์นด์ดํธ๋ค์ด์ ํ์ํ ์ ์์
(3) ์ผ, ์, ๋ถ, ์ด ๋จ์์ ๋ง์ถ์ด ํํ
์๋ฐ์คํฌ๋ฆฝํธ์์๋ ์๊ฐ์ ๋ณดํต ๋ฐ๋ฆฌ์ด(ms) ๋จ์๋ก ๊ณ์ฐํ๋ค. 1s = 1,000ms
diff ๋ณ์์๋ ํฌ๋ฆฌ์ค๋ง์ค์ ์ค๋๊ณผ์ ์๊ฐ ์ฐจ์ด๊ฐ ๋ฐ๋ฆฌ์ด ๋จ์๋ก ์ ์ฅ๋์ด ์์ผ๋ฏ๋ก, ์ด ๋ฐ๋ฆฌ์ด๋ฅผ ๊ฐ๊ฐ ์ด, ๋ถ, ์, ์ผ ๋จ์์ ๋ง์ถฐ์ ๋ณํํด์ฃผ์ด์ผ ํจ
- const seconds = Math.floor((diff % (1000 * 60)) / 1000)
- diff % (1000 * 60) : ๋ฐ๋ฆฌ์ด ๋จ์์์ ๋ถ ๋จ์๋ฅผ ์ด๊ณผํ ๋๋จธ์ง ์๊ฐ์ ๊ตฌํจ
- diff % (1000 * 60) / 1000 : ๋๋จธ์ง ์๊ฐ์ 1000์ผ๋ก ๋๋์ด ๋ฐ๋ฆฌ์ด ๋จ์์์ ์ด ๋จ์๋ก ๋ณํ
- const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
- diff % (1000 * 60 * 60) : ๋ฐ๋ฆฌ์ด ๋จ์์์ ์๊ฐ ๋จ์๋ฅผ ์ด๊ณผํ ๋๋จธ์ง ์๊ฐ์ ๊ตฌํจ
- diff % (1000 * 60) / (1000 * 60) : ์๊ฐ ๋จ์๋ฅผ ๋ถ ๋จ์๋ก ๋ณํ
(4) innerHTML๋ก ํ๋ฉด์ ํํ
- innerHTML์ ์ฌ์ฉํ์ฌ ์ฒ์์ Document.querySelector๋ก ์ง์ ํด๋๋ HTML <h2> ์์์ ์๊ฐ์ ์ผ, ์, ๋ถ, ์ด๋ก ๋๋์ด์ ํ์ํ๋ค.
3) ์ด๊ธฐํ? ๊ทธ๋ฆฌ๊ณ setInverval()
waitingXmas(); // ์ด๊ธฐํ
setInterval(waitingXmas, 1000);- ์ฒ์ ํ์ด์ง๊ฐ ๋ก๋๋ ๋ `waitingXmas()` ํจ์๋ฅผ ์คํํ๋ฉด ํ์ฌ ์๊ฐ๊ณผ ํฌ๋ฆฌ์ค๋ง์ค๊น์ง์ ๋จ์ ์๊ฐ์ด ๊ณ์ฐ๋์ด `countdownClock` ์์์ ํ์๋๋ค. ์ด๊ฒ์ ํ์ด์ง๊ฐ ์ด๋ฆด ๋ ์ฌ์ฉ์์๊ฒ ์ด๊ธฐ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ ์ญํ ์ ํจ.
- ๊ทธ ํ์๋ `setInterval(waitingXmas, 1000);`์ ์ฌ์ฉํ์ฌ `waitingXmas()` ํจ์๊ฐ 1์ด๋ง๋ค ์ฃผ๊ธฐ์ ์ผ๋ก ํธ์ถ๋๋๋ก ํด์ ๋จ์ ์๊ฐ์ด ์ค์๊ฐ์ผ๋ก ์ ๋ฐ์ดํธํ๋ค.
- ์ ๋ฆฌํ๋ฉด, `waitingXmas()`๋ฅผ ์คํํด์ ์ด๊ธฐํํ๋ ๊ฒ์ ํ์ด์ง๊ฐ ์ต์ด ๋ก๋ฉ๋ ๋ ์ต์ด๋ก ๋จ์ ์๊ฐ์ ๊ณ์ฐํ๊ณ ํ์ํ๋ ์ญํ ์ ํ ๋ฒ๋ง ์ํํ๋ ๊ฒ์ด๋ผ๊ณ ์ดํดํ๋ฉด ๋๋ค. ๊ทธ ์ดํ๋ก๋ `setInterval()`์ ํตํด ์ฃผ๊ธฐ์ ์ผ๋ก ์ ๋ฐ์ดํธ๊ฐ ์ด๋ฃจ์ด์ง.
- setInterval(waitingXmas, 1000) :์๋ฐ์คํฌ๋ฆฝํธ์์๋ ๋ฐ๋ฆฌ์ด ๋จ์๋ฅผ ์ฌ์ฉํ๋ฏ๋ก 1,000ms, ์ฆ 1s ๊ฐ๊ฒฉ์ผ๋ก ์ ๋ฐ์ดํธ ๋ํ๋๋ก ์ ๋ ฅํด์ค๋ค.
2. ์, ๋ถ, ์ด๋ฅผ 2์๋ฆฌ ์๋ก ํํํ๊ธฐ
์๋ฅผ ๋ค๋ฉด, 1h 5m 8s โก๏ธ 01h 05m 08s ํ์์ผ๋ก ํํํ๋ ค๊ณ ํจ!
1) String.prototype.padStart()
//String().padStart(2, '0')
const days = String(Math.floor(diff / (1000 * 60 * 60 * 24))).padStart(2, '0');
const hours = String(Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
const minutes = String(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
const seconds = String(Math.floor((diff % (1000 * 60)) / 1000)).padStart(2, '0');padStart() ๋ฉ์๋๋?
ํ์ฌ ๋ฌธ์์ด์ ์์์ ๋ค๋ฅธ ๋ฌธ์์ด๋ก ์ฑ์, ์ฃผ์ด์ง ๊ธธ์ด๋ฅผ ๋ง์กฑํ๋ ์๋ก์ด ๋ฌธ์์ด์ ๋ฐํํ๋ค. ์ฑ์๋ฃ๊ธฐ๋ ๋์ ๋ฌธ์์ด์ ์์(์ข์ธก)๋ถํฐ ์ ์ฉ๋๋ค.
str.padStart(targetLength [, padString])
- targetLength : ๋ชฉํ ๋ฌธ์์ด ๊ธธ์ด. ํ์ฌ ๋ฌธ์์ด์ ๊ธธ์ด๋ณด๋ค ์๋ค๋ฉด ์ฑ์๋ฃ์ง ์๊ณ ๊ทธ๋๋ก ๋ฐํํด์ค๋ค.
- padString : ํ์ฌ ๋ฌธ์์ด์ ์ฑ์๋ฃ์ ๋ค๋ฅธ ๋ฌธ์์ด. ๋ฌธ์์ด์ด ๋๋ฌด ๊ธธ์ด ๋ชฉํ ๋ฌธ์์ด ๊ธธ์ด๋ฅผ ์ด๊ณผํ๋ค๋ฉด ์ข์ธก ์ผ๋ถ๋ฅผ ์๋ผ์ ๋ฃ์. ๊ธฐ๋ณธ๊ฐ์ " "์ด๋ค.
3. ์ฌํด ํฌ๋ฆฌ์ค๋ง์ค๊ฐ ์ง๋๋ฉด ๋ด๋ ํฌ๋ฆฌ์ค๋ง์ค๋ฅผ ๊ธฐ์ค์ผ๋ก ์นด์ดํธ๋ค์ด
let xmas
if (today.getMonth() === 11 && today.getDate() > 25) {
xmas = new Date(currentYear + 1, 11, 25);
} else {
xmas = new Date(currentYear, 11, 25);
}
const diff = xmas - today;- xmas๋ ์ฌํ ๋น์ด ๊ฐ๋ฅํ๋๋ก const๊ฐ ์๋ let์ผ๋ก ์ ์ธ
- if๋ฌธ ์ฌ์ฉ
- ์กฐ๊ฑด : ์ค๋ ๋ ์ง๊ฐ 12์(today.getMonth() === 11), ๊ทธ๋ฆฌ๊ณ (&&) 25์ผ์ด ์ง๋๋ฉด
- ๋ฐํ : ์นด์ดํธ ํ๋ ๊ธฐ์ค์ด ๋๋ xmas์ ์ฐ๋๋ฅผ ๋ด๋ (currentYear + 1)์ผ๋ก ๋ณ๊ฒฝ
- else ๋ฐํ : ๊ทธ๋ ์ง ์์ผ๋ฉด ๊ทธ๋ฅ currentYear, 12์ 25์ผ ๊ทธ๋๋ก ๋ฐํ
- ์ด ๊ฒฝ์ฐ์๋ xmas - today ์ฌ์ด์ ์์๊ฐ ๋์ค์ง ์์ผ๋ Math.abs ์ฌ์ฉํ ํ์๊ฐ ์๊ฒ ๋จ!
4. ์ต์ข ์์ฑ ์ฝ๋
const countdownClock = document.querySelector(".countdown");
const waitingXmas = () => {
const today = new Date();
const currentYear = today.getFullYear();
let xmas;
if (today.getMonth() === 11 && today.getDate() > 25) {
xmas = new Date(currentYear + 1, 11, 25);
} else {
xmas = new Date(currentYear, 11, 25);
};
const diff = xmas - today;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = String(
Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
).padStart(2, "0");
const minutes = String(
Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
).padStart(2, "0");
const seconds = String(Math.floor((diff % (1000 * 60)) / 1000)
).padStart(2, "0");
const countdown = `${days}d ${hours}h ${minutes}m ${seconds}s`;
countdownClock.innerHTML = countdown;
};
waitingXmas();
setInterval(waitingXmas, 1000);
๊ฐ๋จํ ๊ฒ์ด๋ผ ์๊ฐํ๋๋ฐ ์๊ฐ๋ณด๋ค ๊ณต๋ถํด ๋ณผ ์์๋ค์ด ๋ง์์ ๋ฐ๋ก ์ ๋ฆฌํด๋ดค๋ค.
ํ๋ฆฐ ๋ด์ฉ, ์ฐธ๊ณ ํ ๋ด์ฉ์ด ์๋ค๋ฉด ๋๊ธ๋ก ์๋ ค์ฃผ์ธ์!
์ฐธ๊ณ ์ฌ์ดํธ
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
'๐ป Programming > JS, TS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ์ด๋ฒคํธ ๊ฐ์ฒด (0) | 2024.01.13 |
|---|---|
| [JavaScript] window&document ์ ์ญ๊ฐ์ฒด์ DOM (0) | 2024.01.11 |
| [JavaScript] slice vs splice vs split ์ฐจ์ด์ (0) | 2023.08.08 |
| [TypeScript] Map (0) | 2023.07.27 |
| [JavaScript] var, let, const (0) | 2023.06.20 |
