You Can Become A
๋ฆ๊ฒ ์์ํด๋ ๋๊ตฌ๋ ์ง ๋ ธ๋ ฅํ๋ฉด ๊ฐ๋ฐ์๊ฐ ๋ ์ ์์ด์ !
JavaScript (WEB)
๐ ์๋ฐ์คํฌ๋ฆฝํธ์ ํต์ฌ '๋น๋๊ธฐ' ์๋ฒฝ ์ดํด โ
์๋ฐ์คํฌ๋ฆฝํธ์ ๋๊ธฐ์ ๋น๋๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ ์ค๋ ๋ ์ธ์ด์ด๊ธฐ ๋๋ฌธ์ ํ ๋ฒ์ ํ๋์ ์์ ๋ง ์ํํ ์ ์๋ค. ์ฆ, ์ด์ ์์ ์ด ์๋ฃ๋์ด์ผ ๋ค์ ์์ ์ ์ํํ ์ ์๊ฒ ๋๋ค. ์ฐ๋ฆฌ๊ฐ ํ๋ก๊ทธ๋๋ฐ์ ํ๋ฉด์ ์ผ๋ฐ์ ์ผ๋ก ๊ฐ ํจ์์ ์ฝ๋๋ค์ด ์์์ ์๋๋ก ์ฐจ๋ก๋ก ๋์ํ๋ ๋ฐฉ์์ด๋ผ๊ณ ํ ์ ์๋ค. ์ด๋ฌํ ์ฝ๋ ์์ฐจ ์คํ์ ๋๊ธฐ(Synchronous) ๋ผ๊ณ ๋ถ๋ฅธ๋ค. ๊ทธ๋ฐ๋ฐ ๋๊ธฐ ๋ฐฉ์์ ๊ฐ๋จํ๊ณ ์ง๊ด์ ์ด์ง๋ง, ์์ ์ด ์ค๋ ๊ฑธ๋ฆฌ๊ฑฐ๋ ์๋ต์ด ๋ฆ์ด์ง๋ ๊ฒฝ์ฐ์๋ ์ ์ฒด์ ์ธ ์ฑ๋ฅ๊ณผ ์ฌ์ฉ์ ๊ฒฝํ์ ์ํฅ์ ์ค ์ ์๋ค. ์๋ฅผ ๋ค์ด ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ ์๋ต์ ๋ฐ์์ผ ํ๋ ์์ ์ด ์๋ค๋ฉด, ์๋ต์ด ์ฌ ๋๊น์ง ๋ค๋ฅธ ์์ ์ ํ์ง ๋ชปํ๊ณ ๋๊ธฐํด์ผ ํ๋ค. ์ด๋ ๊ฒ ๋๋ฉด ํ๋ก๊ทธ๋จ์ ํ๋ฆ์ด ๋ฉ์ถ๊ฑฐ๋ ์ง์ฐ๋๊ฒ ๋๋ค. ๋ฐ๋ผ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ฌ๋ฌ ..
๐ ์น ์ ๋๋ฉ์ด์ ์ต์ ํ requestAnimationFrame ๊ฐ์ด๋
์๋ฐ์คํฌ๋ฆฝํธ ์น ์ ๋๋ฉ์ด์ ์นํ์ด์ง์ ์ ๋๋ฉ์ด์ ์ ๊ตฌํํ ๋ CSS์ animatoin , transition , transform ์์ฑ์ ํตํด ๊ตฌํํ ์๋ ์์ง๋ง, ๋ณด๋ค ์ฌ์ฉ์์์ ๋ณต์กํ ์ํธ์์ฉ์ ๊ตฌํํ๊ฒ ํ๊ธฐ ์ํด Javascript์ ํจ๊ป ์ฌ์ฉํ์ฌ ์คํ์ผ์ ๋ณํ์ํค๋ ํ๋ค. ์๋ฅผ๋ค์ด ํน์ ์์ญ์ ํด๋ฆญํ๊ฑฐ๋ ์นํ์ด์ง๋ฅผ ์คํฌ๋กคํ ๋ ๋ณํ๋ฌด์ํ ์ ๋๋ฉ์ด์ ์์ ๋ค์ด ๊ทธ๋ฌํ๋ค. ๊ทธ๋์ ๊ฐ๋จํ๊ณ ๊ท์น์ ์ธ ์ ๋๋ฉ์ด์ ์ CSS๋ก๋ง ์์์ ์ขํ๊ฐ์ด๋ ์คํ์ผ ํฌ๊ธฐ๋ฅผ ๋ณํ์ํค๊ณ , ์ธ๋ฐํ ์กฐ์์ด ํ์ํ ์ ๋๋ฉ์ด์ ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์คํ์ผ ์์ฑ์ ๋ณ๊ฒฝ ์ํค๋ ํธ์ด๋ค. ํ์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์คํ์ผ ์์ฑ์ ๋ณํ์ํค๋ ๋ฐฉ๋ฒ์ CSS๋ณด๋ค (ํนํ ๋ชจ๋ฐ์ผ์์) ์ฑ๋ฅ์ด ์ข์ง ์๋ค. ๋ฐ๋ผ์ ์ด์ฉ์ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ํธ ํ๋ ฅ์ด ํ์ํ ..
๐ ํ๋ฐฉ์ ์ดํดํ๋ attribute ์ property ์์ฑ ์ฐจ์ด
Attribute vs Property ์ ์ ์ฐจ์ด attribute ์ property ๋ฅผ ํ๊ตญ์ด๋ก ๋ฒ์ญํ์๋ฉด ๋๋ค '์์ฑ' ์ด๋ผ๋ ์๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ์๋ค. ๋จ์ํ ๋จ์ด๋ช ์ด ๊ฐ์ ๊ฒ์ ๋ ๋์ ์ค์ ๋ก ๋์ html ์์์ ๋ํ ํด๋์ค์ ์์ด๋์ ๊ฐ์ ์์ฑ์ ๊ฐ๋ฆฌํจ๋ค. ์ด์ฒ๋ผ ์ดํธ๋ฆฌ๋ทฐํธ์ ํ๋กํผํฐ์ ๋์ ๊ฐ์ ์๋ฏธ๋ฅผ ๋ดํฌํ์ง๋ง, ์น ํ๋ก๊ทธ๋๋ฐ์์ ์ด ๋์ ๊ตฌ์ฒด์ ์ธ ์ฐจ์ด์ ์ด ์กด์ฌ ํ๋ค. HTML์ Attribute ์ดํธ๋ฆฌ๋ทฐํธ๋ HTML์ ์์ฑ์ด๋ค. ์๋ฆฌ๋จผํธ์ ์์ด๋๋ ํด๋์ค์ ๊ฐ์ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ์ผ์ปซ๋๋ค๊ณ ๋ณด๋ฉด ๋๋ค DOM์ Property ํ๋กํผํฐ๋ DOM์ ์์ฑ์ด๋ค. ์ฆ, html์ attribute๋ฅผ DOM ๋ด์์ ๋์ ํด์ ํํ์ด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค. ์ ํธ๋ฆฌ๋ ํ๊ทธ๋ฅผ DOM ์ผ๋ก ํํํ ๊ฒ์ธ๋ฐ ์์์ clas..
๐ ์น์์ ์์ ๊ฐ์ฒด(Audio) ๋ค๋ฃจ๊ธฐ
HTML Audio ํ๊ทธ HTML ํ๊ทธ๋ ์น ํ์ด์ง์์ ์ค๋์ค๋ฅผ ์ฌ์ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ์์์ด๋ค. MP3, WAV, OGG ๋ฑ ๋ค์ํ ์ค๋์ค ํฌ๋งท ํ์ผ์ ์น์์ ์ฌ์ํ ์ ์๋ค. audio ํ๊ทธ ์์ฑ ์์ฑ ๊ฐ ์ค์ ๋ด์ฉ src ํ์ผ ๊ฒฝ๋ก ์ฌ์ํ ์์ ํ์ผ์ ๊ฒฝ๋ก ์ค์ (mp3, wav, ogg ํ์ผ ๋ฑ) autoplay autoplay ์๋ ์ฌ์ ์ฌ๋ถ ์ค์ (๋ธ๋ผ์ฐ์ ์ htmlํ์ผ์ด ๋ก๋๋์๋ง์ ์์ ํ์ผ์ด ์ฌ์๋จ) loop loop ๋ฐ๋ณต ์ฌ์ ์ฌ๋ถ ์ค์ controls controls ์ปจํธ๋กค ํจ๋(์ฌ์/์ ์ง ๋ฒํผ ๋ฑ) ๋ ธ์ถ ์ฌ๋ถ ์ค์ muted muted ์์๊ฑฐ ์ค์ ์ค๋์ค ํ์ผ ํฌ๋งท ์ง์ ํ๊ทธ ๋ด๋ถ์ ํ๊ทธ๋ฅผ ํตํด ๋ค์ํ ํ์ ์ ์ค๋์ค ํฌ๋งท์ ์ ๋ ฅํด์ฃผ๋ฉด, ๋ธ๋ผ์ฐ์ ๊ฐ ์์์ ์ง์ํ๋ ํฌ๋งท์ผ๋ก ์ฌ์ํ๋ค. ๊ทธ๋ฆฌ๊ณ ..
๐ ๋ธ๋ผ์ฐ์ ์ด๋ฏธ์ง ์บ์ ๋ฐฉ์งํ๊ธฐ
Disable Image Cache ์นํ์ด์ง ์๋ ํ ์คํธ๋ ํน์ ์ด๋ฏธ์ง๋ฅผ ๋ค๋ฃจ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค์ ์ด๋ฏธ์ง๋ฅผ Ajax๋ก ๋ถ๋ฌ์ค๋ค๊ฐ ์บ์์ ์ํ CORS ์๋ฌ ๋ฌธ์ ๋ฑ ์ฌ๋ฌ ์ด์ ๋ค์ ์ํด์ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฏธ์ง๋ฅผ ์บ์ฑ ํ์ง ์๊ฒ ํ๊ณ ์ถ์ ๋๊ฐ ์์ ๊ฒ์ด๋ค. ๊ทธ๋ฌ๋ ์ง์ ์๋ฒ์์ ์บ์ ๊ด๋ จ ํค๋ ์ค์ ์ ํ ์ ์๊ฑฐ๋ ๋ค๋ฅธ ์ ์ฒด์ ์๋ฒ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ๊ฒฐ๊ตญ ํ๋ก ํธ๋จ์์ ์ฒ๋ฆฌํด์ผ ํ๋ค. ctrl + F5 ๊ฐ๋ ฅ ์๋ก๊ณ ์นจ์ผ๋ก ์์์ ์ผ๋ก ํด๊ฒฐํ ์๋ ์์ง๋ง, ๋งค๋ฒ ์ด๋ด์๋ ์๊ณ ๋ฌด์จ ๋ฐฉ๋ฒ์ด ์์๊น ๊ณ ๋ฏผํ๊ฒ ์ง๋ง ์์ธ๋ก ๋ฐฉ๋ฒ์ ๊ฐ๋จํ๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ด๋ฏธ์ง๋ฅผ ์์ ํ ๊ฐ์ url ์ด๋ฆ์ผ๋ก ๋ถ๋ฌ๋ค์ผ๋๋ ์บ์ํ ์ด์ ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์จ๋ค. ์ด๋ฌํ ํน์ฑ์ ์ด์ฉํ์ฌ url์ ์ฟผ๋ฆฌ์คํธ๋ง ๊ฐ๋ง ๋ค๋ฅด๊ฒ ์ฃผ๋ ๊ฒ์ผ๋ก ์บ์๋์ง ์์ ๋๊ฐ์ ์ด๋ฏธ์ง๋ฅผ ๋ถ..
๐ html์ data-์์ฑ ์ฌ์ฉ๋ฒ ์๋ฒฝ ๊ฐ์ด๋
HTML ๋ฐ์ดํฐ์ ์์ฑ HTML์ ๋ฐ์ดํฐ์ ์์ฑ์ ์ปค์คํ ์ฌ์ฉ์ ์์ฑ์ DOM ์์์ ์ ์ฅํ๋๋ฐ ํ์คํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ค. ํ๋ง๋๋ก ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ณ์๋ฅผ ์ฌ์ฉํ๋ฏ์ด, ์ผ์ข ์ html์ ๋ณ์ ์ญํ ์ด๋ผ๊ณ ๋งํ ์ ์๋ค. ๋ฐ์ดํฐ์ ์์ฑ์ ์ฅ์ ์ผ๋ฐ ์์ฑ ๊ณผ ๋ฐ์ดํฐ์ ์์ฑ ๋ฐ์ดํฐ์ ๋ ์ผ์ข ์ ์์ฑ(attribute)์ด๋ค. ๋ณดํต html์์ ์์ฑ์ด๋ผ ํ๋ ๊ฒ์ ์ฌ๋ฌ๋ถ๋ ์ ์๋ฏ์ด id, class, src, title ๋ฑ์ ํ๊ทธ์ ๋ถ์ด๋ ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ๋งํ๋ค. ์ด๋ค ์์ฑ์ ํน์ ํ๊ทธ์ ์์ค ๊ฒฝ๋ก๋ ์ด๋ฆ, ๋๋น, ์์ด๋๋ฅผ ๊ธฐ์ฌํ๋๋ฐ ์ ํด์ ธ ์๋ค. ๊ทธ๋ฐ๋ฐ html ํ๊ทธ์ ๊ทธ ์๋ฆฌ๋จผํธ๋ง์ด ์ง๋๊ณ ์๋ ๊ณ ์ ํ ์ปค์คํ ๊ฐ์ ์ง์ ํด ์ฌ์ฉํ๊ณ ์ถ์ ๋๊ฐ ์๋ค. ๋ง์น ์๋ ์ฝ๋ ์ฒ๋ผ input ํ๊ทธ์ value ์์ฑ์ผ๋ก ๊ฐ์ ๊ธฐ..
๐ HTML ์์์ ์์น ์ขํ ๊ฐ ์ป๊ธฐ
HTML ์์์ ์ขํ ์น๋ฌธ์์ ์ด๋ค ์์(element)์ ์์น ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌํ ํ์๊ฐ ์์๋, DOMRect ํด๋์ค์ getBoundingClientRect() ๋ฉ์๋๋ฅผ ํตํด ์ขํ ์ ๋ณด๊ฐ ๋ค์ ๊ฐ์ฒด๋ฅผ ์ป์ ์ ์๋ค. ๋๋ถ๋ถ์ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ๋ฉฐ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์์น ๊ฐ์ ๊ฐ์ ธ์ฌ ์ ์๋ค const rect = document.querySelector('div').getBoundingClientRect(); console.log(rect); getBoundingClientRect() ๋ฉ์๋์ ๋ฐํ ๊ฐ์ ์๋ฆฌ๋จผํธ์ padding๊ณผ border-width๋ฅผ ํฌํจํด ์ ๋ฐ์ ์ธ ์ฌ๊ฐํ์ ์์น์ ํฌ๊ธฐ๋ฅผ px ๋จ์๋ก ๋ํ๋ธ๋ค. ๊ฐ ์์ฑ์ ๊ฐ๋ค์ด ๋ํ๋๋ ์๋ฏธ๋ ๋ค์๊ณผ ๊ฐ๋ค. x : ๋ธ๋ผ์ฐ์ ์ฐฝ๊ธฐ์ค x ์ขํ y ..
๐ ํ๋์ ์ดํดํ๋ ์ด๋ฒคํธ ํ๋ฆ ์ ์ด (๋ฒ๋ธ๋ง & ์บก์ฒ๋ง)
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)๋ผ ๋ถ๋ฅด๋ฉฐ, ์ ํ ๋ฐฉํฅ์ ๋ฐ๋ผ ๋ฒ๋ธ๋ง๊ณผ ์บก์ฒ๋ง์ผ๋ก ๊ตฌ๋ถํ๋ค. ๋ฒ๋ธ๋ง..
๐ insertAdjacentHTML๋ก ์ฝ๊ฒ append ํ์
DOM์ ํ ์คํธ๋ก๋ html ์ฝ์ ํ๊ธฐ ๊ฐ๋ฐ์๋ค์ด ์ ์ด์ฟผ๋ฆฌ๋ฅผ ์ ์ฉํด์๋ ์ด์ ์ค ํ๋๊ฐ ๋ฐ๋ก ํ ์คํธ๋ก ๋ html๋ฌธ์์ด์ ๊ทธ๋๋ก ํจ์์ ๋ฃ์ผ๋ฉด ๋ฐ๋ก DOM์ ์ถ๊ฐ/์ฝ์ ์ด ๋๋ค๋ ์ ์ด์๋ค. $('div').append('์๋ ํ์ธ์'); $('div').prepend('์๋ ํ์ธ์'); $('div').after('์๋ ํ์ธ์'); $('div').before('์๋ ํ์ธ์'); ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ append, after ํจ์๊ฐ ์์ง๋ง, ๋งค๊ฐ๋ณ์๋ก ๋ฌธ์์ด์ด ์๋ document.createElement("div") ํตํด ๋ง๋ node ๊ฐ์ฒด ๋ง์ ๋ฐ์์ ์์ด, ์ฝ๋๊ฐ ๊ธธ์ด์ง๊ณ ๊ฐ๋ ์ฑ์ด ์์ข์ ๋ณ๋ก ์ฌ์ฉ์ฑ์ด ์ข์ง ์์๋ค. ๋ฌผ๋ก innerHTML ํ๋กํผํฐ๋ก htmlํ์์ ๋ฌธ์์ด์ ๋ฃ์์๋ ์์ง๋ง ์ด๋ ์์น์ ๋ฃ์์ง..
๐ค ๊ตฌ๊ธ๋ด / ํฌ๋กค๋ฌ ๋ฐฉ๋ฌธ ๊ฐ์งํ๊ธฐ
๊ฒ์๋ด์ด ํฌ๋กค๋ง/์คํฌ๋ฉํ ํ๋์ง ๊ฐ์งํ๊ธฐ ์ฐ๋ฆฌ๊ฐ ์์๋ ๋ํ์ ์ธ ๊ฒ์๋ด์ ๊ตฌ๊ธ๋ด์ด ์๋ค. ์ด ๊ตฌ๊ธ๋ด์ด ์ฐ๋ฆฌ์ ํฐ์คํ ๋ฆฌ๋ ์น์ฌ์ดํธ๋ฅผ ํฌ๋กค๋งํด์ผ ๊ตฌ๊ธ ๋ ธ์ถ์ ์์ผ์ค๋ค. ๋ค๋ง, ๊ตฌ๊ธ๋ด๋ ํ๋์ ์ฌ์ฉ์์ฒ๋ผ ์น์ฌ์ดํธ๋ฅผ ๋ฐฉ๋ฌธํด ์กฐํํ๊ธฐ ๋๋ฌธ์ ๋ด ํํ์ด์ง๋ฅผ ์กฐํํ๊ฒ ๋ก๋ด์ธ์ง ์ฌ๋์ธ์ง ๊ตฌ๋ถํ ํ์์ฑ์ด ์๊ธธ ๋ ๊ฐ ์๋ค. ์ด๋ ๊ฐ๋จํ๊ฒ ์น๋ธ๋ผ์ฐ์ ์ ๋ฐ์ ๋ํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ window ๊ฐ์ฒด์ navigator.userAgent ์ ์ ํ ์ ๋ณด๋ฅผ ๋ค์ ธ์ ์ก๊ท์์ผ๋ก ๋ด์ด๋ฆ์ ๊ฐ์ง๊ณ ์๋์ง ํ๋ณํ๋ ์์ผ๋ก ๊ฐ์งํ ์ ์๋ค. const detectRobot = (userAgent) => { const robots = new RegExp([ /bot/,/spider/,/crawl/, // GENERAL TERMS /APIs-G..
๐ FormData ์ฌ์ฉ๋ฒ & ์์ฉ ์ด์ ๋ฆฌ (+ fetch ์ ์ก)
FormData API ๋ณดํต ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ธฐ ์ํด์๋ HTML5 ์ ํผ ํ๊ทธ๋ฅผ ์ฌ์ฉํด ๋ค์๊ณผ ๊ฐ์ด ๋ฉ๋ด๋ฅผ ๊ตฌ์ฑํ์ฌ ์ ์ถ ํด๋ณธ ๊ธฐ์ต๋ค์ด ์์ ๊ฒ์ด๋ค. ์์ด๋ ๋น๋ฐ๋ฒํธ ์ฑ๋ณ ๋จ์ ์ฌ์ ์์๋ถ์ผ ์์ด ์ํ ์ด ์ฒ๋ผ ๋ณดํต์ HTML5์ ํ๊ทธ์ด์ฉํด input ๊ฐ์ ์๋ฒ์ ์ ์กํ์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ์์ FormData() ํด๋์ค๋ฅผ ์ด์ฉํด ๋๊ฐ์ด ์คํฌ๋ฆฝํธ๋ก๋ ์ ์ก์ ํ ์ ์๋ค. ์ฆ, FormData๋ HTML ๋จ์ด ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋จ์์ ํผ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฃจ๋ ๊ฐ์ฒด๋ผ๊ณ ๋ณด๋ฉด ๋๋ค. ๊ทธ๋ฆฌ๊ณ HTML์์์ Submit ์ ์ถ ๋์์ Ajax๋ฅผ ํตํด ์๋ฒ์ ์ ์ถํ๋ค๊ณ ๋ณด๋ฉด ๋๋ค. let formData = new FormData(); // new FromData()๋ก ์๋ก์ด ๊ฐ์ฒด ์์ฑ formData.append('i..
๐ ๋๋๊ทธ ์ค ๋๋กญ(Drag and Drop) ๊ธฐ๋ฅ ์ดํด & ๊ตฌํํ๊ธฐ
HTML ๋๋๊ทธ ์ค ๋๋กญ ์ฌ์ฉ๋ฒ ๋๋๊ทธ(drag)์ ๋๋กญ(drop)์ ์ปดํจํฐ๋ฅผ ์ด์ฉํ๋ฉด์ ์ ๋ง ๋ง์ด ์ฌ์ฉํ๋ ๊ธฐ๋ฅ ์ค์ ํ๋์ผ ๊ฒ์ด๋ค. ํ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฌธ์๋ฅผ ๋ณต์ฌํด ์ด๋ํ๋ ๊ฒ ๋ถํฐ ์ฃผ๋ฌธ ํ๋ ค๋ ๋ฌผ๊ฑด์ ์ฅ๋ฐ๊ตฌ๋์ ๋๋กญํ๋ ๊ฒ ๊น์ง ์ผ์์ํ์์ ๋ง์ด ์ ํด ๋ดค์ ๊ฒ์ด๋ค. HTML ๊ทธ๋ฆฌ๊ณ JavaScript์์์ ๋๋๊ทธ ๋๋กญ์ ์ด๋ฒคํธ ๊ธฐ๋ฐ์ผ๋ก ์๋ํ๊ฒ ๋๋๋ฐ, ๋ง์ฐ์ค ์ปค์๋ก ๊ฐ์ฒด(object)๋ฅผ ๋๋๊ทธํด์ ๋์ ๋๊น์ง ์ฌ๋ฌ ๋จ๊ณ์ ์ด๋ฒคํธ๊ฐ ์์ฐจ์ ์ผ๋ก ๋ฐ์ํ๊ฒ ๋์ด ๋์์ด ์๋ฃ๋๊ฒ ๋๋ค. ์ด๋ฒ ํฌ์คํ ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ๋๋๊ทธ ์ค ๋๋กญ ์ด๋ฒคํธ ๋์ ์๋ฆฌ๋ฅผ ์ดํดํ๊ณ ์ฌ๋ฌ ์์ ๋ฅผ ๊ตฌํํ๋ ์๊ฐ์ ๊ฐ์ ธ๋ณผ ์์ ์ด๋ค. ๋๋๊ทธ & ๋๋กญ ์ด๋ฒคํธ ์ข ๋ฅ HTML์์ ์์๊ฐ ๋๋๊ทธ ์ด๋ฒคํธ๊ฐ ๋ฐ์ ํ ์ ์๋๋ก ํด๋น..