CODE KATA #3

loopbacksealยท2021๋…„ 1์›” 14์ผ
0

CODE KATA ๐Ÿง—โ€โ™‚๏ธ

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

CODE KATA ๐Ÿง—โ€โ™‚๏ธ

Javascript๋ฅผ ์ด์šฉํ•ด ์ฐฝ์˜ ๊ฐ€๋กœ ๊ธธ์ด์— ๋”ฐ๋ผ ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ์ด ๋‹ฌ๋ผ์ง€๋Š” ํ”„๋กœ๊ทธ๋žจ์„ ๊ตฌ์„ฑํ•ด๋ณด์ž.

์š”๊ตฌ์กฐ๊ฑด

Use if/else etc.

ํ•ด๊ฒฐ๊ณผ์ •

window์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ์„ ์ง€์ •ํ•  ๋•Œ, if,else if,else๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด ์„ธ๊ฐ€์ง€ ์ƒ‰์ƒ์„ ํ‘œํ˜„ํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

const bd = document.querySelector("body");

๋ฅผ ํ†ตํ•ด body๋ฅผ ํŽธํ•˜๊ฒŒ ์“ฐ๋„๋ก ์ง€์ •ํ•˜์˜€๋‹ค.

Divide & Conquer

๊ธฐ๋Šฅ๋ณ„๋กœ ๋‚˜๋ˆ„์–ด ๊ตฌ์ƒํ•˜์—ฌ, ํ•„์š”ํ•œ ํ•จ์ˆ˜๋Š” ํŽ˜์ด์ง€ ๋กœ๋“œ์‹œ, ๊ฐ€์žฅ ๋จผ์ € ์‹คํ–‰๋˜๋Š” init()๊ณผ window์˜ ํฌ๊ธฐ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ์„ ๊ฐ์ง€ํ•˜์—ฌ ๋ฐ˜์‘ํ•˜๋Š” ํ•จ์ˆ˜ handleResize(event) ๋‘๊ฐœ์ด๋‹ค. ๋‘ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜์—ฌ Divide ํ•ด์ฃผ์—ˆ๋‹ค.

init()

ํŽ˜์ด์ง€ ๋กœ๋“œ์‹œ ์‹คํ–‰๋˜๋Š” init()์—๋Š” ์‚ฌ์ด์ฆˆ๊ฐ€ ๋ณ€๊ฒฝ๋˜๋Š” event๋ฅผ ๊ฐ์ง€ํ•˜๋Š” event handler๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์—ˆ๋‹ค. MDN์˜ window ํ•ญ๋ชฉ์„ ์ฐธ๊ณ ํ•˜์—ฌ, window๊ฐ€ ํ•ด๋‹น ํ•ญ๋ชฉ ๊ฐ์ง€๋ฅผ ์œ„ํ•ด ํ•„์š”ํ•œ element์ด๊ณ , "resize" event๋ฅผ ๊ฐ์ง€ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์„ ํ™•์ธํ–ˆ๋‹ค.

window.addEventListener("resize", handleResize);

๋”ฐ๋ผ์„œ init() ํ•จ์ˆ˜์˜ ๋‚ด๋ถ€๋ฅผ ์œ„์™€ ๊ฐ™์ด ์ž‘์„ฑํ–ˆ๋‹ค.

handleResize(event)

window์— event listener๊ฐ€ ์ถ”๊ฐ€๋˜์–ด, "resize" event ๋ฐœ์ƒ์‹œ handleResize(event) ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์—, ํ•ด๋‹น ํ•จ์ˆ˜์˜ ๋‚ด์šฉ์„ ํ†ตํ•ด ์›ํ•˜๋Š” ๊ธฐ๋Šฅ ("์ฐฝ์˜ ๊ฐ€๋กœ ๊ธธ์ด์— ๋”ฐ๋ผ ๋ฐฐ๊ฒฝ ์ƒ‰์ƒ์ด ๋‹ฌ๋ผ์ง€๋Š”") ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋‚ด๊ฐ€ ์•Œ๊ณ ์žํ•˜๋Š” ์ฐฝ์˜ ๊ฐ€๋กœ ๊ธธ์ด๊ฐ€ ์–ด๋–ค ์†์„ฑ์ธ์ง€ ํ™•์ธํ•ด์•ผํ•œ๋‹ค. MDN์˜ window.innerWidth๋ฅผ ํ†ตํ•ด, ์›ํ•˜๋Š” ๊ฐ’์ด innerWidth์ธ์ง€ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•˜์—ฌ

let size = window.innerWidth;
console.log(size)

๋ฅผ handleReszie(event)์˜ ๋‚ด๋ถ€์— ์ž‘์„ฑํ•ด์ฃผ๊ณ  ์ฐฝ์˜ ๋„“์ด๋ฅผ ๊ณ„์† ๋ฐ”๊ฟ”์ฃผ์ž,

์œ„ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ๊ณ„์†ํ•ด์„œ ๋‚˜์˜ ์ฐฝ์˜ ๋„“์ด๊ฐ€ ์ถœ๋ ฅ๋จ์„ ํ™•์ธํ•˜์˜€๋‹ค. ๊ณต์‹ ๋ฌธ์„œ์ƒ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋“ฏ, integer value๋ฅผ returnํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ๊ฐ’์„ ๋ฐ”๋กœ ๋น„๊ตํ•˜๋ฉด ๋œ๋‹ค.

function handleResize(event) {
  let size = window.innerWidth;
  if (size < 400) {
    bd.style.backgroundColor = "deepskyblue";
  } else if (size < 600) {
    bd.style.backgroundColor = "blueviolet";
  } else {
    bd.style.backgroundColor = "orange";
  }
}

๋”ฐ๋ผ์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•œ ํ›„, ์‹คํ–‰ํ•ด๋ณด๋ฉด ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•จ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

์‹คํ–‰๊ฒฐ๊ณผ

profile
CAU Business Administration

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