ย HTML5๋ ์ ๋ง๋ค์ด ์ก๋๊ฐ? ์น์ด ๋ฐ์ ํ๋ฉด์ ๋ง์ ๋ธ๋ผ์ฐ์ ๋ค์ด ์๊ฒจ๋ฌ์ง๋ง W3C์ ๊ท์ ์ ๋ฌด์ํ๊ณ plug-in
, Active-x
์ ๊ฐ์ ๋นํ์ค ๊ธฐ์ ์ ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ ๋ค๊ณผ ๋ธ๋ผ์ฐ์ ๋ง๋ค ์ํธ ๋ค๋ฅธ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ์ ์ถ๊ฐํ์ฌ ์น ํ์ด์ง์ ์น ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ด ๋ฌด๋์ก๋ค.
ย ์ด๋ฐ ์ํฉ์์ ๋ชจ๋ฐ์ผ ๊ธฐ์ ์ ๋ฐ์ ์ ๋ฐ๋ผ PCํ๊ฒฝ์์ ๊ฐ๋ฐ๋ ์น ์ฌ์ดํธ๋ค์ ๋ชจ๋ฐ์ผ์์ ์คํํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ชจ๋ฐ์ผ์ฉ ์น ์ฌ์ดํธ๋ฅผ ๋ฐ๋ก ๋ง๋ค์ด์ผ ํ๋ค. ๊ฐ๋ฐ์๋ค์ ๋๋ฐ์ด์ค, ์น ๋ธ๋ผ์ฐ์ ์ ๋ฐ๋ผ์ ๊ฐ๋ฐ์ ๋ฐ๋ณตํด์ผ ํ๋ค.
ย ๋๋ฌธ์ ๋ชจ๋ ๋๋ฐ์ด์ค, ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉํ ์ ์๋ ๋ฒ์ฉ ์น ํ์ค์ด ํ์ํ๊ณ ๊ทธ์ ๋ฐ๋ผ HTML5 ํ์ค์ด ํ์ํ๊ฒ ๋์๋ค.
ย HTML5 ํ์ค์์๋ ์น ํ์ด์ง๋ฅผ ๊ตฌ์กฐ์ ๋ด์ฉ(Structure), ๋ชจ์(Presentation), ํ๋(Behavior)์ ๋ช ํํ๊ฒ ๋ถ๋ฆฌํ์ฌ ๊ฐ๋ฐํ ์ ์๋๋ก
ย CSS๋ HTML๋ฌธ์์ ์์ด๋ ๋ชจ์, ์ถ๋ ฅ ์์น ๋ฑ ์ธ๊ด์ ๊พธ๋ฏธ๋ ์ธ์ด์ด๋ฉฐ, CSS๋ก ์์ฑ๋ ์ฝ๋๋ฅผ Style Sheet๋ผ๊ณ ๋ถ๋ฅธ๋ค.
ย HTMLํ์ผ ๋ด๋ถ์์ headํ๊ทธ ๋ฐ์ styleํ๊ทธ๋ฅผ ๋ง๋ค์ด์ ์ฌ์ฉํ ์ ์๊ณ , ํ๊ทธ ๋ด๋ถ์ inline์ผ๋ก ์ฌ์ฉํ ์ ๋ ์๋ค. ๊ฐ์ฅ ์ ์์ ์ธ ๋ฐฉ๋ฒ์ ์ธ๋ถ์ css ํ์ผ์ ๋ง๋ค๊ณ link๋ฅผ ์ฌ์ฉํด์ ์ ์ฉ์ํค๋ ๋ฐฉ๋ฒ์ด๋ค.
ย CSS๋ฅผ ์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ HTML ํ๊ทธ๋ฅผ ์ ์ฐพ์์์ผ ํ๋ค. HTML๋ฌธ์๊ฐ ์ปค์ง ์๋ก ๋ง์ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ํ์ํ ํ๊ทธ๋ฅผ ์ฐพ์ ์ ์์ด์ผ ํ๋ค. ์ด๋ฅผ ์ํด์ Selector๋ฅผ ์ฌ์ฉํ๋ค.
์ด ์ธ์๋ Selector๋ฅผ ์กฐํฉํ๋ ๋ฐฉ๋ฒ์ด๋ pseudo-class Selector๊ฐ ์๋ค.
ย HTML ํ์ด์ง๊ฐ ๋ธ๋ผ์ฐ์ ์๋์ฐ๋ ํญ์ ๋ก๋๋๋ฉด ๋ธ๋ผ์ฐ์ ๋ก๋ถํฐ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์์ ํ์ฉ ๊ฐ๋ฅํ ๋ง์ ๊ฐ์ฒด๋ค์ ์ ๊ณต ๋ฐ๋๋ค. DOM
,BOM
, Core
์๋ฐ์คํฌ๋ฆฝํธ core ๊ฐ์ฒด๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋จ์์ ํญ์ ํ์ฉํ ์ ์๋ ๊ธฐ๋ณธ ๊ฐ์ฒด๋ค์ด๋ค.(String, Math, Array, Function... ๋ฑ)
๋ธ๋ผ์ฐ์ ์ ๊ดํ ์ ๋ณด๋ฅผ ์ ๊ณตํ๊ฑฐ๋ ๋ธ๋ผ์ฐ์ ์ ๋ชจ์์ ์ ์ดํ๋๋ก ์ ๊ณต๋๋ ๊ฐ์ฒด๋ค์ BOM ๊ฐ์ฒด๋ผ๊ณ ๋ถ๋ฅธ๋ค.(window, history, screen... ๋ฑ)
DOM ๊ฐ์ฒด
๋ธ๋ผ์ฐ์ ๋ HTMLํ์ด์ง๋ฅผ ๋ก๋ํ๋ ๊ณผ์ ์์ ๊ฐ HTML ํ๊ทธ๋ฅผ ํ๋์ ๊ฐ์ฒด๋ก ๋ง๋ ๋ค.
ย ๋ธ๋ผ์ฐ์ ๋ ์ HTML ํ์ด์ง๋ฅผ ๋ก๋ํ๋ฉด์ ํ๊ทธ๋ฅผ ๊ฐ์ฒด๋ก ๋ง๋๋๊ฐ? HTML ํ์ด์ง๊ฐ ์ถ๋ ฅ๋ ํ DOM ๊ฐ์ฒด๋ฅผ ํตํด HTML ํ๊ทธ๊ฐ ์ถ๋ ฅ๋ ๋ชจ์๊ณผ ์ปจํ ์ธ ๋ฅผ ์ ์ดํ๊ธฐ ์ํด์๋ค.
ย ๋ธ๋ผ์ฐ์ ๋ HTML ํ์ด์ง๋ฅผ ๋ก๋ํ๋ฉด์ HTML ํ๊ทธ์ ํฌํจ ๊ด๊ณ์ ๋ฐ๋ผ DOM ๊ฐ์ฒด๋ค์ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ๋ง๋ ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ DOM ํธ๋ฆฌ๋ฅผ ๋ฐ๋ผ์ DOM ๊ฐ์ฒด๋ค์ ๋ง์๋๋ก ์ ๊ทผํ ์ ์๋ค.
DOM Tree๋ ๋ค ์ข ๋ฅ์ ๋ ธ๋๋ก ๊ตฌ์ฑ๋๋ค.
์ ์ ์ํ ๋ฐฉ๋ฒ
์ผ๋ก ์ฐพ๋๋ค!!ย ๋ง์ฝ ํ ๋ฒ์ ์ฌ๋ฌ ๊ฐ์ DOM ๊ฐ์ฒด๋ฅผ ์์ ํ๋ค๋ฉด? 100๊ฐ์ DOM ๊ฐ์ฒด๋ฅผ ์์ ํด์ผํ๋ค๋ฉด ๋ธ๋ผ์ฐ์ ๋ ๋๋๋ง์ 100๋ฒ ์คํํด์ผ ํ๋ค. ๋ธ๋ผ์ฐ์ ๋ HTML ํ์ผ์ ์ฝ์ด์ DOM ํธ๋ฆฌ, CSS ํธ๋ฆฌ๋ฅผ ๋ง๋ค๊ณ DOM์ ๋ ์ด์์์ ์ค์ ํ๊ณ ๋๋๋ง์ ํ๋ค. ์ด ๊ณผ์ ์ 100๋ฒ ๋๋ ๊ทธ ์ด์ํ๊ฒ ๋๋ค๋ฉด, ๋ธ๋ผ์ฐ์ ์ ํจ์จ์ด ๋จ์ด์ง๊ฒ ๋๋ค.
ย ์ด๋ฌํ ๋ฌธ์ ์ ์ ํด๊ฒฐํ๊ณ ์ ๊ฐ์ ๋(Virtual DOM)์ ์ฌ์ฉํ๋๋ฐ, ์ด๋ฏธ React.js , Vue.js์์๋ ๊ฐ์ ๋์ ์ฌ์ฉํ๊ณ ์๋ค. ๊ฐ์ ๋์ ์ฝ๊ฒ ์๊ฐํ๋ฉด ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ๋ฒํผ๋ก ์๊ฐํ ์ ์๋ค. DOM ์์ ์์ฒญ์ ์ฆ๊ฐ์ ์ผ๋ก ์คํํ๋ ๊ฒ์ด์๋๋ผ ๊ฐ์ ๋์ด๋ผ๋ ๋ฒํผ์ ๋ด์ ๋์๋ค๊ฐ ์คํํจ์ผ๋ก ์จ ๋๋๋ง ํ์๋ฅผ ์ค์ผ ์ ์๊ณ ๋ธ๋ผ์ฐ์ ์ ํจ์จ์ ๋์ผ ์ ์๋ค๋ ๊ฒ์ด๋ค.
ย ํ์ง๋ง ์ด๋ฐ ๊ฐ์ ๋์ ์ฌ์ฉํ๋ ๊ฒ์ด DOM๋ง์ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค ๋น ๋ฅด๋ค๋ ๊ฒ์ ์๋๋ค. ์๊ฐํด๋ณด๋ฉด ์๋ณธ DOM ๊ฐ์ฒด์ ์ด๋ฅผ ๋ณต์ฌํ Virtual DOM ๊ฐ์ฒด 2๊ฐ๋ฅผ ๊ฐ๊ณ ์๋ค๋ ๊ฒ๋ถํฐ ์๋์๋ ๊ฑฐ๋ฆฌ๊ฐ ์์ด๋ณด์ธ๋ค. ๊ฒ๋ค๊ฐ ํ์ ํ์๋ Virtual DOM, DOM ๋ ๋ฒ ์คํํ๊ธฐ ๋๋ฌธ์ ์ค์ ๋ก๋ ๋ ๋๋ฆฌ๋ค.
ย ๊ทธ๋ผ์๋ ๊ฐ์ ๋์ ์ด๋ฏธ ์ฌ๋ฌ ํ๋ ์์ํฌ์์ ์ฌ์ฉํ๋ ์ด์ ๋, ๋น ๋ฅธ ๊ฐ๋ฐ์ ์ํด์๋ ์ฑ๋ฅ ์ต์ ํ๋ณด๋ค ๊ฐ๋ฐ ํธ์์ฑ์ด ๋ ์ค์ํ ๋๊ฐ ๋ง๊ธฐ ๋๋ฌธ์ด๋ค.
ย document.createDocumentFragment()
์์ DocumentFragment ๋
ธ๋๋ฅผ ์์ฑํด์ ์ฌ์ฉํ๋ฉด ๋ผ์ด๋ธ DOM ํธ๋ฆฌ ์ธ๋ถ์ ๊ฒฝ๋ํ๋ ๋ฌธ์ DOM์ ๋ง๋ค ์ ์๋ค. ๋ง์น ๋ผ์ด๋ธ DOM ํธ๋ฆฌ์ฒ๋ผ ์๋ํ๋, ๋ฉ๋ชจ๋ฆฌ์์์๋ง ์กด์ฌํ๋ ๋น ๋ฌธ์ ํ
ํ๋ฆฟ์ผ๋ก ์๊ฐํ ์ ์๋ค. ์์ ๋
ธ๋๋ฅผ ๋ฉ๋ชจ๋ฆฌ์์์ ์์ฝ๊ฒ ์กฐ์ํ ํ ๋ผ์ด๋ธ DOM์ ์ถ๊ฐํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค. ๋ฉ๋ชจ๋ฆฌ ์์์๋ง ์กด์ฌํ๊ณ ๋ผ์ด๋ธ DOM ํธ๋ฆฌ์ ์ผ๋ถ๊ฐ ์๋๊ธฐ ๋๋ฌธ์ ํ์ ํญ๋ชฉ์ ์ถ๊ฐํด๋ ํ์ด์ง ๋ฆฌํ๋ก์ฐ๊ฐ ๋ฐ์ํ์ง ์๋๋ค. ๋ฐ๋ผ์ ๊ฐ์๋์ ์ฌ์ฉํ๋ ๊ฒ์ฒ๋ผ ๋งค๋ฒ ๋๋๋ง์ ์์ฒญํ์ง ์๊ณ DocumentFragment๋ฅผ ์ฌ์ฉํ๋ฉด ๋ธ๋ผ์ฐ์ ์ ๋๋๋ง ํ๋ก์ธ์ค๋ฅผ ์ค์ผ ์์๋ค.