μ°Έκ³ μλ£:
νλ‘ νΈμλ νλ μμν¬λ?
- νλ‘ νΈμλλ λ μ΄μμ, κ·Έλν½, νμ, νμ΄ν¬κ·ΈλνΌ λ±λ± μ΅μ’ μ¬μ©μμκ² νμλλ λΆλΆ λλ ꡬμ±μμλ₯Ό λ§ν¨. λν, νλ‘ νΈμλ νλ μμν¬λ λ°λ‘ μ¬μ©ν μ μλ μμλ₯Ό νμ©νμ¬ μ ν리μΌμ΄μ μ νλ‘ νΈμλλ₯Ό κ°λ°ν μ μλ λꡬ μΈνΈ
- κΈ°μ‘΄μ SPAλ μ¬μ©μκ° λ§ν¬λ₯Ό ν΄λ¦ν λλ§λ€ μλ²λ‘λΆν° μλ‘μ΄ νμ΄μ§ λ‘λλλ λ°©μμ΄μ§λ§, SPAλ μ΄κΈ°μ μ 체 νμ΄μ§λ₯Ό λ‘λνκ³ , μ¬μ©μ μΈν°λμ μ λ°λΌ νμν λ°μ΄ν°λ§ μλ²λ‘λΆν° λΉλκΈ°μ μΌλ‘ λ‘λνμ¬ μ λ°μ΄νΈνκ² λ§λ¦. μ΄λ μ¬μ©μ κ²½νμ ν₯μμν€κ³ μ ν리μΌμ΄μ μ μ±λ₯μ κ°μ μν¬ μ μμ.
π νλ‘ νΈμλ νλ μμν¬ μ΅μ νν© κ·Έλν
μ΄ μ€ μμ 3κ°λ μ¬μ ν React, Vue.js, Angular
1) React
- μ¬μ©μ μΈν°νμ΄μ€ λ° κ΄λ ¨ μ»΄ν¬λνΈλ₯Ό κ°λ°νκΈ° μν΄ μ μλ €μ§ μλ°μ€ν¬λ¦½νΈ λΌμ΄λΈλ¬λ¦¬
π νΉμ§
- κ°μ DOMκ³Ό λ¬Έμ μ‘μΈμ€ λ° μ‘°μμ μ²λ¦¬νλ λ°©μ
- Facebookμμ μ 곡
- HTML λ°μ΄νμ νκ·Έ ꡬ문μ νΌν©ν JSX μ½λ© μ€νμΌμ μ¬μ©νμ¬ μ»΄ν¬λνΈ μμ±
- ν° μ»΄ν¬λνΈλ₯Ό κ°λ³μ μΌλ‘ κ΄λ¦¬ν μ μλ μμ μ»΄ν¬λνΈλ₯Ό λΆν΄
π μ₯μ
- λμ μ»΄ν¬λνΈ μ¬μ¬μ©μ± : μ ν리μΌμ΄μ μ λ€λ₯Έ λΆλΆμμμ νμ κ³Ό μ¬μ¬μ©μ μ©μ΄νκ² μ¬μ©ν μ μμ
- κ°μ DOMμ μ¬μ©νμ¬ μΌκ΄λκ³ μνν μ±λ₯μ 보μ¬μ€ (DOMμ HTML λ° XML λ¬Έμμ μ μνΈμμ©νμ¬ νΈλ¦¬ ꡬ쑰μ μ μ¬νκ² μλνλ©° κ° HTML μμλ κ°μ²΄μ²λΌ μλ )
- ν΄λμ€ μμ΄ μ»΄ν¬λνΈ μμ± κ°λ₯
π λ¨μ
- μ¬λ¬ λ² μ§μμ μΌλ‘ μ λ°μ΄νΈλκΈ° λλ¬Έμ μ μ ν λ¬Έμ μ°ΎκΈ° μ΄λ ΅κ³ , μ΄λ³΄μμ νμ΅ κ³‘μ μ μν₯μ λ―ΈμΉ¨
- JSXμ 볡μ‘μ±μ μ΄ν΄νκΈ° μ΄λ €μ
- νλ‘ νΈμλμ λν μ루μ λ§ μ 곡
β μ¬μ©μ 체
- Facebook, Netflix, Airbnb, Uber, Instagram
2) Angular
- Angularλ κ°μ DOMμ μ¬μ©νμ§ μκ³ μ€μ DOM μ¬μ©
- νλ‘ νΈμλ νλ μμν¬ λͺ©λ‘μ μ§λ°°νκ³ μλ νλ μμν¬
- λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ (SPA)μ λ§λ€κΈ° μν νλ μμν¬
- ꡬκΈμμ κ°λ°ν νμ μ€ν¬λ¦½νΈ κΈ°λ° κ°λ° νλ«νΌ
- νμ₯ κ°λ₯ν μΉ μ ν리μΌμ΄μ κ°λ°νκΈ° μν κ΅¬μ± μμ κΈ°λ° νλ μμν¬
- μ νλΈ, κ΅¬κΈ λ²μμμ λ§μ΄ μ¬μ©
π μ₯μ
- μλ°©ν₯ λ°μ΄ν° λ°μΈλ©κ³Ό κ°μ λλΆλΆμ μ€μν κΈ°λ₯μ΄ κΈ°λ³Έμ μΌλ‘ μ 곡
- λκ·λͺ¨ μ ν리μΌμ΄μ μμ±μ΄ κ°λ₯
π λ°μ΄ν° λ°μΈλ©μ΄λ?
- νλ©΄ μμ 보μ¬μ§λ λ°μ΄ν°μ λΈλΌμ°μ λ©λͺ¨λ¦¬μ μλ λ°μ΄ν°λ₯Ό λ¬Άμ΄μ μλ‘ κ°μ λ°μ΄ν°λ₯Ό λκΈ°ννλ κ²
- μλ₯Ό λ€μ΄μ, HTMLμμ μλ² νΉμ μ€ν¬λ¦½νΈ μμμ λ°μμ¨ λ°μ΄ν°λ₯Ό νλ©΄ μμ κ·Έλ €μ£Όλ λ°©μμ΄ μλ€λ©΄, ν΄λΉ κ°μ΄ λ³κ²½λ κ²½μ° λ€μ HTML μμμ λ°μ΄ν°λ₯Ό λ³κ²½λ κ°μΌλ‘ λ§μΆ° λμνκ² λ§λλ κ²μ 'λ°μ΄ν° λ°μΈλ©'μ΄λΌ ν¨
- μ°Έκ³ λ‘ Reactλ λ¨λ°©ν₯, Angularμ Vue.jsλ μλ°©ν₯ λ°μ΄ν° λ°μΈλ©
- μλ°©ν₯ λ°μ΄ν° λ°μΈλ©: μ리먼νΈμ λ°μ΄ν°λ₯Ό λ°μΈλ©νλ©΄ JS μ½λλ‘ λ°μ΄ν°λ₯Ό λ³κ²½ν μλ μκ³ , μ리먼νΈμ κ°(input)μ μμ ν΄μ λ°μ΄ν°λ₯Ό λ³κ²½ν μλ μμ
- λ¨λ°©ν₯ λ°μ΄ν° λ°μΈλ©: HTMLμ λ°μΈλ©ν λ°μ΄ν°λ₯Ό JSμμ μμ ν κ²½μ° νλ©΄μλ λ°μλμ§λ§, νλ©΄μμ μ§μ ν΄λΉ μ리먼νΈμ κ°μ λ°κΏ¨μ λ JSμ λ°μ΄ν°κ° μμ λλλ‘ λ°μΈλ©νλ λ°©λ²μ μ 곡νμ§ μμ
π μ°Έκ³
- μλ°©ν₯ λ°μΈλ©μ΄ κ°λ₯ν κ²μ νμνΈλ¦¬μμ μμνΈλ¦¬, μμνΈλ¦¬μμ νμ νΈλ¦¬λ‘ μ ν κ°λ₯νκΈ° λλ¬Έμ μ¬μ΄λμ΄ννΈλ μ±λ₯λ¬Έμ κ° μ΄λμ λ°μνλμ§ μμΈ‘νκΈ° μ΄λ €μμ§
- κ΅¬μ± μμ κΈ°λ° μν€ν μ³: ꡬμ±μμλ₯Ό μΈλΆ μμλ‘ μ μνλ©΄ κ΅¬μ± μμμ μ’ μμ±μμ λΆλ¦¬λ¨
- μ’ μμ± μ£Όμ μ μ¬μ©νλ©΄ μ»΄ν¬λνΈ λμ μ¬μ¬μ©μ±κ³Ό κ΄λ¦¬κ° νΈλ¦¬ν΄μ§
- κ΄λ¦¬ κ°λ₯ν μ ν리μΌμ΄μ : ν μ€νΈκ° κ°λ₯νκ³ μ¬μ¬μ©μ΄ κ°λ₯
- μ§μμ΄, μμ‘΄μ± μ£Όμ κΈ°λ₯
π λ¨μ
- Angularλ κ°μ DOMμ μ¬μ©νμ§ μκ³ μ€μ DOM μ¬μ© -> μ ν리μΌμ΄μ μ ν¬κΈ°μ 볡μ‘μ± λλ¬Έμ λ λλ§ μλ μ ν
- μμ ν λμ μ루μ μΌλ‘, μμ μ μννλ λ°©λ²μ΄ λ€μνλ―λ‘ νμ΅ κ³‘μ μ΄ κ°νλ¦
- κΈ°λ₯μ΄ λ§κ³ κ°λ ₯νμ§λ§, μ¬μ©νκΈ° μ΄λ ΅κ³ νλ‘μ νΈ κ΅¬μ±μ΄ 볡μ‘ν΄μ§
- λμ μ±μ΄λ λ§νΌ λλλ‘ μ λλ‘ μλνμ§ μμ μ μμ. νμ§λ§, Angular μ½λ μ΅μ ν λ° λͺ¨λ² μ¬λ‘κ° λ§μ
- μ νλ SEO κΈ°λ₯
- λΆνμ΄ μ€λ₯Έ μ½λμ ν° ν¬κΈ°
3) Vue.js
π νΉμ§
- κ°μ DOM μ¬μ©
- μ μ§μ ννμ μ΅λν νμ©νλ νλμ μ΄κ³ μ§λ³΄μ μΈ MVVM νλ μμν¬
- κ°λ³κ³ μ μνκΈ° μ¬μ΄ μΈν°λν°λΈ UI μμλ₯Ό λ§λ€μ΄μμ
MVVMλ?
- UI λ° UI μ½λλ₯Ό λΆλ¦¬ν UI μν€ν μ³ λμμΈ ν¨ν΄
- UIλ₯Ό XAMLλ‘ μ μΈμ μΌλ‘ μ μνκ³ λ°μ΄ν° λ°μΈλ© νκ·Έλ₯Ό μ¬μ©νμ¬ λ°μ΄ν° λ° λͺ λ Ήμ ν¬ν¨νλ λ€λ₯Έ κ³μΈ΅μ μ°κ²°ν¨
μ¬κΈ°μ, XAMLμ΄λ?
- νμ₯ μμ© νλ‘κ·Έλ¨ λ§ν¬μ μΈμ΄
- λ§μ΄ν¬λ‘μννΈμ¬κ° ꡬ쑰κ°κ³Ό κ°μ²΄λ₯Ό μ΄λννλλ° μ¬μ©νλ €κ³ λ§λ μ μΈν XML κΈ°λ° μΈμ΄
- μ μ°νκ³ κ°λ¨ν APIλ₯Ό ν΅ν΄ λ°μ΄ν° λ°μν μμλ₯Ό μ 곡
- μκ·λͺ¨ νλ‘μ νΈλ₯Ό μλ£ν λ€μ λκ·λͺ¨ νλ‘μ νΈλ‘ νμ₯νλ κ²μ΄ κ°λ¨
- ν¬κΈ°κ° μκΈ° λλ¬Έμ μ€μΉκ° κ°λ¨
- ν¬κ³ μμ ν νλ¦Ώμ λ§λ€ μ μκ³ μ€λ₯λ₯Ό λΉ λ₯΄κ² μλ³ν μ μμ΄ μκ°κ³Ό λ Έλ ₯μ μ μ½μ΄ κ°λ₯
- κΈ°μ‘΄ μ ν리μΌμ΄μ μ λ°μΈλ©μ κ°μννκ³ κ΄λ²μν λ¬Έμλ₯Ό μ 곡
- MVVM μν€ν μ²λ₯Ό ν΅ν΄ HTML λΈλ‘μ λ μ½κ² μ²λ¦¬ν μ μμ
π μ₯μ
- Angularλ λ§μ κΈ°λ₯μ μ 곡νμ§λ§, μ΄λ³΄μμκ²λ μ΄λ €μ. λ νλ‘μ νΈ κ΅¬μ±μ΄ 볡μ‘νκ³ λ§μ μ©λμ΄ λ°μνλ νλ μμν¬. μ΄μ λλΉνμ¬ Vueλ λ¨μνκ³ μ§κ΄μ μΈ λ¬Έλ²μ΄λΌ κ°λ°μ κ°νΈνκ² ν μ μμ.
- κ°μ DOMμ μ¬μ©νμ¬ ν¨μ¨μ μΈ λ λλ§ κ΅¬νκ°λ₯. DOM μ‘°μμ μ΅μννμ¬ μ±λ₯ ν₯μ
- μκ³ λΉ λ¦
- μ΄λ³΄μμκ² μΉμ. λ°°μ°κΈ° μ¬μ
- μμΈν λ¬Έμ
- κ°λ¨ν ꡬ문
- μλ°©ν₯ λ°μ΄ν° λ°μΈλ© SEOμ κΈμ μ μΈ μν₯
- κΈ°μ‘΄ μΉ μ ν리μΌμ΄μ ꡬμ±κ³Ό μ μ¬
- Reactλ λΌμ΄λΈλ¬λ¦¬λ‘ UI λ λλ§ μμμ μ§μ€ν λ°λ©΄, Vue.jsλ νμν λꡬλ₯Ό μ체μ μΌλ‘ ν¬ν¨
β κ°μ DOM
κ°μ DOMμ μ¬μ©νκ² λλ©΄, λ©λͺ¨λ¦¬ μμμ κ°μ DOMμ λ³κ²½νκ³ , μ΅μ’ λΈλΌμ°μ μ μ€μ DOMμ λ³κ²½λλ λΆλΆμ μ΄μ DOMκ³Όμ μ°¨μ΄λλ λΆλΆλ§ κ³μ νκ³ DOM λ³κ²½μ μ΅μννλ κΈ°λ²μ μ¬μ©
μ΄λ¬ν κΈ°λ²μ λΈλΌμ°μ μ λ λλ§ μ±λ₯μ ν₯μμμΌμ€
β SEOλ?
μΉ μ¬μ΄νΈκ° κ²μ κ²°κ³Όμ λ μ 보μ΄λλ‘ μ΅μ ννλ κ³Όμ
πλ¨μ
- μΈμ΄ μ₯λ²½κ³Ό νλ¬κ·ΈμΈ λΆμ‘±
νλ¬κ·ΈμΈμ΄λ?
- νΈμ€νΈ νλ‘κ·Έλ¨κ³Ό μλ‘ μλ΅νλ μ»΄ν¨ν° νλ‘κ·Έλ¨μ΄λ©°, νΉμ ν μ£Όλ¬Έμ κΈ°λ₯μ μ 곡
- μ¦, μΆκ°μ μΈ κΈ°λ₯μ΄λΌκ³ μκ°νλ©΄ λ¨
- κ°μΈμ΄ λ§λ μλΉμ€
- λκ·λͺ¨ νλ‘μ νΈμ μ μ©νκΈ°μλ μ νμ
- κ°λ ₯ν λΉμ¦λμ€κ° λ·λ°€μΉ¨λμ§ μμ
'νλ‘ νΈμλ π©π»βπ»' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[ETC] SSR, CSR, SEOμ λνμ¬ (0) | 2024.06.16 |
---|---|
[ν¨ν€μ§λ§€λμ ] yarn vs npm μ 리 β¨ (0) | 2024.02.22 |
μΈμ¦ λ°©μ μ 리 β¨ (3) | 2024.01.21 |
[ETC] OSI 7κ³μΈ΅ μ 리 β¨ (0) | 2024.01.18 |
μ κ·ννμ λ©ν λ¬Έμ μ 리 β¨ (0) | 2024.01.17 |