์ธํŒŒ

You Can Become A

Programmer

๋Šฆ๊ฒŒ ์‹œ์ž‘ํ•ด๋„ ๋ˆ„๊ตฌ๋“ ์ง€ ๋…ธ๋ ฅํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ ์ˆ˜ ์žˆ์–ด์š” !

JavaScript (WEB)

๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค
JavaScript (WEB)

๐ŸŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ•ต์‹ฌ '๋น„๋™๊ธฐ' ์™„๋ฒฝ ์ดํ•ด โ—

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™๊ธฐ์™€ ๋น„๋™๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ์–ธ์–ด์ด๊ธฐ ๋•Œ๋ฌธ์— ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ์ž‘์—…๋งŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, ์ด์ „ ์ž‘์—…์ด ์™„๋ฃŒ๋˜์–ด์•ผ ๋‹ค์Œ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•˜๋ฉด์„œ ์ผ๋ฐ˜์ ์œผ๋กœ ๊ฐ ํ•จ์ˆ˜์™€ ์ฝ”๋“œ๋“ค์ด ์œ„์—์„œ ์•„๋ž˜๋กœ ์ฐจ๋ก€๋กœ ๋™์ž‘ํ•˜๋Š” ๋ฐฉ์‹์ด๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ฝ”๋“œ ์ˆœ์ฐจ ์‹คํ–‰์„ ๋™๊ธฐ(Synchronous) ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋™๊ธฐ ๋ฐฉ์‹์€ ๊ฐ„๋‹จํ•˜๊ณ  ์ง๊ด€์ ์ด์ง€๋งŒ, ์ž‘์—…์ด ์˜ค๋ž˜ ๊ฑธ๋ฆฌ๊ฑฐ๋‚˜ ์‘๋‹ต์ด ๋Šฆ์–ด์ง€๋Š” ๊ฒฝ์šฐ์—๋Š” ์ „์ฒด์ ์ธ ์„ฑ๋Šฅ๊ณผ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์— ์˜ํ–ฅ์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ  ์‘๋‹ต์„ ๋ฐ›์•„์•ผ ํ•˜๋Š” ์ž‘์—…์ด ์žˆ๋‹ค๋ฉด, ์‘๋‹ต์ด ์˜ฌ ๋•Œ๊นŒ์ง€ ๋‹ค๋ฅธ ์ž‘์—…์„ ํ•˜์ง€ ๋ชปํ•˜๊ณ  ๋Œ€๊ธฐํ•ด์•ผ ํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ๋˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์˜ ํ๋ฆ„์ด ๋ฉˆ์ถ”๊ฑฐ๋‚˜ ์ง€์—ฐ๋˜๊ฒŒ ๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์—ฌ๋Ÿฌ ..

category_image
์ธํŒŒ_
2023.05.01
4
JavaScript (WEB)

๐ŸŒ ์›น ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ตœ์ ํ™” requestAnimationFrame ๊ฐ€์ด๋“œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์›น ์• ๋‹ˆ๋ฉ”์ด์…˜ ์›นํŽ˜์ด์ง€์˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๊ตฌํ˜„ํ• ๋•Œ CSS์˜ animatoin , transition , transform ์†์„ฑ์„ ํ†ตํ•ด ๊ตฌํ˜„ํ•  ์ˆ˜๋„ ์žˆ์ง€๋งŒ, ๋ณด๋‹ค ์‚ฌ์šฉ์ž์™€์˜ ๋ณต์žกํ•œ ์ƒํ˜ธ์ž‘์šฉ์„ ๊ตฌํ˜„ํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด Javascript์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜์—ฌ ์Šคํƒ€์ผ์„ ๋ณ€ํ™”์‹œํ‚ค๋„ ํ•œ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด ํŠน์ • ์˜์—ญ์„ ํด๋ฆญํ•˜๊ฑฐ๋‚˜ ์›นํŽ˜์ด์ง€๋ฅผ ์Šคํฌ๋กคํ• ๋•Œ ๋ณ€ํ™”๋ฌด์Œํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ž‘์—…๋“ค์ด ๊ทธ๋Ÿฌํ•˜๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐ„๋‹จํ•˜๊ณ  ๊ทœ์น™์ ์ธ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ CSS๋กœ๋งŒ ์š”์†Œ์˜ ์ขŒํ‘œ๊ฐ’์ด๋‚˜ ์Šคํƒ€์ผ ํฌ๊ธฐ๋ฅผ ๋ณ€ํ™”์‹œํ‚ค๊ณ , ์„ธ๋ฐ€ํ•œ ์กฐ์ž‘์ด ํ•„์š”ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์Šคํƒ€์ผ ์†์„ฑ์„ ๋ณ€๊ฒฝ ์‹œํ‚ค๋Š” ํŽธ์ด๋‹ค. ํ•˜์ง€๋งŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์Šคํƒ€์ผ ์†์„ฑ์„ ๋ณ€ํ™”์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์€ CSS๋ณด๋‹ค (ํŠนํžˆ ๋ชจ๋ฐ”์ผ์—์„œ) ์„ฑ๋Šฅ์ด ์ข‹์ง€ ์•Š๋‹ค. ๋”ฐ๋ผ์„œ ์–ด์ฉ”์ˆ˜ ์—†์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€์˜ ์ƒํ˜ธ ํ˜‘๋ ฅ์ด ํ•„์š”ํ•  ..

category_image
์ธํŒŒ_
2023.04.18
5
JavaScript (WEB)

๐ŸŒ ํ•œ๋ฐฉ์— ์ดํ•ดํ•˜๋Š” attribute ์™€ property ์†์„ฑ ์ฐจ์ด

Attribute vs Property ์ •์˜ ์ฐจ์ด attribute ์™€ property ๋ฅผ ํ•œ๊ตญ์–ด๋กœ ๋ฒˆ์—ญํ•˜์ž๋ฉด ๋‘˜๋‹ค '์†์„ฑ' ์ด๋ผ๋Š” ์˜๋ฏธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๋‹จ์ˆœํžˆ ๋‹จ์–ด๋ช…์ด ๊ฐ™์€ ๊ฒƒ์„ ๋– ๋‚˜์„œ ์‹ค์ œ๋กœ ๋‘˜์€ html ์š”์†Œ์— ๋Œ€ํ•œ ํด๋ž˜์Šค์™€ ์•„์ด๋””์™€ ๊ฐ™์€ ์†์„ฑ์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ์ด์ฒ˜๋Ÿผ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ์™€ ํ”„๋กœํผํ‹ฐ์˜ ๋‘˜์€ ๊ฐ™์€ ์˜๋ฏธ๋ฅผ ๋‚ดํฌํ•˜์ง€๋งŒ, ์›น ํ”„๋กœ๊ทธ๋ž˜๋ฐ์—์„œ ์ด ๋‘˜์€ ๊ตฌ์ฒด์ ์ธ ์ฐจ์ด์ ์ด ์กด์žฌ ํ•œ๋‹ค. HTML์˜ Attribute ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋Š” HTML์˜ ์†์„ฑ์ด๋‹ค. ์—˜๋ฆฌ๋จผํŠธ์— ์•„์ด๋””๋‚˜ ํด๋ž˜์Šค์™€ ๊ฐ™์€ ์ถ”๊ฐ€์ ์ธ ์ •๋ณด๋ฅผ ์ผ์ปซ๋Š”๋‹ค๊ณ  ๋ณด๋ฉด ๋œ๋‹ค DOM์˜ Property ํ”„๋กœํผํ‹ฐ๋Š” DOM์˜ ์†์„ฑ์ด๋‹ค. ์ฆ‰, html์˜ attribute๋ฅผ DOM ๋‚ด์—์„œ ๋Œ€์‹ ํ•ด์„œ ํ‘œํ˜„์ด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. ์œ„ ํŠธ๋ฆฌ๋Š” ํƒœ๊ทธ๋ฅผ DOM ์œผ๋กœ ํ‘œํ˜„ํ•œ ๊ฒƒ์ธ๋ฐ ์œ„์—์„œ clas..

category_image
์ธํŒŒ_
2023.04.17
2
JavaScript (WEB)

๐Ÿ”Š ์›น์—์„œ ์Œ์•… ๊ฐ์ฒด(Audio) ๋‹ค๋ฃจ๊ธฐ

HTML Audio ํƒœ๊ทธ HTML ํƒœ๊ทธ๋Š” ์›น ํŽ˜์ด์ง€์—์„œ ์˜ค๋””์˜ค๋ฅผ ์žฌ์ƒํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ์š”์†Œ์ด๋‹ค. MP3, WAV, OGG ๋“ฑ ๋‹ค์–‘ํ•œ ์˜ค๋””์˜ค ํฌ๋งท ํŒŒ์ผ์„ ์›น์—์„œ ์žฌ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. audio ํƒœ๊ทธ ์†์„ฑ ์†์„ฑ ๊ฐ’ ์„ค์ • ๋‚ด์šฉ src ํŒŒ์ผ ๊ฒฝ๋กœ ์žฌ์ƒํ•  ์Œ์› ํŒŒ์ผ์˜ ๊ฒฝ๋กœ ์„ค์ •(mp3, wav, ogg ํŒŒ์ผ ๋“ฑ) autoplay autoplay ์ž๋™ ์žฌ์ƒ ์—ฌ๋ถ€ ์„ค์ •(๋ธŒ๋ผ์šฐ์ €์— htmlํŒŒ์ผ์ด ๋กœ๋“œ๋˜์ž๋งˆ์ž ์Œ์•…ํŒŒ์ผ์ด ์žฌ์ƒ๋จ) loop loop ๋ฐ˜๋ณต ์žฌ์ƒ ์—ฌ๋ถ€ ์„ค์ • controls controls ์ปจํŠธ๋กค ํŒจ๋„(์žฌ์ƒ/์ •์ง€ ๋ฒ„ํŠผ ๋“ฑ) ๋…ธ์ถœ ์—ฌ๋ถ€ ์„ค์ • muted muted ์Œ์†Œ๊ฑฐ ์„ค์ • ์˜ค๋””์˜ค ํŒŒ์ผ ํฌ๋งท ์ง€์ • ํƒœ๊ทธ ๋‚ด๋ถ€์— ํƒœ๊ทธ๋ฅผ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ํƒ€์ž…์˜ ์˜ค๋””์˜ค ํฌ๋งท์„ ์ž…๋ ฅํ•ด์ฃผ๋ฉด, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์•Œ์•„์„œ ์ง€์›ํ•˜๋Š” ํฌ๋งท์œผ๋กœ ์žฌ์ƒํ•œ๋‹ค. ๊ทธ๋ฆฌ๊ณ ..

category_image
์ธํŒŒ_
2023.04.01
1
JavaScript (WEB)

๐ŸŒ ๋ธŒ๋ผ์šฐ์ € ์ด๋ฏธ์ง€ ์บ์‹œ ๋ฐฉ์ง€ํ•˜๊ธฐ

Disable Image Cache ์›นํŽ˜์ด์ง€ ์†๋„ ํ…Œ์ŠคํŠธ๋‚˜ ํ˜น์€ ์ด๋ฏธ์ง€๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘์— ์ด๋ฏธ์ง€๋ฅผ Ajax๋กœ ๋ถˆ๋Ÿฌ์˜ค๋‹ค๊ฐ€ ์บ์‹œ์— ์˜ํ•œ CORS ์—๋Ÿฌ ๋ฌธ์ œ ๋“ฑ ์—ฌ๋Ÿฌ ์ด์œ ๋“ค์— ์˜ํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ด๋ฏธ์ง€๋ฅผ ์บ์‹ฑ ํ•˜์ง€ ์•Š๊ฒŒ ํ•˜๊ณ  ์‹ถ์€ ๋•Œ๊ฐ€ ์žˆ์„ ๊ฒƒ์ด๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ง์ ‘ ์„œ๋ฒ„์—์„œ ์บ์‹œ ๊ด€๋ จ ํ—ค๋” ์„ค์ •์„ ํ• ์ˆ˜ ์—†๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ์—…์ฒด์˜ ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ ๊ฒฐ๊ตญ ํ”„๋ก ํŠธ๋‹จ์—์„œ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•œ๋‹ค. ctrl + F5 ๊ฐ•๋ ฅ ์ƒˆ๋กœ๊ณ ์นจ์œผ๋กœ ์ž„์‹œ์ ์œผ๋กœ ํ•ด๊ฒฐํ• ์ˆ˜๋Š” ์žˆ์ง€๋งŒ, ๋งค๋ฒˆ ์ด๋Ÿด์ˆ˜๋„ ์—†๊ณ  ๋ฌด์Šจ ๋ฐฉ๋ฒ•์ด ์—†์„๊นŒ ๊ณ ๋ฏผํ•˜๊ฒ ์ง€๋งŒ ์˜์™ธ๋กœ ๋ฐฉ๋ฒ•์€ ๊ฐ„๋‹จํ•˜๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” ์ด๋ฏธ์ง€๋ฅผ ์™„์ „ํžˆ ๊ฐ™์€ url ์ด๋ฆ„์œผ๋กœ ๋ถˆ๋Ÿฌ๋“ค์ผ๋•Œ๋Š” ์บ์‹œํ•œ ์ด์ „ ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜จ๋‹ค. ์ด๋Ÿฌํ•œ ํŠน์„ฑ์„ ์ด์šฉํ•˜์—ฌ url์˜ ์ฟผ๋ฆฌ์ŠคํŠธ๋ง ๊ฐ’๋งŒ ๋‹ค๋ฅด๊ฒŒ ์ฃผ๋Š” ๊ฒƒ์œผ๋กœ ์บ์‹œ๋˜์ง€ ์•Š์€ ๋˜‘๊ฐ™์€ ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ..

category_image
์ธํŒŒ_
2023.03.07
3
JavaScript (WEB)

๐ŸŒ html์˜ data-์†์„ฑ ์‚ฌ์šฉ๋ฒ• ์™„๋ฒฝ ๊ฐ€์ด๋“œ

HTML ๋ฐ์ดํ„ฐ์…‹ ์†์„ฑ HTML์˜ ๋ฐ์ดํ„ฐ์…‹ ์†์„ฑ์€ ์ปค์Šคํ…€ ์‚ฌ์šฉ์ž ์†์„ฑ์„ DOM ์š”์†Œ์— ์ €์žฅํ•˜๋Š”๋ฐ ํ‘œ์ค€ํ™”๋œ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•œ๋‹ค. ํ•œ๋งˆ๋””๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋“ฏ์ด, ์ผ์ข…์˜ html์˜ ๋ณ€์ˆ˜ ์—ญํ• ์ด๋ผ๊ณ  ๋งํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฐ์ดํ„ฐ์…‹ ์†์„ฑ์˜ ์žฅ์  ์ผ๋ฐ˜ ์†์„ฑ ๊ณผ ๋ฐ์ดํ„ฐ์…‹ ์†์„ฑ ๋ฐ์ดํ„ฐ์…‹๋„ ์ผ์ข…์˜ ์†์„ฑ(attribute)์ด๋‹ค. ๋ณดํ†ต html์—์„œ ์†์„ฑ์ด๋ผ ํ•˜๋Š” ๊ฒƒ์€ ์—ฌ๋Ÿฌ๋ถ„๋„ ์ž˜ ์•Œ๋“ฏ์ด id, class, src, title ๋“ฑ์˜ ํƒœ๊ทธ์— ๋ถ™์ด๋Š” ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ๋งํ•œ๋‹ค. ์ด๋“ค ์†์„ฑ์€ ํŠน์ • ํƒœ๊ทธ์˜ ์†Œ์Šค ๊ฒฝ๋กœ๋‚˜ ์ด๋ฆ„, ๋„ˆ๋น„, ์•„์ด๋””๋ฅผ ๊ธฐ์žฌํ•˜๋Š”๋ฐ ์ •ํ•ด์ ธ ์žˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ html ํƒœ๊ทธ์— ๊ทธ ์—˜๋ฆฌ๋จผํŠธ๋งŒ์ด ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” ๊ณ ์œ ํ•œ ์ปค์Šคํ…€ ๊ฐ’์„ ์ง€์ •ํ•ด ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ๊ฐ€ ์žˆ๋‹ค. ๋งˆ์น˜ ์•„๋ž˜ ์ฝ”๋“œ ์ฒ˜๋Ÿผ input ํƒœ๊ทธ์˜ value ์†์„ฑ์œผ๋กœ ๊ฐ’์„ ๊ธฐ..

category_image
์ธํŒŒ_
2023.03.03
6
JavaScript (WEB)

๐ŸŒ HTML ์š”์†Œ์˜ ์œ„์น˜ ์ขŒํ‘œ ๊ฐ’ ์–ป๊ธฐ

HTML ์š”์†Œ์˜ ์ขŒํ‘œ ์›น๋ฌธ์„œ์˜ ์–ด๋–ค ์š”์†Œ(element)์˜ ์œ„์น˜ ๊ฐ’์„ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ•  ํ•„์š”๊ฐ€ ์žˆ์„๋•Œ, DOMRect ํด๋ž˜์Šค์˜ getBoundingClientRect() ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ์ขŒํ‘œ ์ •๋ณด๊ฐ€ ๋“ค์€ ๊ฐ์ฒด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•˜๋ฉฐ ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์œ„์น˜ ๊ฐ’์„ ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋‹ค const rect = document.querySelector('div').getBoundingClientRect(); console.log(rect); getBoundingClientRect() ๋ฉ”์„œ๋“œ์˜ ๋ฐ˜ํ™˜ ๊ฐ’์€ ์—˜๋ฆฌ๋จผํŠธ์˜ padding๊ณผ border-width๋ฅผ ํฌํ•จํ•ด ์ „๋ฐ˜์ ์ธ ์‚ฌ๊ฐํ˜•์˜ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ px ๋‹จ์œ„๋กœ ๋‚˜ํƒ€๋‚ธ๋‹ค. ๊ฐ ์†์„ฑ์˜ ๊ฐ’๋“ค์ด ๋‚˜ํƒ€๋‚˜๋Š” ์˜๋ฏธ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. x : ๋ธŒ๋ผ์šฐ์ € ์ฐฝ๊ธฐ์ค€ x ์ขŒํ‘œ y ..

category_image
์ธํŒŒ_
2023.02.27
(0)
JavaScript (WEB)

๐ŸŒ ํ•œ๋ˆˆ์— ์ดํ•ดํ•˜๋Š” ์ด๋ฒคํŠธ ํ๋ฆ„ ์ œ์–ด (๋ฒ„๋ธ”๋ง & ์บก์ฒ˜๋ง)

HTML ์ด๋ฒคํŠธ์˜ ํ๋ฆ„ HTML ๋ฌธ์„œ์˜ ๊ฐ ์—˜๋ฆฌ๋จผํŠธ๋“ค์€ ์•„๋ž˜์™€ ๊ฐ™์ด ํƒœ๊ทธ ์•ˆ์˜ ํƒœ๊ทธ๊ฐ€ ์œ„์น˜ํ•˜๋Š” ์‹์œผ๋กœ ๊ณ„์ธต์ ์œผ๋กœ ์ด๋ฃจ์–ด์ง์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ณ„์ธต์  ๊ตฌ์กฐ ํŠน์ง• ๋•Œ๋ฌธ์— ๋งŒ์ผ HTML ์š”์†Œ์— ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•  ๊ฒฝ์šฐ ์—ฐ์‡„์  ์ด๋ฒคํŠธ ํ๋ฆ„์ด ์ผ์–ด๋‚˜๊ฒŒ ๋œ๋‹ค. ์˜ˆ๋ฅผ๋“ค์–ด ์•„๋ž˜ 3๊ฐœ๊ฐ€ ์ค‘์ฒฉ๋œ ๋ฐ•์Šค ์˜์—ญ์—์„œ ๊ฐ€์žฅ ์ž์‹  ์—˜๋ฆฌ๋จผํŠธ์ธ p ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•˜๋ฉด onclick ์ด๋ฒคํŠธ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ p ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๊ทธ์˜ ๋ถ€๋ชจ์ธ div์™€ form ์—˜๋ฆฌ๋จผํŠธ๋„ ๋ฐœ์ƒํ•จ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค. FORM DIV P See the Pen event bubbleing 1 by barzz12 (@inpaSkyrim) on CodePen. ์ด๋Ÿฌํ•œ ํ˜„์ƒ์„ ์ด๋ฒคํŠธ ์ „ํŒŒ(Event Propagation)๋ผ ๋ถ€๋ฅด๋ฉฐ, ์ „ํŒŒ ๋ฐฉํ–ฅ์— ๋”ฐ๋ผ ๋ฒ„๋ธ”๋ง๊ณผ ์บก์ฒ˜๋ง์œผ๋กœ ๊ตฌ๋ถ„ํ•œ๋‹ค. ๋ฒ„๋ธ”๋ง..

category_image
์ธํŒŒ_
2023.02.10
6
JavaScript (WEB)

๐ŸŒ insertAdjacentHTML๋กœ ์‰ฝ๊ฒŒ append ํ•˜์ž

DOM์— ํ…์ŠคํŠธ๋กœ๋œ html ์‚ฝ์ž…ํ•˜๊ธฐ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ œ์ด์ฟผ๋ฆฌ๋ฅผ ์• ์šฉํ•ด์™”๋˜ ์ด์œ ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋ฐ”๋กœ ํ…์ŠคํŠธ๋กœ ๋œ html๋ฌธ์ž์—ด์„ ๊ทธ๋Œ€๋กœ ํ•จ์ˆ˜์— ๋„ฃ์œผ๋ฉด ๋ฐ”๋กœ DOM์— ์ถ”๊ฐ€/์‚ฝ์ž…์ด ๋œ๋‹ค๋Š” ์ ์ด์—ˆ๋‹ค. $('div').append('์•ˆ๋…•ํ•˜์„ธ์š”'); $('div').prepend('์•ˆ๋…•ํ•˜์„ธ์š”'); $('div').after('์•ˆ๋…•ํ•˜์„ธ์š”'); $('div').before('์•ˆ๋…•ํ•˜์„ธ์š”'); ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋„ append, after ํ•จ์ˆ˜๊ฐ€ ์žˆ์ง€๋งŒ, ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ฌธ์ž์—ด์ด ์•„๋‹Œ document.createElement("div") ํ†ตํ•ด ๋งŒ๋“  node ๊ฐ์ฒด ๋งŒ์„ ๋ฐ›์„์ˆ˜ ์žˆ์–ด, ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์ง€๊ณ  ๊ฐ€๋…์„ฑ์ด ์•ˆ์ข‹์•„ ๋ณ„๋กœ ์‚ฌ์šฉ์„ฑ์ด ์ข‹์ง€ ์•Š์•˜๋‹ค. ๋ฌผ๋ก  innerHTML ํ”„๋กœํผํ‹ฐ๋กœ htmlํ˜•์‹์˜ ๋ฌธ์ž์—ด์„ ๋„ฃ์„์ˆ˜๋Š” ์žˆ์ง€๋งŒ ์–ด๋Š ์œ„์น˜์— ๋„ฃ์„์ง€..

category_image
์ธํŒŒ_
2022.12.04
3
JavaScript (WEB)

๐Ÿค– ๊ตฌ๊ธ€๋ด‡ / ํฌ๋กค๋Ÿฌ ๋ฐฉ๋ฌธ ๊ฐ์ง€ํ•˜๊ธฐ

๊ฒ€์ƒ‰๋ด‡์ด ํฌ๋กค๋ง/์Šคํฌ๋žฉํ•‘ ํ•˜๋Š”์ง€ ๊ฐ์ง€ํ•˜๊ธฐ ์šฐ๋ฆฌ๊ฐ€ ์ž˜์•„๋Š” ๋Œ€ํ‘œ์ ์ธ ๊ฒ€์ƒ‰๋ด‡์€ ๊ตฌ๊ธ€๋ด‡์ด ์žˆ๋‹ค. ์ด ๊ตฌ๊ธ€๋ด‡์ด ์šฐ๋ฆฌ์˜ ํ‹ฐ์Šคํ† ๋ฆฌ๋‚˜ ์›น์‚ฌ์ดํŠธ๋ฅผ ํฌ๋กค๋งํ•ด์•ผ ๊ตฌ๊ธ€ ๋…ธ์ถœ์„ ์‹œ์ผœ์ค€๋‹ค. ๋‹ค๋งŒ, ๊ตฌ๊ธ€๋ด‡๋„ ํ•˜๋‚˜์˜ ์‚ฌ์šฉ์ž์ฒ˜๋Ÿผ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋ฐฉ๋ฌธํ•ด ์กฐํšŒํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋‚ด ํ™ˆํŽ˜์ด์ง€๋ฅผ ์กฐํšŒํ•œ๊ฒŒ ๋กœ๋ด‡์ธ์ง€ ์‚ฌ๋žŒ์ธ์ง€ ๊ตฌ๋ถ„ํ•  ํ•„์š”์„ฑ์ด ์ƒ๊ธธ ๋•Œ ๊ฐ€ ์žˆ๋‹ค. ์ด๋•Œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์›น๋ธŒ๋ผ์šฐ์ € ์ „๋ฐ˜์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๋Š” window ๊ฐ์ฒด์˜ navigator.userAgent ์— ์ ํžŒ ์ •๋ณด๋ฅผ ๋’ค์ ธ์„œ ์ก๊ทœ์‹์œผ๋กœ ๋ด‡์ด๋ฆ„์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ํŒ๋ณ„ํ•˜๋Š” ์‹์œผ๋กœ ๊ฐ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค. const detectRobot = (userAgent) => { const robots = new RegExp([ /bot/,/spider/,/crawl/, // GENERAL TERMS /APIs-G..

category_image
์ธํŒŒ_
2022.10.06
10
JavaScript (WEB)

๐ŸŒ FormData ์‚ฌ์šฉ๋ฒ• & ์‘์šฉ ์ด์ •๋ฆฌ (+ fetch ์ „์†ก)

FormData API ๋ณดํ†ต ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” HTML5 ์˜ ํผ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฉ”๋‰ด๋ฅผ ๊ตฌ์„ฑํ•˜์—ฌ ์ œ์ถœ ํ•ด๋ณธ ๊ธฐ์–ต๋“ค์ด ์žˆ์„ ๊ฒƒ์ด๋‹ค. ์•„์ด๋”” ๋น„๋ฐ€๋ฒˆํ˜ธ ์„ฑ๋ณ„ ๋‚จ์ž ์—ฌ์ž ์‘์‹œ๋ถ„์•ผ ์˜์–ด ์ˆ˜ํ•™ ์ด ์ฒ˜๋Ÿผ ๋ณดํ†ต์€ HTML5์˜ ํƒœ๊ทธ์ด์šฉํ•ด input ๊ฐ’์„ ์„œ๋ฒ„์— ์ „์†กํ•˜์ง€๋งŒ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ FormData() ํด๋ž˜์Šค๋ฅผ ์ด์šฉํ•ด ๋˜‘๊ฐ™์ด ์Šคํฌ๋ฆฝํŠธ๋กœ๋„ ์ „์†ก์„ ํ• ์ˆ˜ ์žˆ๋‹ค. ์ฆ‰, FormData๋ž€ HTML ๋‹จ์ด ์•„๋‹Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋‹จ์—์„œ ํผ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ฐ์ฒด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  HTML์—์„œ์˜ Submit ์ œ์ถœ ๋™์ž‘์€ Ajax๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„์— ์ œ์ถœํ•œ๋‹ค๊ณ  ๋ณด๋ฉด ๋œ๋‹ค. let formData = new FormData(); // new FromData()๋กœ ์ƒˆ๋กœ์šด ๊ฐ์ฒด ์ƒ์„ฑ formData.append('i..

category_image
์ธํŒŒ_
2022.08.17
14
JavaScript (WEB)

๐ŸŒ ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ(Drag and Drop) ๊ธฐ๋Šฅ ์ดํ•ด & ๊ตฌํ˜„ํ•˜๊ธฐ

HTML ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ ์‚ฌ์šฉ๋ฒ• ๋“œ๋ž˜๊ทธ(drag)์™€ ๋“œ๋กญ(drop)์€ ์ปดํ“จํ„ฐ๋ฅผ ์ด์šฉํ•˜๋ฉด์„œ ์ •๋ง ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ ์ค‘์— ํ•˜๋‚˜์ผ ๊ฒƒ์ด๋‹ค. ํŒŒ์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ฌธ์„œ๋ฅผ ๋ณต์‚ฌํ•ด ์ด๋™ํ•˜๋Š” ๊ฒƒ ๋ถ€ํ„ฐ ์ฃผ๋ฌธ ํ•˜๋ ค๋Š” ๋ฌผ๊ฑด์„ ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ๋“œ๋กญํ•˜๋Š” ๊ฒƒ ๊นŒ์ง€ ์ผ์ƒ์ƒํ™œ์—์„œ ๋งŽ์ด ์ ‘ํ•ด ๋ดค์„ ๊ฒƒ์ด๋‹ค. HTML ๊ทธ๋ฆฌ๊ณ  JavaScript์—์„œ์˜ ๋“œ๋ž˜๊ทธ ๋“œ๋กญ์€ ์ด๋ฒคํŠธ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘๋™ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, ๋งˆ์šฐ์Šค ์ปค์„œ๋กœ ๊ฐ์ฒด(object)๋ฅผ ๋“œ๋ž˜๊ทธํ•ด์„œ ๋†“์„ ๋•Œ๊นŒ์ง€ ์—ฌ๋Ÿฌ ๋‹จ๊ณ„์˜ ์ด๋ฒคํŠธ๊ฐ€ ์ˆœ์ฐจ์ ์œผ๋กœ ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜์–ด ๋™์ž‘์ด ์™„๋ฃŒ๋˜๊ฒŒ ๋œ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ ์ด๋ฒคํŠธ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•˜๊ณ  ์—ฌ๋Ÿฌ ์˜ˆ์ œ๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณผ ์˜ˆ์ •์ด๋‹ค. ๋“œ๋ž˜๊ทธ & ๋“œ๋กญ ์ด๋ฒคํŠธ ์ข…๋ฅ˜ HTML์—์„œ ์š”์†Œ๊ฐ€ ๋“œ๋ž˜๊ทธ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด๋‹น..

category_image
์ธํŒŒ_
2022.07.23
18