Today I Learned #3

loopbacksealยท2020๋…„ 12์›” 30์ผ
1

Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
3/16
post-thumbnail

Date() ๊ฐ์ฒด, InnerText(), setInterval() ํ•จ์ˆ˜, ์‚ผํ•ญ์—ฐ์‚ฐ์ž

๋…ธ๋งˆ๋“œ ์ฝ”๋”์—์„œ ๋ฌด๋ฃŒ๋กœ ์ œ๊ณตํ•˜๋Š” ๊ฐ•์˜ ์ค‘ 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์˜ ๋ถ€๋ถ„๋งŒ ์ˆ˜์ •ํ•œ ์ฝ”๋“œ์ด๋‹ค.

์‚ผํ•ญ์—ฐ์‚ฐ์ž๋Š” ์ฒซ๋ฒˆ์งธ ํ•ญ์—๋Š” ์กฐ๊ฑด์„ ์ž‘์„ฑํ•œ ํ›„ ?๋ฅผ ์ž‘์„ฑํ•˜๊ณ , ๋‘๋ฒˆ์งธ ํ•ญ์—๋Š” ์กฐ๊ฑด์„ ์ถฉ์กฑ์‹œํ‚ค๋Š” ๊ฒฝ์šฐ๋ฅผ ์ž‘์„ฑํ•œ๋‹ค. ๊ทธ ํ›„์— :์„ ์ž‘์„ฑํ•˜์—ฌ ์„ธ๋ฒˆ์งธ ํ•ญ์„ ์ž‘์„ฑ๋ฐ›๋Š”๋ฐ, ์กฐ๊ฑด์„ ์ถฉ์กฑ์‹œํ‚ค์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ๋ฅผ ์„ธ๋ฒˆ์งธ ํ•ญ์œผ๋กœ ์ž‘์„ฑํ•˜๋ฉด ๋œ๋‹ค.

profile
CAU Business Administration

0๊ฐœ์˜ ๋Œ“๊ธ€