Banner

My Tech Blog (์ด๋ฒคํŠธ)

์˜ค๋Š˜์˜ ๋ช…์–ธ
" ์ž์‹ ๊ฐ ์žˆ๋Š” ํ‘œ์ •์„ ์ง€์œผ๋ฉด ์ž์‹ ๊ฐ์ด ์ƒ๊ธด๋‹ค. "
- ์ฐฐ์Šค ๋‹ค์œˆ (์ƒ๋ฌผ ํ•™์ž, <์ข…์˜ ๊ธฐ์›>์˜ ์ €์ž)
๊ฒจ์šธ์ด ์ฐพ์•„์˜ค๋ฉด ๋ชจ๋™์ˆฒ์—์„œ๋งŒ ์ฆ๊ธธ ์ˆ˜ ์žˆ๋Š” ํŠน๋ณ„ํ•œ ์ด๋ฒคํŠธ๊ฐ€ ์—ด๋ฆฐ๋‹ค.๋ฐ”๋กœ ๋ˆˆ์‚ฌ๋žŒ ๋งŒ๋“ค๊ธฐ! โ˜ƒ๏ธ ๋ˆˆ์‚ฌ๋žŒ ๋งŒ๋“ค๊ธฐ ๊ธฐ๋ณธ ์ค€๋น„๋ฌผ ๋ˆˆ์‚ฌ๋žŒ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ์„ฌ์„ ๋Œ์•„๋‹ค๋‹ˆ๋ฉด์„œ 2๊ฐœ์˜ ๋ˆˆ๋ฉ์ด๋ฅผ ์ฐพ์•„์•ผ ํ•œ๋‹ค. ์„ฌ์— ๊ณตํ„ฐ๊ฐ€ ์ถฉ๋ถ„ํ•˜์ง€ ์•Š์€ ์‚ฌ๋žŒ๋“ค์€ ์„ฌํฌ๋ฆฌ์—์ดํ„ฐ๋กœ ๋‚˜๋ฌด, ๋ฐ”์œ„, ์—ฐ๋ชป ๋“ฑ์„ ๋ชจ๋‘ ์ œ๊ฑฐํ•ด์„œ ์–ด๋Š ์ •๋„ ๋„“์€ ๊ณตํ„ฐ๋ฅผ ํ™•๋ณด ํ•ด์•ผ ํ•œ๋‹ค. ํ•˜๋ฃจ์— 2๊ฐœ์˜ ๋ˆˆ๋ฉ์ด๊ฐ€ ๋“ฑ์žฅํ•˜๊ณ  ์ด ๋ˆˆ๋ฉ์ด ๋‘ ๊ฐœ๋ฅผ ๊ตด๋ฆฐ ํ›„ ์ด์–ด ๋ถ™์—ฌ์„œ ๋ˆˆ์‚ฌ๋žŒ์„ ๋งŒ๋“ ๋‹ค. ๋ˆˆ๋ฉ์ด ๋‘ ๊ฐœ๋Š” ๊ทผ์ฒ˜์— ํ•œ๊บผ๋ฒˆ์— ๋‚˜ํƒ€๋‚œ๋‹ค. โ„๏ธ ๋ˆˆ๋ฉ์ด๋Š” ์ดˆ๊ธฐ์— 2๊ฐ€์ง€ ํ˜•ํƒœ๋กœ ๋“ฑ์žฅํ•œ๋‹ค. ์ž‘์€ ๋ˆˆ๋ฉ์ด โ†’ ์ฒ˜์Œ์—๋Š” ๋ฐœ๋กœ ๊ฑท์–ด์ฐจ๋‹ค๊ฐ€ ํฌ๊ธฐ๊ฐ€ ์ปค์ง€๋ฉด ์†์œผ๋กœ ๊ตด๋ฆด ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. (13๋ฒˆ ์ •๋„ ๊ฑท์–ด ์ฐจ๋ฉด ์†์œผ๋กœ ๊ตด๋ฆด ์ˆ˜ ์žˆ๊ฒŒ ๋จ)์‡ ๋˜ฅ๊ตฌ๋ฆฌ๊ฐ€ ๋ˆˆ๋ฉ์ด๋ฅผ ๊ตด๋ฆฌ๊ณ  ์žˆ๋Š” ์ƒํƒœ๋กœ ๋“ฑ์žฅ โ†’ ์‡ ๋˜ฅ๊ตฌ๋ฆฌ๋ฅผ ์žก๊ฑฐ..
๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ๋งŒ๋“  ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ ๐Ÿฆ๋ชฉํ‘œ์ด๋ฒคํŠธ, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ์ด๋ฒคํŠธ ๋ฒ„์Šค ๋ฐ addEventListener์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž.๊ทธ๋ฆฌ๊ณ  jQuery์™€ Vanilla JavaScript์—์„œ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž. ๋‹ค์‹œ ํ•œ ๋ฒˆ ๋งํ•˜์ง€๋งŒ jQuery๋Š” ํ•œ๋•Œ ์›น ๊ฐœ๋ฐœ์—์„œ ํ•„์ˆ˜์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜€์ง€๋งŒ, ์ด์ œ๋Š” Vanilla JavaScript(์ˆœ์ˆ˜ JS)๋‚˜ React, Vue, Svelte ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋Œ€์ฒดํ•˜๋ฉด์„œ ์‚ฌ์šฉ์ด ์ค„์–ด๋“ค๊ณ  ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ addEventListener ์œ„์ฃผ๋กœ๋งŒ ์ •๋ฆฌํ–ˆ๊ณ  ์ˆœ์ˆ˜ํ•˜๊ฒŒ ์ด๋ฒคํŠธ ์ข…๋ฅ˜๋งŒ ๊ถ๊ธˆํ•œ ์‚ฌ๋žŒ์€ 6๋ฒˆ๋ถ€ํ„ฐ ์ฝ์œผ๋ฉด ๋œ๋‹ค. 1. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ (JavaScript Event)์ด๋ฒคํŠธ(Event)๋Š” ์‚ฌ์šฉ์ž๋‚˜ ์‹œ์Šคํ…œ์ด ์›น ํŽ˜์ด์ง€์—์„œ ์ผ์œผํ‚ค๋Š” ๋™์ž‘์ด๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฒ„ํŠผ ํด..
์—ฌ๋Ÿฌ๋ถ„ ์‹ ๋…„ ๊ณ„ํš์€ ์„ธ์šฐ์…จ๋‚˜์š”?25๋…„์—๋Š” ์ž๊ฒฉ์ฆ๋„ ๋”ฐ๊ณ  ์šด๋™๋„ ํ•˜๊ณ , ์ž๊ธฐ ๊ณ„๋ฐœ์— ํž˜์จ๋ณด๋ ค๊ณ  ํ•˜๋Š” ๋ถ„๋“ค ๋งŽ์œผ์‹คํ…๋ฐ์š” ๊ทธ๋ž˜์„œ ์ œ๊ฐ€ ์ข‹์€ ์†Œ์‹์„ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค๊ด‘๊ณ  ์•„๋‹™๋‹ˆ๋‹ค! ใ…‹ใ…‹ใ…‹ใ…‹์ธํ”„๋Ÿฐ ํ”„๋กœ๋ชจ์…˜์ง€๊ธˆ ์ธํ”„๋Ÿฐ์—์„œ๋Š” ์‹ ๋…„๋งž์ด ํ”„๋กœ๋ชจ์…˜์„ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.1์›” 14์ผ๊นŒ์ง€ ์ด 49๋งŒ์› ์ƒ๋‹น์˜ ๊ฐ•์˜๋ฅผ 0์›์— ๊ตฌ๋งคํ•  ์ˆ˜ ์žˆ๋Š” ์ตœ๊ณ ์˜ ๊ธฐํšŒ! ์•„๋ž˜ ์›น์‚ฌ์ดํŠธ ๊ฐ€์‹œ๋ฉด ๋‹ค์šด ๋ฐ›์œผ์‹ค ์ˆ˜ ์žˆ์–ด์š” 2025๋…„, 0์›์œผ๋กœ ์„ฑ์žฅํ•ด์š”๐Ÿ - ์ธํ”„๋Ÿฐ | ํ•™์Šตํ•˜๊ธฐ์ง€๊ธˆ ์ธํ”„๋Ÿฐ์—์„œ ํ•™์Šตํ•ด ๋ณด์„ธ์š”! - ํ•™์Šตํ•˜๊ธฐ | ์ธํ”„๋Ÿฐwww.inflearn.com ์ œ๊ณตํ•˜๋Š” ๊ฐ•์˜ ๋ชฉ๋ก- ์‹ค๋ฌด ์ค‘์‹ฌ! FE ์ž…๋ฌธ์ž๋ฅผ ์œ„ํ•œ React- UX/UI ์‹œ์ž‘ํ•˜๊ธฐ : Figma ์ž…๋ฌธ- Python ๋„์ „ 45๊ฐ€์ง€ ํŒŒ์ด์ฌ ๊ธฐ์ดˆ ์‹ค์Šต- ์—‘์…€ ํ™œ์šฉํ•˜๊ธฐ: EXCEL ์ค‘๊ธˆ- ์‰ฝ๊ฒŒ ๋ฐฐ์šฐ๋Š”..
์™€์šฐํ•˜๋Š” ๋‚จํŽธ๋“ค ์ดˆใ…กใ…ก๋น„ใ…กใ…ก์ƒ    ๋ธŒ๋ฃจํ† >> ์šฐ์ฒดํ†ต/ ๊ฒฝ๋งค์žฅ ๋ถ™์–ด์žˆ๋Š” ์™€์šฐ ํƒˆ๊ฒƒ ์ฒ˜์Œ ์ถœ์‹œ ํ• ๋•Œ๋Š” ๋งํ•ด์„œ ๊ธฐ๊ฐ„ ํ•œ์ •์œผ๋กœ 500๋งŒ๊ณจ๋“œ์— ํŒ๋งคํ•˜๊ณ ,๊ทธ ์ดํ›„๋กœ ๊ฐ€์น˜ ๋ณด์กดํ•ด์ค€๋‹ต์‹œ๊ณ  ์œ ์‚ฌํ’ˆ ์•ˆ ๋งŒ๋“ค์—ˆ์Œ ๋ ˆ์ด๋“œ ๋„์ค‘์—๋„ ์–ธ์ œ๋‚˜ ๊ฒฝ๋งค์žฅ์—์„œ ๋ ˆ์ด๋“œ ๋ณด์กฐ์šฉ ์†Œ๋ชจํ’ˆ ๊ตฌ๋งค ๊ฐ€๋Šฅํ•ด์„œ ํŽธ์˜์„ฑ์€ goat ์ˆ˜์ค€์ „๋ฌธ๊ธฐ์ˆ  ์•ฝ์ดˆ ์ฑ„๊ด‘ ๋ฌด๋‘ ๋‚š์‹œ ๋งˆ์„ ์•ˆ๊ฐ€๋„ ๋จ ใ…‹ใ…‹ใ…‹ใ…‹ ๋ธŒ๋ฃจํ†  ํƒ€๋Š” ์• ๋“ค ์ค‘ ใ…‹ใ…‹ใ…‹ใ…‹ ์˜†์—์„œ ๊ฒฝ๋งค์žฅ ๋“ค์–ด๊ฐˆ๋ ค๊ณ  ํ•˜๋ฉด ๋„๋ง๊ฐ€๋Š” ์• ๋“ค ์žˆ์›€ ํ‚น๋ฐ› ๊ทธ๋Ÿฌ๋‹ค๊ฐ€ ์ด๋ฒˆ์— 20์ฃผ๋…„ ๊ธฐ๋…์ด๋ผ๊ณ  1์›” 7์ผ๊นŒ์ง€ ๊ธฐ๊ฐ„ํ•œ์ •์œผ๋กœ 12๋งŒ์›์— ํŒ๋งคํ•œ๋‹ค๋Š” ๊ณต์ง€๊ฐ€ ๋œธ๊ทธ๋•Œ๋ž‘ ์ง€๊ธˆ์ด๋ž‘ ๊ณจ๋“œ ๊ฐ€์น˜ ๋‹ค๋ฅธ๊ฑฐ ๊ฐ์•ˆํ•ด๋„๋งค์šฐ ํŒŒ๊ฒฉ์ ์ธ ๊ฐ€๊ฒฉ์ด๋ผ์„œ ํ•ด์™ธ๋‚˜ ํ•œ๊ตญ์ด๋‚˜ ๋ˆˆ์— ๋ถˆ์ผœ๊ณ  ๋ธŒ๋ฃจํ†  ๊ตฌ๋งค์ค‘์ž„์ด๋ฒˆ์— 20์ฃผ๋…„์ด๋ผ ํ’€์–ด์ค€๊ฑฐ๊ณ  ์•„๋งˆ ๋‹น๋ถ„๊ฐ„ ๋‹˜์ด ์™€์šฐ ํ•˜๋Š” ๋™์•ˆ ๋‹ค์‹œ ํ’€๋ฆฌ๋Š” ์ผ ์—†..
์ƒ๋‹จ์œผ๋กœ