728x90
π Micro Frontend
Micro Frontend λ λ°±μλμμ μ¬μ©νκ³ μλ λ§μ΄ν¬λ‘ μλΉμ€ μν€ν μ³μ²λΌ νλ‘ νΈμλμμ κ΄λ¦¬νλ μλΉμ€λ₯Ό λΆλ¦¬ν΄μ κ°λ°, κ΄λ¦¬νλ ν¨ν΄μ λ§ν©λλ€.
Micro Service μ²λΌ μ 체 νλ©΄μ μλν μ μλ λ¨μλ‘ λλμ΄ κ°λ°ν ν μλ‘ μ‘°λ¦½νλ λ°©μμ λλ€.
π Micro Frontend μ₯μ
- μκ³ , μμ§λ ₯ μκ³ μ μ§λ³΄μμ μ©μ΄ν μ½λλ² μ΄μ€λ₯Ό κ°μ§ μ μμ΅λλ€.
- κ° Micro Frontendλ κ³ μ ν κΈ°μ λ° νλ μ μν¬λ₯Ό μ νν μ μμ΅λλ€.
- νλ‘ νΈμλ κ°λ°μ μ μ§μ μ κ·Έλ μ΄λ λλ μ¬μμ±μ΄ μμν΄μ§λλ€.
- λΆλ¦¬ λ°°ν¬κ° μ©μ΄νκ³ , μμ¨μ μΈ ν μ‘°μ§μ΄μμ΄ μμν΄μ§λλ€.
π Micro Frontend λ¨μ
- λ°°ν¬ λ²λ€ μ¬μ΄μ¦κ° μ»€μ§ μ μμ΅λλ€.
- μλ‘ κ°μ κ°λ° νκ²½μ μ°¨μ΄λ‘ 볡μ‘λκ° μ¬λΌκ°λλ€.
- κ° Micro Frontendμλ μ€λ³΅ λ μ½λ λλ κΈ°λ₯μ΄ μμ μ μμ΅λλ€.
π Main Concept
- κΈ°μ λ
립μ±
- κ° μλ λ¨μλ€μ κΈ°μ μ μΌλ‘ λ 립μ μΌ μ μμ΄μΌ νλ€.
- κ° μλ λ¨μμ μ¬μ©λ νλ‘ νΈμ€λ κΈ°μ (React, Vue, Vanilla JS λ±) μ μκ΄ μμ΄ μ‘°ν©μ΄ κ°λ₯ν΄μΌ νλ€.
- 컨ν
μ€νΈ λ
립μ±
- κ° μλ λ¨μλ€μ΄ κ°μ νλ μμν¬λ₯Ό μ¬μ©νλλΌλ, 컨ν μ€νΈλ₯Ό 곡μ ν΄μ μλλ€.
- λ 립μ μΈ μ ν리μΌμ΄μ μ μ체μ μΌλ‘ ꡬμΆν΄μΌ νκ³ , μν 곡μ λ μ μ λ³μμ μμ‘΄ν΄μλ μλλ€.
- λ€μμ€νμ΄μ€λ₯Ό νμ©ν λΆλ¦¬
- κ° μλ λ¨μμ κ²©λ¦¬κ° λΆκ°λ₯ν κ²½μ°, λ€μ΄λ° 컨벀μ μ λ°λΌ prefix λ±μΌλ‘ λ€μμ€νμ΄μ€λ₯Ό νμ©νλ€.
- css, λ‘컬 μ€ν 리μ§, μ΄λ²€νΈ, μΏ ν€μ λ€μμ€νμ΄μ€λ₯Ό λΆμ¬νμ¬ μΆ©λμ λ°©μ§νκ³ λͺ νν λΆλ¦¬νλ€.
- ν΅μ μμ€ν
μ κΈ°λ³Έ λΈλΌμ°μ κΈ°λ₯ νμ©
- μλ λ¨μ κ°μ ν΅μ μ μν μμ€ν μ μ체 ꡬμΆνλ κ²λ³΄λ€, λΈλΌμ°μ μ΄λ²€νΈλ₯Ό μ¬μ©νλ€.
- λ§μ½ μ λ§λ‘ μλ λ¨μ κ° μ»€μ€ν APIκ° νμν κ²½μ°, κ°λ₯ν κ°λ¨νκ² μ μ§νλ€.
- νλ ₯μ μΈ μΉ λμμΈ κ΅¬μΆ
- JSμμ μλ¬κ° λκ±°λ μ€νν μ μλλΌλ, κΈ°λ₯μ μ¬μ© κ°λ₯ν΄μΌ νλ€.
- λ²μ© λ λλ§κ³Ό μ μ§μ ν₯μμ ν΅ν΄ μ±λ₯μ ν₯μμν¬ μ μλ€.
728x90