๐ŸŽ ๋ธŒ๋ผ์šฐ์ € ๋ Œ๋”๋ง ๊ณผ์ •

GYยท2021๋…„ 10์›” 24์ผ
1

Basic CS

๋ชฉ๋ก ๋ณด๊ธฐ
2/28
post-thumbnail

๋ธŒ๋ผ์šฐ์ €๊ฐ€ HTML, CSS, JS๋กœ ์ž‘์„ฑ๋œ ํ…์ŠคํŠธ ๋ฌธ์„œ๋ฅผ ์–ด๋–ป๊ฒŒ ํŒŒ์‹ฑ(ํ•ด์„)ํ•ด์„œ ๋ธŒ๋ผ์šฐ์ €์— ๋ Œ๋”๋งํ• ๊นŒ?

ํŒŒ์‹ฑ parsing

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ๋ฌธ๋ฒ•์— ๋งž๊ฒŒ ์ž‘์„ฑ๋œ ํ…์ŠคํŠธ ๋ฌธ์„œ๋ฅผ ์ฝ์–ด ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„œ,
ํ…์ŠคํŠธ ๋ฌธ์„œ์˜ ๋ฌธ์ž์—ด์„ ํ† ํฐ์œผ๋กœ ๋ถ„ํ•ดํ•˜๊ณ ,
ํ† ํฐ์— ๋ฌธ๋ฒ•์  ์˜๋ฏธ์™€ ๊ตฌ์กฐ๋ฅผ ๋ฐ˜์˜ํ•˜์—ฌ ํŠธ๋ฆฌ๊ตฌ์กฐ์˜ ์ž๋ฃŒ๊ตฌ์กฐ์ธ ํŒŒ์Šค ํŠธ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ณผ์ •

๋ Œ๋”๋ง rendering

HTML, CSS, JS๋กœ ์ž‘์„ฑ๋œ ๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑํ•ด ๋ธŒ๋ผ์šฐ์ €์— ์‹œ๊ฐ์ ์œผ๋กœ ์ถœ๋ ฅํ•˜๋Š” ๊ฒƒ



๐ŸŽ€ HTMLํŒŒ์‹ฑ & DOM ์ƒ์„ฑ

๐Ÿ“ฆ HTML element

HTML ๋ฌธ์„œ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฐœ๋ณ„์ ์ธ ์š”์†Œ

๐Ÿ“ฆ Node

๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ฐ๊ฐ์˜ HTML Tag๋ฅผ ์ฝ์œผ๋ฉด์„œ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์ž์‹ ๋งŒ์˜ ์˜ค๋ธŒ์ ํŠธ๋กœ ๋ณ€ํ™˜ํ•˜๋Š”๋ฐ, ์ด ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋…ธ๋“œ Node ๋ผ๊ณ  ํ•œ๋‹ค.
HTML์— ์ž‘์„ฑ๋œ ํƒœ๊ทธ๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๋…ธ๋“œ๋กœ ๋ณ€ํ™˜๋˜๋Š” ๊ฒƒ์ด๋‹ค.
node ์•ˆ์—๋Š” ํด๋ž˜์Šค, ํ…์ŠคํŠธ์™€ ๊ฐ™์€ ์ •๋ณด๋“ค์ด ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.

Node๋ผ๋Š” ์˜ค๋ธŒ์ ํŠธ๋Š” eventTarget์„ ์ƒ์†ํ•œ๋‹ค.

์ด HTML element๊ฐ€ ๋ Œ๋”๋ง ์—”์ง„์— ์˜ํ•ด ํŒŒ์‹ฑ๋˜์–ด DOM์„ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ ๋…ธ๋“œ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜๋œ๋‹ค.

์•„๋ž˜๋ฅผ ํฌํ•จํ•œ ์ด 15๊ฐœ์˜ ๋…ธ๋“œ ์ข…๋ฅ˜๊ฐ€ ์žˆ๋‹ค.

  • document node
  • element node
  • attribute node
  • text node
  • comment node
  • documentType node

๊ฐ์ฒดํ™”ํ•œ ๋ชจ๋“  ๋…ธ๋“œ ๊ฐ์ฒด๋“ค์€ ํŠธ๋ฆฌ์ž๋ฃŒ ๊ตฌ์กฐ๋กœ ๋‹ค์‹œ ๊ตฌ์„ฑ๋œ๋‹ค.

๐Ÿ“ฆ tree data structure

ํŠธ๋ฆฌ ์ž๋ฃŒ๊ตฌ์กฐ : ๋ถ€๋ชจ ๋…ธ๋“œ์™€ ์ž์‹ ๋…ธ๋“œ๋กœ ๊ตฌ์„ฑ๋˜์–ด ๋…ธ๋“œ๊ฐ„์˜ ๊ณ„์ธต์  ๊ตฌ์กฐ๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋น„์„ ํ˜• ์ž๋ฃŒ๊ตฌ์กฐ

๐Ÿ“ฆ DOM

์ด ๋…ธ๋“œ ๊ฐ์ฒด๋“ค๋กœ ๊ตฌ์„ฑ๋œ ํŠธ๋ฆฌ ์ž๋ฃŒ๊ตฌ์กฐ๋ฅผ DOM์ด๋ผํ•œ๋‹ค.

DOM์€ Document Object Model์˜ ์•ฝ์ž๋กœ, ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜จ ์ˆœ์ˆ˜ ํ…์ŠคํŠธ๋กœ ์ด๋ฃจ์–ด์ง„ HTML๋ฌธ์„œ๋ฅผ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ๊ตฌ์กฐ์ธ ๊ฐ์ฒด์˜ ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜ํ•œ ๊ฒƒ์ด๋‹ค.

๋ Œ๋”๋ง ์—”์ง„์€ HTML์„ ํ•œ์ค„์”ฉ ์ˆœ์ฐจ์ ์œผ๋กœ ํŒŒ์‹ฑํ•ด DOM์„ ์ƒ์„ฑํ•ด ๋‚˜๊ฐ„๋‹ค. ์ฆ‰, HTML ๋ฌธ์„œ๋ฅผ ํŒŒ์‹ฑํ•œ ๊ฒฐ๊ณผ๋ฌผ์ด๋‹ค.



๐ŸŽ€ CSSํŒŒ์‹ฑ & CSSOM ์ƒ์„ฑ

๋ Œ๋”๋ง ์—”์ง„์ด HTML์„ ํŒŒ์‹ฑํ•˜๋ฉฐ DOM ์„ ์ƒ์„ฑํ•˜๋‹ค๊ฐ€
CSS๋ฅผ ๋กœ๋“œํ•˜๋Š” link / style ํƒœ๊ทธ๋ฅผ ๋งŒ๋‚˜๋ฉด DOM ์ƒ์„ฑ์„ ์ผ์‹œ์ค‘๋‹จํ•œ๋‹ค.

CSSOM

๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ํƒœ๊ทธ์— ์ง€์ •๋œ cssํŒŒ์ผ์„ ์„œ๋ฒ„์— ์š”์ฒญํ•˜์—ฌ ๋กœ๋“œํ•œ ๋‹ค์Œ, ๋™์ผํ•œ ๊ณผ์ •์„ ๊ฑฐ์ณ DOM์— CSS๋ฅผ ๋ณ‘ํ•ฉํ•œ ํ˜•ํƒœ์ธ CSSOM (CSS Object Model)์„ ์ƒ์„ฑํ•œ๋‹ค.

(์ด CSS ํŒŒ์‹ฑ์„ ์™„๋ฃŒํ•œ ๋’ค์— ๋‹ค์‹œ DOM ์ƒ์„ฑ์„ ์žฌ๊ฐœ ํ•œ๋‹ค.)

cascading rule

CSSOM์€ cascading rule์„ ๋”ฐ๋ฅด๋Š”๋ฐ, ๋ถ€๋ชจ์š”์†Œ์— ์ ์šฉ๋œ css๋Š” ์ž์‹์š”์†Œ์— ๊ทธ๋Œ€๋กœ ์ƒ์†๋œ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. (์œ„ ์ด๋ฏธ์ง€ ์ฐธ๊ณ )



๐ŸŽ€ Render Tree

์ตœ์ข…์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ๊ธฐ๋  ๊ตฌ์กฐ
๋ Œ๋”๋ง ์—”์ง„์ด ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์‘๋‹ต๋œ HTML๊ณผ CSS๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ ๊ฐ๊ฐ DOM ๊ณผ CSSOM์„ ์ƒ์„ฑํ•˜๊ณ  ๋‚˜๋ฉด, ๋ Œ๋”๋ง์„ ์œ„ํ•ด ์ด ๋‘˜์„ render tree๋กœ ๊ฒฐํ•ฉํ•œ๋‹ค.

rendertree๋Š” ๋ Œ๋”๋ง์„ ์œ„ํ•œ ํŠธ๋ฆฌ๊ตฌ์กฐ์˜ ์ž๋ฃŒ๊ตฌ์กฐ์ด๋ฏ€๋กœ, ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ๋ Œ๋”๋ง ๋˜๋Š” ๋…ธ๋“œ๋งŒ์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.

๋”ฐ๋ผ์„œ ๋‹ค์Œ์˜ ๋…ธ๋“œ๋“ค์€ ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค.

  • ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ๋ Œ๋”๋ง๋˜์ง€ ์•Š๋Š” ๋…ธ๋“œ : <meta>, <script>
  • CSS์— ์˜ํ•ด ๋น„ํ‘œ์‹œ ๋˜๋Š” ๋…ธ๋“œ : display: none

opacity: 0 ํ˜น์€ visibility: hidden์€ render tree์— ํฌํ•จ์ด ๋œ๋‹ค.

์™„์„ฑ๋œ ๋ Œ๋”ํŠธ๋ฆฌ๋Š” ๊ฐ HTML์š”์†Œ์˜ ๋ ˆ์ด์•„์›ƒ์„ ๊ณ„์‚ฐํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋œ๋‹ค.
์ดํ›„ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ํ”ฝ์…€์„ ๋ Œ๋”๋งํ•˜๋Š” painting ์ฒ˜๋ฆฌ์— ์ž…๋ ฅ๋œ๋‹ค.



๋ธŒ๋ผ์šฐ์ €์—์„œ ์›นํŽ˜์ด์ง€๋ฅผ ์—ด์—ˆ์„ ๋•Œ,
DOM๊ณผ, BOM(browser object model)- navigator,location,fetch์™€ ๊ฐ™์€ web API์™€ ๊ด€๋ จ๋œ ์š”์†Œ
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ๋‹ค.

๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋ธŒ๋ผ์šฐ์ € ์œ„์—์„œ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์„ ๋งŒ๋“ค ๋•ŒDOM, BOM๊ณผ ์—ฐ๊ด€๋œ API๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋”ฐ.

  • ์ „์ฒด ์˜ค๋ธŒ์ ํŠธ์ธ window : ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ˜„์žฌ ์—ด๋ ค์žˆ๋Š” ์ „์ฒด์ ์ธ ์ฐฝ
  • document : window ๋‚ด๋ถ€์˜ ํŽ˜์ด์ง€๊ฐ€ ํ‘œ๊ธฐ๋˜๋Š” ๋ถ€๋ถ„
    - ์ž‘์„ฑํ•œ html์š”์†Œ๋“ค์ด ํ‘œ๊ธฐ๋˜๋Š” ์˜์—ญ
  • navigator : ๋ธŒ๋ผ์šฐ์ € ์ž์ฒด์— ๊ด€๋ จ๋œ ์ •๋ณด๋ฅผ ๋‹ด์€ ์˜์—ญ (ํ™”๋ฉด์— ํ‘œ์‹œ๋˜์ง€ ์•Š์Œ)

console.log(window)๋ฅผ ํ•ด๋ณด๋ฉด ๋‚ด๋ถ€์— API์™€ ์˜ค๋ธŒ์ ํŠธ, ์ด๋ฒคํŠธ API, ์Šคํฌ๋ฆฐ ์‚ฌ์ด์ฆˆ ์ •๋ณด ๋“ฑ์ด ํฌํ•จ๋œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

Reference

  • ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋”ฅ๋‹ค์ด๋ธŒ
  • stackoverflow - CSSOM
profile
Why?์—์„œ ์‹œ์ž‘ํ•ด How๋ฅผ ์ฐพ๋Š” ๊ณผ์ •์„ ์ข‹์•„ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ๊ณ ๋ฏผ๊ณผ ์„ฑ์žฅ์˜ ๊ณผ์ •์„ ๊พธ์ค€ํžˆ ๊ธฐ๋กํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€