Haml: ν–„ 5.2 및 6

에 λ§Œλ“  2020λ…„ 10μ›” 02일  Β·  6μ½”λ©˜νŠΈ  Β·  좜처: haml/haml

이 λ¦΄λ¦¬μŠ€λŠ” μ§€λ‚œ 10λ…„ λ™μ•ˆ Haml의 λͺ¨λ“  μ’…μ†Œλ¦¬μ™€ νœ˜νŒŒλžŒμ„ 담은 μ΅œμ’… λ¦΄λ¦¬μŠ€μž…λ‹ˆλ‹€. μ•žμœΌλ‘œ μƒˆ λ¦΄λ¦¬μŠ€λŠ” 6.xx μ‹œλ¦¬μ¦ˆμ— 포함될 것이며 λ§Žμ€ κΈ°λŠ₯에 λŒ€ν•΄ 이전 버전과 ν˜Έν™˜λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

그것이 μ‹€μ œλ‘œ 무엇을 μ˜λ―Έν•˜λŠ”μ§€ μ•Œκ³  μ‹Άμ—ˆμ§€λ§Œ 이것을 λ…Όμ˜ν•œ 곳을 찾을 수 μ—†μ—ˆμŠ΅λ‹ˆλ‹€. haml μ›Ήμ‚¬μ΄νŠΈλ₯Ό 보면 메일링 λ¦¬μŠ€νŠΈκ°€ 3λ…„ 이상 μ‚¬μš©λ˜μ§€ μ•Šμ•˜κ³  λΈ”λ‘œκ·ΈλŠ” haml 4 μ΄ν›„λ‘œ μ—…λ°μ΄νŠΈλ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

μ €λŠ” μƒˆλ‘œμš΄ ν”„λ‘œμ νŠΈλ₯Ό μ‹œμž‘ν•˜κ³  μžˆλŠ”λ° "haml의 λ‹€μŒ λ²„μ „μ—λŠ” ν˜„μž¬ 가지고 μžˆλŠ” λͺ¨λ“  κΈ°λŠ₯이 없을 κ²ƒμž…λ‹ˆλ‹€." 그것이 μ˜λ―Έν•˜λŠ” 바에 λŒ€ν•œ μ–ΈκΈ‰ 없이 λ¬΄μ„­μŠ΅λ‹ˆλ‹€.

Feature

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

λ„€, μ§€κΈˆμ€ κ½€ 죽은 ν”„λ‘œμ νŠΈλ₯Ό μ†”λ‘œλ‘œ λ˜μ‚΄λ¦¬λ €κ³  ν•˜κ³  μžˆμ–΄μš”. ν† λ‘  μ˜μ—­μ„ μ‹€μ œλ‘œ μ„€μ •ν•œ 적이 μ—†μœΌλ©° ν™•μ‹€νžˆ 기꺼이 ν•  κ²ƒμž…λ‹ˆλ‹€. 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+만 μ§€μ›ν•œλ‹€λ©΄ μš°λ¦¬κ°€ ν•˜κ³  μžˆλŠ” 일을 크게 λ‹¨μˆœν™”ν•  수 μžˆλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€.

μ†”μ§νžˆ μ§€μ›ν•˜μ§€ μ•Šμ„ κ³„νšμ€ μ—†μ§€λ§Œ μ—¬λŸ¬ μ€„λ‘œ μ§€μ›ν•˜λŠ” 것이 거의 λΆˆκ°€λŠ₯ν•œ 더 λ§Žμ€ κ²½μš°μ— μ§λ©΄ν•˜κ²Œ 될 것 같은 λŠλ‚Œμ΄ λ“­λ‹ˆλ‹€. 톡사둠.

그리고 λΆ„λͺ…νžˆ λ§ν•΄μ„œ , ν•˜κΈ° λ•Œλ¬Έμ— μ΄λŸ¬ν•œ 변경을 ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  6 λŒ“κΈ€

λ„€, μ§€κΈˆμ€ κ½€ 죽은 ν”„λ‘œμ νŠΈλ₯Ό μ†”λ‘œλ‘œ λ˜μ‚΄λ¦¬λ €κ³  ν•˜κ³  μžˆμ–΄μš”. ν† λ‘  μ˜μ—­μ„ μ‹€μ œλ‘œ μ„€μ •ν•œ 적이 μ—†μœΌλ©° ν™•μ‹€νžˆ 기꺼이 ν•  κ²ƒμž…λ‹ˆλ‹€. 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κ³Ό 잘 짝을 μ΄λ£Ήλ‹ˆλ‹€. μš°λ¦¬κ°€ 무엇이든 ν•  수 있으면 μ•Œλ €μ£Όμ‹­μ‹œμ˜€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰