CODE KATA #2

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

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

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

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

์˜ค๋Š˜์€ Javascript๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์š”๊ตฌ๋˜๋Š” ๊ฐ„๋‹จํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด๋ณด๋Š” ์—ฐ์Šต์„ ํ•ด๋ณด์•˜๋‹ค. ์š”๊ตฌ๋œ ์กฐ๊ฑด์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

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

โœ… The text of the title should change when the mouse is on top of it.
โœ… The text of the title should change when the mouse is leaves it.
โœ… When the window is resized the title should change.
โœ… On right click the title should also change.
โœ… The colors of the title should come from a color from the colors array.
โœ… DO NOT CHANGE .css, or .html files.
โœ… ALL function handlers should be INSIDE of "superEventHandler"

ํ•ด๊ฒฐ ๊ณผ์ •

ํ•ด๋‹น ์กฐ๊ฑด์„ ๋งŒ์กฑ์‹œํ‚ค๋Š” ๊ฒฐ๊ณผ๋ฌผ์„ ๋„์ถœํ•˜๊ธฐ ์œ„ํ•˜์—ฌ, event handler๋“ค์„ ํ•œ๊ณณ์— ์ €์žฅํ•  object์ธ superEventHandler๋ฅผ ์„ ์–ธํ•ด์ฃผ๊ณ , ์ƒ‰์ƒ๋“ค์„ ์ €์žฅํ•  colors array๋ฅผ ์„ ์–ธํ•ด ์ฃผ์—ˆ๋‹ค. ๋˜ํ•œ, ์ด๋ฒคํŠธ ๋ฐœ์ƒ์— ๋”ฐ๋ผ ํ…์ŠคํŠธ์˜ ๋ณ€ํ™”๊ฐ€ ์ฃผ์–ด์งˆ <h2>๋Š” document.querySelector("h2")๋ฅผ ํ†ตํ•ด title์ด๋ผ๋Š” ์ด๋ฆ„์œผ๋กœ ์„ ์–ธํ•ด์ฃผ์—ˆ๊ณ , ๊ฐ๊ฐ์˜ ์ด๋ฒคํŠธ๋Š” MDN Javascript Event๋ฅผ ์ฐธ์กฐํ•˜์˜€๋‹ค.

mouse enter, mouse leave

๊ฐ€์žฅ ๋จผ์ € ๊ตฌํ˜„ํ•œ ๊ฒƒ์€ "mouseenter" ์ด๋ฒคํŠธ ๋ฐœ์ƒ์‹œ, title์˜ ์ƒ‰์ƒ๊ณผ ํ…์ŠคํŠธ๋ฅผ ๋ฐ”๊พธ๋„๋ก ํ•˜๋Š” eventHandler์ด๋‹ค.

const superEventHandler = {};

๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋Š” ํ˜„์žฌ์˜ superEventHandler ๊ฐ์ฒด์˜ ํ•˜์œ„ ํ•จ์ˆ˜๋กœ, handleMouseEnter๋ฅผ ์„ ์–ธํ•˜๊ณ , ๋‚ด์šฉ์„ ์•„๋ž˜์™€ ๊ฐ™์ด ์ง€์ •ํ•ด์ฃผ์—ˆ๋‹ค.

const superEventHandler = {
  handleMouseEnter: function (event) {
    title.innerText = "The mouse is here!";
    title.style.color = colors[0];
  }
};

์ดํ›„ ์ด event handler๋ฅผ ์›ํ•˜๋Š” ๊ฐ์ฒด์— ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด ๊ฐ„๋‹จํžˆ ํ•ด๊ฒฐ๋˜๋Š”๋ฐ, ๋งˆ์šฐ์Šค๊ฐ€ ์˜ฌ๋ผ์™”๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๊ณ  ์‹ถ์€ ๊ฐ์ฒด๋Š” title์ด๊ธฐ ๋•Œ๋ฌธ์—, ์ด ๊ฐ์ฒด์— ์ถ”๊ฐ€ํ–ˆ๋‹ค.

title.addEventListener("mouseenter", superEventHandler.handleMouseEnter);

addEventListener์˜ ํŠน์„ฑ์€ ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ ์™€์•ผํ•˜๋Š” ํ•จ์ˆ˜์—, ์ธ์ž๋กœ์„œ ๋ฐœ์ƒํ•œ event๋ฅผ ์ž๋™์œผ๋กœ ๋„˜๊ฒจ์ฃผ๊ธฐ ๋•Œ๋ฌธ์—, superEventHandler์˜ handleMouseEnter์— ๋”ฐ๋กœ ์ธ์ž๋ฅผ ์ •ํ•ด์ฃผ์ง€ ์•Š์•„๋„ ์ „๋‹ฌ๋œ๋‹ค.

"mouseleave"์˜ ๊ฒฝ์šฐ๋„ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰ํ•ด์ฃผ๋ฉด ์ •์ƒ์ ์œผ๋กœ ์ž‘๋™ํ•œ๋‹ค.

resize, context menu

์ง€๊ธˆ๊นŒ์ง€์˜ event listener๋“ค์€ title์— ์ถ”๊ฐ€๋˜์–ด, title์—์„œ ํ•ด๋‹น ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒฝ์šฐ์— ๋ฐ˜์‘ํ•˜์˜€๋‹ค. ํ•˜์ง€๋งŒ ์‚ฌ์ด์ฆˆ๋ฅผ ๋ณ€๊ฒฝํ• ๋•Œ ๋ฐœ์ƒํ•˜๋Š” event์ธ "resize"๋Š” window์— event listener๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ์–ด์•ผ ์ •์ƒ์ ์œผ๋กœ ๋ฐ˜์‘ํ•œ๋‹ค. ๋”ฐ๋ผ์„œ,

handleResize: function (event) {
  title.innerText = "You just resized!";
  title.style.color = colors[2];
},

๋ฅผ superEventHandler์— ์ถ”๊ฐ€ํ•ด์ฃผ๊ณ ,

window.addEventListener("resize", superEventHandler.handleResize);

์œ„์™€ ๊ฐ™์ด event listener๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด, ์‚ฌ์ด์ฆˆ๋ฅผ ๋ณ€ํ™˜ํ•  ๋•Œ๋งˆ๋‹ค ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

๋ฐ˜๋ฉด์— ์šฐํด๋ฆญ์‹œ ๋ฐœ์ƒํ•˜๋Š” "contextmenu"๋Š” element ๋งˆ๋‹ค ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ณ , ๋Œ€ํ‘œ์ ์ธ ์‚ฌ์šฉ ์˜ˆ์‹œ๋กœ ์šฐํด๋ฆญ์„ ๋ชปํ•˜๊ฒŒ ํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค. ํ•˜์ง€๋งŒ, ์ด ์‚ฌ์ดํŠธ์˜ ํŠน์ • element์— contextmenu๋ฅผ ์„ค์ •ํ•˜๋ฉด, ํ•ด๋‹น element์—์„œ๋งŒ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€๋งŒ, window์— ํ•ด๋‹น ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด, ์ฐฝ์˜ ์–ด๋Š๊ณณ์—์„œ ์šฐํด๋ฆญ์„ ํ•˜๋”๋ผ๋„ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

์ตœ์ข… ๊ฒฐ๊ณผ

profile
CAU Business Administration

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