Banner

My Tech Blog (ํ‚ค๋ณด๋“œ)

๐Ÿ”ฅ ๋ฌธ์ œํ‚ค๋ณด๋“œ WASD    ํ™”์‚ดํ‘œ ๋ฐฉํ–ฅํ‚ค๊ฐ€ ์ „ํ™˜๋˜์–ด ใ…ใ„ดใ…‡ใ„น ์ž…๋ ฅ์ด ์•ˆ ๋˜๋Š” ํ˜„์ƒ ์ผ๋ถ€ ํšŒ์‚ฌ์˜ ๊ธฐ๊ณ„์‹ ํ‚ค๋ณด๋“œ์—๋Š” WASD ์™€ ๋ฐฉํ–ฅํ‚ค ๋ฐ˜์ „ ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค.๊ฒŒ์ž„ ํ™˜๊ฒฝ์—์„œ์˜ ํšจ์œจ์„ฑ์„ ๊ณ ๋ คํ•˜์—ฌ WASD์™€ ๋ฐฉํ–ฅํ‚ค์˜ ์—ญํ• ์„ ์‰ฝ๊ฒŒ ์ „ํ™˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ณ ์•ˆ๋œ ๊ธฐ๋Šฅ์ด์ฃ  ๋ฌผ๋ก  ๊ฒŒ์ž„์„ ํ•˜๋Š” ๋™์•ˆ์—๋Š” ์ด ๊ธฐ๋Šฅ์ด ํŽธ๋ฆฌํ•˜๊ฒ ์ง€๋งŒ, ํ…์ŠคํŠธ ์ž‘์—…์„ ํ•  ๋•Œ๋Š” ํ•œ ๋ฒˆ์”ฉ ๋ฐฉํ–ฅํ‚ค๋ž‘ ์ „ํ™˜๋˜์–ด ๊ธ€์ž ์ž…๋ ฅ์ด ๋ถˆํŽธํ•ฉ๋‹ˆ๋‹ค. ๐Ÿ’ก WASD ↔ ๋ฐฉํ–ฅํ‚ค ์ „ํ™˜ ๋ฌธ์ œ ํ•ด๊ฒฐ๋ฒ• ์ด๋Ÿด ๋•Œ๋Š” `Fn + W` ํ‚ค ์กฐํ•ฉ์„ ์ด์šฉํ•ด์„œ ๋‹ค์‹œ ์›๋ž˜ ์ƒํƒœ๋กœ ๋ณต๊ตฌ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ํ•ด๊ฒฐ ์™„๋ฃŒ! ๐Ÿ’ก  ์œˆ๋„์šฐํ‚ค ์•ˆ๋จนํž ๋•Œ ํ•ด๊ฒฐ๋ฒ• ํฌ์ŠคํŒ… ํ•˜๋ ค๊ณ  ํ™”๋ฉด ์Šคํฌ๋ฆฐ์ƒท ํ•˜๋ ค๋Š”๋ฐ ์ด์ œ๋Š” ์œˆ๋„์šฐ ํ‚ค๊ฐ€ ์•ˆ ๋จนํ˜€์„œ ํ•ด๊ฒฐ๋ฒ• ์ฐพ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค.. [Fn + ์œˆ๋„์šฐํ‚ค]๋ฅผ ๋ˆŒ๋Ÿฌ๋ณด๊ณ  ๋‹ค์‹œ ์œˆ๋„์šฐ ํ‚ค๋ฅผ ๋ˆŒ๋Ÿฌ๋ณด์„ธ์š”. ..
๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ๋งŒ๋“  ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๐Ÿฆ๋ชฉํ‘œ์ด๋ฒคํŠธ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ์ด๋ฒคํŠธ ๋ฒ„์Šค ๋ฐ addEventListener์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž.๊ทธ๋ฆฌ๊ณ  jQuery์™€ Vanilla JavaScript์—์„œ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. ๋‹ค์‹œ ํ•œ ๋ฒˆ ๋งํ•˜์ง€๋งŒ jQuery๋Š” ํ•œ๋•Œ ์›น ๊ฐœ๋ฐœ์—์„œ ํ•„์ˆ˜์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜€์ง€๋งŒ, ์ด์ œ๋Š” Vanilla JavaScript(์ˆœ์ˆ˜ JS)๋‚˜ React, Vue, Svelte ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋Œ€์ฒดํ•˜๋ฉด์„œ ์‚ฌ์šฉ์ด ์ค„์–ด๋“ค๊ณ  ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ addEventListener ์œ„์ฃผ๋กœ๋งŒ ์ •๋ฆฌํ–ˆ๊ณ  ์ˆœ์ˆ˜ํ•˜๊ฒŒ ์ด๋ฒคํŠธ ์ข…๋ฅ˜๋งŒ ๊ถ๊ธˆํ•œ ์‚ฌ๋žŒ์€ 6๋ฒˆ๋ถ€ํ„ฐ ์ฝ์œผ๋ฉด ๋œ๋‹ค. 1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ (JavaScript Event)์ด๋ฒคํŠธ(Event)๋Š” ์‚ฌ์šฉ์ž๋‚˜ ์‹œ์Šคํ…œ์ด ์›น ํŽ˜์ด์ง€์—์„œ ์ผ์œผํ‚ค๋Š” ๋™์ž‘์ด๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฒ„ํŠผ ํด..
์ธ์ ˆ๋ฏธ์˜€๋˜๊ฒƒ
'ํ‚ค๋ณด๋“œ' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก
์ƒ๋‹จ์œผ๋กœ