μ΄ λ¦΄λ¦¬μ€λ μ§λ 10λ λμ Hamlμ λͺ¨λ μ’ μ리μ ννλμ λ΄μ μ΅μ’ 릴리μ€μ λλ€. μμΌλ‘ μ 릴리μ€λ 6.xx μ리μ¦μ ν¬ν¨λ κ²μ΄λ©° λ§μ κΈ°λ₯μ λν΄ μ΄μ λ²μ κ³Ό νΈνλμ§ μμ΅λλ€.
κ·Έκ²μ΄ μ€μ λ‘ λ¬΄μμ μλ―Ένλμ§ μκ³ μΆμμ§λ§ μ΄κ²μ λ Όμν κ³³μ μ°Ύμ μ μμμ΅λλ€. haml μΉμ¬μ΄νΈλ₯Ό 보면 λ©μΌλ§ 리μ€νΈκ° 3λ μ΄μ μ¬μ©λμ§ μμκ³ λΈλ‘κ·Έλ haml 4 μ΄νλ‘ μ λ°μ΄νΈλμ§ μμμ΅λλ€.
μ λ μλ‘μ΄ νλ‘μ νΈλ₯Ό μμνκ³ μλλ° "hamlμ λ€μ λ²μ μλ νμ¬ κ°μ§κ³ μλ λͺ¨λ κΈ°λ₯μ΄ μμ κ²μ λλ€." κ·Έκ²μ΄ μλ―Ένλ λ°μ λν μΈκΈ μμ΄ λ¬΄μμ΅λλ€.
λ€, μ§κΈμ κ½€ μ£½μ νλ‘μ νΈλ₯Ό μλ‘λ‘ λμ΄λ¦¬λ €κ³ νκ³ μμ΄μ. ν λ‘ μμμ μ€μ λ‘ μ€μ ν μ μ΄ μμΌλ©° νμ€ν κΈ°κΊΌμ΄ ν κ²μ λλ€. Google κ·Έλ£Ήμ νμ€ν μ€λ μ μ μ¬λΌμ‘μ΅λλ€.
λλ μ°λ¦¬κ° HAML-6μ μΆκ° ν μκ³ μ¬λ¬ κ°μ§κ° μμ΅λλ€.
1) μμ±μ λν μ¬λ¬ μ€ μ§μ. data-*
μμ±μ μ¬κΈ°μ μλ κ²μ²λΌ 보μ΄λ©° νλμ νκ·Έμ λν΄ λ§€μ° κΈ΄ ν μ€μ Hamlμ λ§λλ κ²μ λ§€μ° μ½μ΅λλ€.
2) μ λμ½λ λ¬Έμ μ§μ
μν©μ΄ μ°λ¦¬κ° μΆκ° ν μ μμ΅λλ€ :
1) μ§μκ³Ό μμ± -
μ²λΌμ %div{data-value: 6}
μλͺ»λ λ£¨λΉ ν΄μμ΄λ€, κ·Έλ¬λ μ HAMLμμ μ§μ λΉμ΄ λ¨Ήκ²νλ€. κ·Έλ¦¬κ³ μ΄κ²μ "μ΄μ λ²μ κ³Ό νΈν"λμ§ μλ μ’μ μμ
λλ€... Rubyλ ν€λΌκ³ κ°μ νλ λμ data.-(value)
λ₯Ό νΈμΆνλ €κ³ νλ€κ³ μκ°ν κ²μ
λλ€. λκ΅°κ°κ° μμ μ μ½λμ κ·Έκ²μ κ°μ§κ³ μλ€λ κ²μ _κ°λ₯ν©λλ€_... μ λ μ λͺ¨λ₯΄κ² μ΅λλ€. μλλ©΄ λ€λ₯Έ λ°©ν₯μΌλ‘ κ°μ "JSON-like only"λΌκ³ λ§νκ³ λͺ¨λ κ²μ λν΄ λ°μ΄νλ₯Ό μꡬν΄μΌ ν©λλ€.
2) %
λμμ
λλ€. μλ λ―Έκ΅ ν€λ³΄λμμ μκ°λ½μμ κ°μ₯ λ©λ¦¬ λ¨μ΄μ§ λ¬Έμλ‘ μ νλμκΈ° λλ¬Έμ λλ₯΄κΈ° μν΄ μμ λ»μ΄μΌ ν©λλ€. κ·Έκ²μ ν΄λμ€μ IDμ μ¬μ©μ μ₯λ €νλ λΆλΆμ΄μμ§λ§ μ΄ μ νμ μ§λκ° μ§ μ€λμ
λλ€. λ°λΌμ HTML5 μμλ₯Ό μ΅μ νλ κ²μ΄ μ λ§ κ³΅μ νκ°μ?
λν μ½λλ² μ΄μ€μ μ½ μ λ°μ΄ μλ
μ κ±Έμ³ λ§μ΄ λ³κ²½λ Action View
ν΅ν© ν¬μΈνΈλ₯Ό μ²λ¦¬νκ³ μμΌλ―λ‘ ν΄λΉ ν΅ν©μ μλνκ³ μ§μνκΈ° μν μλ§μ μ½λκ° μμ΅λλ€. μΈμ΄ 리ν¬μ§ν 리μ λ¨μΌ ν΅ν©μ λν΄ λ무 λ§μ μ½λκ° μλ€λ κ²μ λ§μ΄ λμ§ μλλ€κ³ μκ°ν©λλ€. μ _μ€νΌλμΈ_μ μ°λ¦¬κ° Rails 6+λ§ μ§μνλ€λ©΄ μ°λ¦¬κ° νκ³ μλ μΌμ ν¬κ² λ¨μνν μ μλ€λ κ²μ
λλ€.
μμ§ν μ§μνμ§ μμ κ³νμ μμ§λ§ μ¬λ¬ μ€λ‘ μ§μνλ κ²μ΄ κ±°μ λΆκ°λ₯ν λ λ§μ κ²½μ°μ μ§λ©΄νκ² λ κ² κ°μ λλμ΄ λλλ€. ν΅μ¬λ‘ .
κ·Έλ¦¬κ³ λΆλͺ ν λ§ν΄μ , νκΈ° λλ¬Έμ μ΄λ¬ν λ³κ²½μ νκ³ μμ΅λλ€.
haml-spec
μ λν΄ μ‘°κΈ λ μΆκ°νλ©΄ λ©λλ€. Haml-specμ μλ§μ μΈμ΄λ‘ Hamlμ λ§μ μμ ꡬνμ μλνκ³ ν΅ν©νλ €λ νμμ μΈ μμ§μμ΄μμ΅λλ€. λ£¨λΉ μ€μ¬μ΄ μλ λ§ν¬μ
μ λν Lua, Python λ° Perl ꡬνμ μ±λ¬Έννμ΅λλ€.
κ·Έλ¬λ μ΄κ²μ λ¨μ μ Perl/Lua ꡬνμ΄ ν¬κΈ°λκ³ Pythonμ΄ ~2λ λ§λ€ μμ νΈνμ± μ λ°μ΄νΈλ₯Ό λ°λλ€λ κ²μ λλ€.
μ΄κ²μ μΈμ΄ μμ²΄κ° λΆμ°λ νμ+ν΅μμ¬κ° μΌμ’ μ νμ€νλ₯Ό κ°λλ‘ νλ €λ μλμμ 골νλμμμ μλ―Έν©λλ€.
λ΄κ° μλ Hamlμ λμμΈνμ λ λμμΈ λͺ©ν μ€ νλλ "Rubyμ κ°μ" κ²μΌλ‘ λ§λ€κ³ Ruby, CSS λ° Semantic HTML μ¬μ΄μ 곡κ°μ κΈ°λ³Έμ μΌλ‘ μμνλλ‘ νλ κ²μ΄μμ΅λλ€. λλ μ΄ μΈμ΄λ₯Ό Markdownμ΄λ λ€λ₯Έ λ¨μνκ³ μ΄μμ±μ΄ λμ λ§ν¬μ
μΈμ΄μ λν κ²½μμλ‘ μκ°νμ§ μμμ΅λλ€. κ·Έλ¬λ haml-spec
μ κ°μ λ
Έλ ₯μλ μΈμ΄λ‘μμ Hamlμ΄ μ΄μμ±μ΄ λλ€λ κΈ°λ³Έ κ°μ μ΄ μμ΅λλ€.
-
λλ =
μ "μ΄κ²μ νμ§ μΈμ΄λ‘ ν΄μ"μ μλ―Ένλ μ½ν
μΈ λ₯Ό λ§λ κ²μ νννμ§ μμ΅λλ€
μ μ μλ―μ΄ μ΄κ²μ μμ§ κ³νμ μλμ§λ§ 2021λ μ΄μ λμ Hamlμ λͺ¨μ΅μ λμ°ΎκΈ° μν΄ μ΅μ μ λ€ν μ μλ λ°©λ²μ λν΄ λ§μ κ²μ κ³ λ €νκ³ μμ΅λλ€.
λλΆμ λ λ§μ λ§₯λ½μ μ μ μμ΅λλ€.
λΉμ μ λ Έλ ₯μ κ°μ¬λ립λλ€.
μμΈν λ΄μ©μ Haml 6μ λν μμ΄λμ΄κ° ν¬ν¨λ νμ¬ Gistμ λλ€.
https://gist.github.com/hcatlin/6c5d24d27897b9fa0888a012b612e824
μ°Έκ³ λ‘... μμ±μ μλ₯΄λ κΈ°λ₯κ³Ό &λ₯Ό μ¬μ©νμ¬ BEM μ€νμΌμ μμ μ΄νλλ₯Ό λ§λλ... μνμμ &__primary
λ .content-area__primary
λ‘ λ°λλλ€.
λλ λν μλ‘μ΄ μμμμ HAMLμ μ¬μ©νκ³ μμΌλ©° μ¬μ ν Rails μ±μ νλ₯ν λλ°μμμ μκ² λμμ΅λλ€. μ°λ¦¬λ μ νΈλ¦¬ν° κΈ°λ° CSS(Tailwind)λ₯Ό μ¬μ©νλ©° μλΉν μμ ν΄λμ€ μ΄λ¦κ³Ό μ€μ²©μ΄ μκΈ° λλ¬Έμ HAMLκ³Ό μ μ§μ μ΄λ£Ήλλ€. μ°λ¦¬κ° 무μμ΄λ ν μ μμΌλ©΄ μλ €μ£Όμμμ€.
κ°μ₯ μ μ©ν λκΈ
λ€, μ§κΈμ κ½€ μ£½μ νλ‘μ νΈλ₯Ό μλ‘λ‘ λμ΄λ¦¬λ €κ³ νκ³ μμ΄μ. ν λ‘ μμμ μ€μ λ‘ μ€μ ν μ μ΄ μμΌλ©° νμ€ν κΈ°κΊΌμ΄ ν κ²μ λλ€. Google κ·Έλ£Ήμ νμ€ν μ€λ μ μ μ¬λΌμ‘μ΅λλ€.
λλ μ°λ¦¬κ° HAML-6μ μΆκ° ν μκ³ μ¬λ¬ κ°μ§κ° μμ΅λλ€.
1) μμ±μ λν μ¬λ¬ μ€ μ§μ.
data-*
μμ±μ μ¬κΈ°μ μλ κ²μ²λΌ 보μ΄λ©° νλμ νκ·Έμ λν΄ λ§€μ° κΈ΄ ν μ€μ Hamlμ λ§λλ κ²μ λ§€μ° μ½μ΅λλ€.2) μ λμ½λ λ¬Έμ μ§μ
μν©μ΄ μ°λ¦¬κ° μΆκ° ν μ μμ΅λλ€ :
1) μ§μκ³Ό μμ±
-
μ²λΌμ%div{data-value: 6}
μλͺ»λ λ£¨λΉ ν΄μμ΄λ€, κ·Έλ¬λ μ HAMLμμ μ§μ λΉμ΄ λ¨Ήκ²νλ€. κ·Έλ¦¬κ³ μ΄κ²μ "μ΄μ λ²μ κ³Ό νΈν"λμ§ μλ μ’μ μμ λλ€... Rubyλ ν€λΌκ³ κ°μ νλ λμdata.-(value)
λ₯Ό νΈμΆνλ €κ³ νλ€κ³ μκ°ν κ²μ λλ€. λκ΅°κ°κ° μμ μ μ½λμ κ·Έκ²μ κ°μ§κ³ μλ€λ κ²μ _κ°λ₯ν©λλ€_... μ λ μ λͺ¨λ₯΄κ² μ΅λλ€. μλλ©΄ λ€λ₯Έ λ°©ν₯μΌλ‘ κ°μ "JSON-like only"λΌκ³ λ§νκ³ λͺ¨λ κ²μ λν΄ λ°μ΄νλ₯Ό μꡬν΄μΌ ν©λλ€.2)
%
λμμ λλ€. μλ λ―Έκ΅ ν€λ³΄λμμ μκ°λ½μμ κ°μ₯ λ©λ¦¬ λ¨μ΄μ§ λ¬Έμλ‘ μ νλμκΈ° λλ¬Έμ λλ₯΄κΈ° μν΄ μμ λ»μ΄μΌ ν©λλ€. κ·Έκ²μ ν΄λμ€μ IDμ μ¬μ©μ μ₯λ €νλ λΆλΆμ΄μμ§λ§ μ΄ μ νμ μ§λκ° μ§ μ€λμ λλ€. λ°λΌμ HTML5 μμλ₯Ό μ΅μ νλ κ²μ΄ μ λ§ κ³΅μ νκ°μ?λν μ½λλ² μ΄μ€μ μ½ μ λ°μ΄ μλ μ κ±Έμ³ λ§μ΄ λ³κ²½λ
Action View
ν΅ν© ν¬μΈνΈλ₯Ό μ²λ¦¬νκ³ μμΌλ―λ‘ ν΄λΉ ν΅ν©μ μλνκ³ μ§μνκΈ° μν μλ§μ μ½λκ° μμ΅λλ€. μΈμ΄ 리ν¬μ§ν 리μ λ¨μΌ ν΅ν©μ λν΄ λ무 λ§μ μ½λκ° μλ€λ κ²μ λ§μ΄ λμ§ μλλ€κ³ μκ°ν©λλ€. μ _μ€νΌλμΈ_μ μ°λ¦¬κ° Rails 6+λ§ μ§μνλ€λ©΄ μ°λ¦¬κ° νκ³ μλ μΌμ ν¬κ² λ¨μνν μ μλ€λ κ²μ λλ€.μμ§ν μ§μνμ§ μμ κ³νμ μμ§λ§ μ¬λ¬ μ€λ‘ μ§μνλ κ²μ΄ κ±°μ λΆκ°λ₯ν λ λ§μ κ²½μ°μ μ§λ©΄νκ² λ κ² κ°μ λλμ΄ λλλ€. ν΅μ¬λ‘ .
κ·Έλ¦¬κ³ λΆλͺ ν λ§ν΄μ , νκΈ° λλ¬Έμ μ΄λ¬ν λ³κ²½μ νκ³ μμ΅λλ€.