230322(μ)
π μ±μ₯μΌμ§ 4.0
μ±
ν볡ν μ΄κΈ°μ£Όμμ(μ¨μΈ λ€μ΄μ΄)
μ λ΄μ©μ μκ·Ήλ°μ μμνλ μλ°ν μ±μ₯κΈ°λ‘
μ΄μμλ κ½κ³Ό μ£½μ κ½μ μ΄λ»κ² ꡬλ³νλκ°?
μ±μ₯νκ³ μλ κ²μ΄ μ΄μ μλ κ²μ΄λ€.
μλͺ μ μ μΌν μ¦κ±°λ μ±μ₯μ΄λ€!
π³ (1.0)ν€μλ
μ΅λν κ°λ¨νκ² μ 리, μΆνμ 보면μ μ€μ€λ‘ μ€λͺ
π (2.0)κ²½ν μμ£Όλ‘
λ¨μ μ 보λ₯Ό μ λ¬νκΈ°λ³΄λ€ λ¬΄μμ λ°°μ κ³ μ΄λ»κ² ν΄κ²°νλμ§ μ§§κ³ κ°λ¨νκ² μμ±
βοΈ (3.0)μ ν΄μ§ ν νλ¦Ώμ λ§μΆ°μ
ν€μλ, κ²½ν λͺ¨λ μ’λ€. λ€λ§ λ§€μΌ μμ±νκΈ°λ‘ λ§μ λ¨Ήμλ§νΌ ν΅μ¬λ§ κ°κ²°νκ² μ 리ν μ μκ² ν νλ¦Ώμ μμ±
(3.1)230102λΆν° μμλλ νμ΅μ κ΄ν λ΄μ© μΆκ°
(3.2)230313λΆν° μ’λ κ²½ν, κ°μ μμ£Όμ λ΄μ©λ λ΄κΈ°!
πΎ (4.0)νμ΅ ν€μλμμ μ΅λν κ°λ¨ν μ 보 μ 곡, κ³ λ―Όμμ λ΄ κ²½νμ μμΈν μ μ!
π μ€λμ νμ΅ ν€μλ
μΊλ¬μ
- μ¬λΌμ΄λμΌμ κ°μ λ°©μμΌλ‘ 컨ν μΈ λ₯Ό νμνλ UX κ΅¬μ± μμ
- μΌλ°μ μΌλ‘ μΌμ μκ°μ λ°λ₯Έ μλ μ¬μ νΉμ μ¬μ©μκ° μλμΌλ‘ νμνλ λ°©μμ μ¬μ©νλ€.
- λ€μνκ² νμ©ν μ μμ§λ§, λ³΄ν΅ ννμ΄μ§μμ μ΄λ―Έμ§, μ ν λ° νλ‘λͺ¨μ μ νμν λ μ¬μ©λλ€.
λ λλ§
- HTML νμ± -> DOM + CSSOM -> Render Tree -> STYLE -> LAYOUT -> PAINT -> COMPOSITE
- μΆν μ’λ μμΈν μμ± μμ
π μ€λμ κ³ λ―Ό ν€μλ
무ν μΊλ¬μ μ μ΄λ»κ² ꡬννλ κ² μ’μκΉ?
- μ§κΈ λΉμ₯ λ μ€λ₯΄λ μκ°μ λ²νΌ 2κ°λ₯Ό λκ³ κ°κ°μ λ²νΌμ ν΄λ¦μ μΌμͺ½μΌλ‘ λμ΄κ°μ μ보μ΄κ²λλ μμλ₯Ό λ€μ κ·Έ λΆλͺ¨(container) νκ·Έμ λμ κ°κ² ν΄μ 무νμΌλ‘ ꡬννλ λ°©μ!
π μμ½ λ° ν루 κ°λ¨ νκ³
μ€λμ μ½λ ꡬνλ³΄λ¨ μ’λ κΉμ΄ μλ κ°λ
νμ΅μ μ§ννλ€. μΊλ¬μ
μ λν΄μ κΉκ² λ€μ΄κ°λ³΄κ³ κ·Έ μμμ νμλλ λ€λ₯Έ κ°λ
λ€μ μ 리ν΄λ³΄μλ€.
μ΄λ²μ νμ€ν λλ μ μμλ κ² κ°λ€. ꡬνλ μ€μνμ§λ§ μ§μ€ν΄μ κΉκ² λ€μ΄κ°λ κ² μ€μνλ€λ κ²! νμ€ν κ·Έλ κ² ν΄μΌ μ¨μ ν λ΄ κ²μ΄ λκ³ λ μλ―Έμλ
곡λΆκ° λλ κ² κ°λ€. μμΌλ‘ λ deepνκ² κ³΅λΆν μ μλ λ°©λ²μ λν΄μ μμ£Ό μκ°ν΄λ³΄λ € νλ€.
μ€λμ μν μ
- κ°λ μ λν΄μ κΉμ΄ λ€μ΄κ° μ
μ€λμ μμ¬μ΄ μ
- κ·Έλλ ꡬνμ μ‘°κΈ νμΌλ©΄ μ’μκ² λ€..?
μ°Έκ³
- μμ(μ‘λμ¬λμ μ°Έκ³ μμ)