๋ ธ๋ง๋ ์ฝ๋์์ ๋ฌด๋ฃ๋ก ์ ๊ณตํ๋ ๊ฐ์ ์ค momentum์ด๋ผ๋ ํฌ๋กฌ ํ์ฅ ํ๋ก๊ทธ๋จ์ ๋ง๋ค์ด๋ณด๋ ๊ฐ์๋ฅผ ์์ํ๋ค. 1/14๋ถํฐ ์์๋๋ Challenges์ ์ฐธ์ฌํ๋๋ฐ ์๋ฐ๋ฅผ ๋ณํํ๋ฉฐ ์ํํ๊ธฐ์ ๋ฏธ๋ฆฌ ์์ต์ ํด๋์ง ์์ผ๋ฉด ๋ฐ๋ผ๊ฐ๊ธฐ ์ด๋ ค์ธ ๊ฒ์ผ๋ก ์์ํ๊ธฐ ๋๋ฌธ์ด๋ค.
"Divide & Conquer!" ์ฒ์ ๊ฐ์๋ฅผ ์์ํ๋ฉฐ ๋๊ผฌ๊ฐ ํญ์ ์ค์์ํ๋ผ๋ฉฐ ๋งํด์ฃผ์๋ค. ์ด๋ฒ ํ๊ธฐ์ ํ๋ก์ ํธ๋ค์ ์ํํ๋ฉด์๋ ๋ช๋ฒ์ฉ์ด๋ ๋ ์ฌ๋ ธ๋ ๋ฌธ๊ตฌ์ด์ง๋ง, ์ค์ ๋ก ๊ท๋ชจ๊ฐ ์ปค์ง๋ ํ๋ก์ ํธ์ ์ ์ฉ์ ์ ์ด๋ฃจ์ด์ง์ง ์์๋ค. ํ๋ก์ ํธ๋ฅผ ์ ์ธํ ๋ช๋ช ๊ณผ์ ๋ค์์๋ ์ด๋ฌํ ๋ฐฉ์์ผ๋ก ์ผ์ผํ ๋ชจ๋ ์ชผ๊ฐ์ ์์ฑ์ ํ์๋๋ฐ, main() ํจ์ ์์๋ printList() sortList()์ ๊ฐ์ ํจ์๋ค์ ์คํ๋ง ์กด์ฌํ๋๋ก ์ฝ๋ฉ์ ํ์, ์ถํ ์ํ๊ธฐ๊ฐ์ ๋ณต์ต์ผ์ ์ฝ๋๋ฅผ ๋ณผ๋์๋ ์๋ ๋ฌด์จ ํจ์, ์ค๋ ์ด๋ค ๊ธฐ๋ฅ์ด๊ตฌ๋๋ฅผ ํ ๋์ ์์๋ณผ ์ ์์ด ๋๋๋ ๊ธฐ์ต์ด ์๋ค. ๋ช ์ฌํ๊ณ ์ ์ฐจ ๊ท๋ชจ๊ฐ ๋ ํฐ ์ฝ๋์๋ ์ ์ฉํ ์ ์๋๋ก ๋ ธ๋ ฅํ์.
Date() ๊ฐ์ฒด๋ฅผ ๋ถ๋ฌ์ด์ผ๋ก์ ๊ฐ์ฒด๋ฅผ ๋ถ๋ฌ์จ ๋น์ ์๊ฐ์ ๋ณ์๋ก์ ์ ์ฅํ ์ ์๋ค.
์๊ฐ์ด ์๋ฌด๋ฆฌ ํ๋ฅธ ๋ค์ date.getMinute()๋ฅผ ํธ์ถํ์ฌ๋ 26์ด return๋ ๊ฒ์ด๋ค. ๋ด๊ฐ const๋ก date๋ฅผ ์ ์ฅํ์ ๋น์์ minute์ด ๋ฐ๋์ง ์๊ณ ์ ์ฅ๋์ด ์๊ธฐ ๋๋ฌธ์ด๋ค.
const clockContainer = document.querySelector(".js-clock"),
clockTitle = clockContainer.querySelector("h1");
function getTime(){
const date = new Date();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
clockTitle.innerText = `${hours}:${minutes}:${seconds}`
}
.innerText()์ ๋ฒกํฑ
์ ํ์ฉํ์ฌ Date ๊ฐ์ฒด์์ ๋ฐ์์จ hours์ minutes๋ฅผ clockTitle์์ ์ฝ์
ํด์ฃผ์๋ค.
์ฐธ๊ณ ๋ก querySelector()์์ ๊ทธ๋ฅ string์ html tag๋ก, .๋ถ์ผ๋ฉด class, #์ด ๋ถ์ผ๋ฉด id๋ก์ ์ธ์๋๋ค. getElementById()๋ id์ ๋ํ ์ ๊ทผ์ด ๊ฐ๋ฅํ๊ณ , ์ฒ๋ฆฌ์๋๊ฐ ๋ ๋น ๋ฅด๋ค๋ ์ฅ์ ์ด ์๊ณ , querySelector()๋ id๋ ์์์ ๋ํ ์ ๊ทผ์ ํ ๋, ๊ฐ์ ์ด๋ฆ์ ์์๊ฐ ๋ง๋ค๋ฉด, ๊น์ด์ฐ์ (depth-first) ์ ์์ํ(pre-order) ๋ฐฉ์์ผ๋ก ๊ฐ์ฅ ๋จผ์ ์ฐพ์ ์ฒซ๋ฒ์งธ ์์๋ฅผ return ํ๋ค๊ณ ํ๋ค. ๊ทธ์ธ์๋ node-list๋ก ๋ฐํํ๊ณ HTML Collection์ผ๋ก ๋ฐํ ํ๋ค๋ ์ฐจ์ด๊ฐ ์๋ค๊ณ ํ๋๋ฐ, ๊ทธ ๋ถ๋ถ์ ๋ํด์๋ ์ถํ ๋ค์ ๋ค๋ฃจ๋๋ก ํ๊ฒ ๋ค.
๋ค์ clockContainer๋ก ๋์๊ฐ์, ์ฒ์ ํ๋ฉด์ ๋ถ๋ฌ์์ ๋์ ์๊ฐ์ ๊ณ์ ์ถ๋ ฅํ๋๊ฒ ์๋ ์๊ฐ์ด ๋ฐ๋ ๋๋ง๋ค์ ์๊ฐ์ ์ถ๋ ฅํ๋๋ก ํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น?
์ฒ์์๋ ๊ฐ๋จํ setInterval() ํจ์๋ฅผ ํตํด ์๊ฐ์ 1์ด๋ง๋ค ๋ค์ ๋ฐ์์ค๋๋ก ํ์๋ค.
setInterval()ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ์๊ณ๊ฐ ๋งค์ด ์ต์ ํ ๋๋๋ก ํ๋๋ฐ๋ ์ฑ๊ณตํ์์ง๋ง, 59์ด์์ 0์ด๋ก ๋ณํ์ ์ด๊ฐ ํ์๋ฆฌ ์ ๋จ์๋ก๋ง ํํ๋๋ ๊ฒ์ด ์ ๊ฒฝ์ฐ์๋ค.
๋ฐ๋ผ์ ์ผํญ์ฐ์ฐ์๋ฅผ ํตํด ๋ง์ฝ ${seconds}
์ ๊ฐ์ด 10๋ณด๋ค ์์ผ๋ฉด 0${seconds}
๋ฅผ ์ถ๋ ฅํ๊ณ , ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ ${seconds}
๋ฅผ innerText์ ๊ฐ์ผ๋ก ํ๋๋ก ์์ฑํ์๊ณ , ๊ฒฐ๊ณผ๋ฅผ ํ์ธํด๋ณด์.
์ด์ฒ๋ผ 1์ด๊ฐ ์๋ 01์ด๋ก ํํ๋๋ ๊ฒ์ ํ์ธํ์๋ค!
clockTitle.innerText = `${
hours < 10 ? `0${hours}` : hours}:${
minutes < 10 ? `0${minutes}` : minutes}:${
seconds < 10 ? `0${seconds}`: seconds}`;
์ ๋ด์ฉ์ getTime() ํจ์์์ innerText์ ๋ถ๋ถ๋ง ์์ ํ ์ฝ๋์ด๋ค.
์ผํญ์ฐ์ฐ์๋ ์ฒซ๋ฒ์งธ ํญ์๋ ์กฐ๊ฑด์ ์์ฑํ ํ ?
๋ฅผ ์์ฑํ๊ณ , ๋๋ฒ์งธ ํญ์๋ ์กฐ๊ฑด์ ์ถฉ์กฑ์ํค๋ ๊ฒฝ์ฐ๋ฅผ ์์ฑํ๋ค. ๊ทธ ํ์ :
์ ์์ฑํ์ฌ ์ธ๋ฒ์งธ ํญ์ ์์ฑ๋ฐ๋๋ฐ, ์กฐ๊ฑด์ ์ถฉ์กฑ์ํค์ง ๋ชปํ๋ ๊ฒฝ์ฐ๋ฅผ ์ธ๋ฒ์งธ ํญ์ผ๋ก ์์ฑํ๋ฉด ๋๋ค.