Examples

#μ„œλ²„ μ‚¬μ΄λ“œ 톡합 예제

μ„œλ²„ μ‚¬μ΄λ“œ μ–Έμ–΄ 및 ν”Œλž«νΌκ³Όμ˜ 톡합 예제λ₯Ό λ³΄μ—¬μ£ΌλŠ” GitHub μ €μž₯μ†Œ λͺ©λ‘μœΌλ‘œ, JavaScript, Python, Java λ“± λ‹€μ–‘ν•œ 언어와 ν”Œλž«νΌμ΄ ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

#UI 예제

μ•„λž˜λŠ” μ΅œμ†Œν•œμ˜ HTML 및 μŠ€νƒ€μΌλ§μœΌλ‘œ htmxμ—μ„œ κ΅¬ν˜„λœ UX νŒ¨ν„΄λ“€μž…λ‹ˆλ‹€.

이 νŒ¨ν„΄λ“€μ„ λ³΅μ‚¬ν•˜μ—¬ 뢙여넣은 ν›„ ν•„μš”μ— 맞게 μ‘°μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

νŒ¨ν„΄μ„€λͺ…
ν΄λ¦­ν•˜μ—¬ νŽΈμ§‘ν•˜κΈ°λ°μ΄ν„° 객체의 인라인 νŽΈμ§‘μ„ μ‹œμ—°ν•©λ‹ˆλ‹€.
일괄 μ—…λ°μ΄νŠΈμ—¬λŸ¬ 데이터 행을 일괄 μ—…λ°μ΄νŠΈν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
ν΄λ¦­ν•˜μ—¬ λ‘œλ“œν•˜κΈ°ν…Œμ΄λΈ”μ—μ„œ 더 λ§Žμ€ 행을 λ‘œλ“œν•˜κΈ° μœ„ν•΄ ν΄λ¦­ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
ν–‰ μ‚­μ œν…Œμ΄λΈ”μ—μ„œ 행을 μ‚­μ œν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
ν–‰ νŽΈμ§‘ν…Œμ΄λΈ”μ—μ„œ 행을 νŽΈμ§‘ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
지연 λ‘œλ”©μ½˜ν…μΈ λ₯Ό 지연 λ‘œλ“œν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
인라인 μœ νš¨μ„± κ²€μ‚¬ν•„λ“œμ˜ 인라인 μœ νš¨μ„± 검사λ₯Ό μˆ˜ν–‰ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
λ¬΄ν•œ μŠ€ν¬λ‘€νŽ˜μ΄μ§€μ˜ λ¬΄ν•œ μŠ€ν¬λ‘€μ„ μ‹œμ—°ν•©λ‹ˆλ‹€.
μ‹€μ‹œκ°„ κ²€μƒ‰μ‹€μ‹œκ°„ 검색 μƒμž νŒ¨ν„΄μ„ μ‹œμ—°ν•©λ‹ˆλ‹€.
진행 ν‘œμ‹œμ€„μž‘μ—… μ‹€ν–‰κ³Ό 같은 진행 ν‘œμ‹œμ€„μ„ μ‹œμ—°ν•©λ‹ˆλ‹€.
κ°’ 선택닀λ₯Έ 선택 ν•­λͺ©μ— 따라 선택 ν•­λͺ©μ˜ 값을 μ„€μ •ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
μ• λ‹ˆλ©”μ΄μ…˜λ‹€μ–‘ν•œ μ• λ‹ˆλ©”μ΄μ…˜ 기법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
파일 μ—…λ‘œλ“œμ§„ν–‰ ν‘œμ‹œμ€„κ³Ό ν•¨κ»˜ Ajaxλ₯Ό 톡해 νŒŒμΌμ„ μ—…λ‘œλ“œν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
폼 였λ₯˜ ν›„ 파일 μž…λ ₯ μœ μ§€νΌ 였λ₯˜ ν›„ 파일 μž…λ ₯을 μœ μ§€ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
λŒ€ν™” μƒμž - λΈŒλΌμš°μ €ν”„λ‘¬ν”„νŠΈ 및 확인 λŒ€ν™” μƒμžλ₯Ό μ‹œμ—°ν•©λ‹ˆλ‹€.
λŒ€ν™” μƒμž - UIKitUIKit을 μ‚¬μš©ν•œ λͺ¨λ‹¬ λŒ€ν™” μƒμžλ₯Ό μ‹œμ—°ν•©λ‹ˆλ‹€.
λŒ€ν™” μƒμž - λΆ€νŠΈμŠ€νŠΈλž©λΆ€νŠΈμŠ€νŠΈλž©μ„ μ‚¬μš©ν•œ λͺ¨λ‹¬ λŒ€ν™” μƒμžλ₯Ό μ‹œμ—°ν•©λ‹ˆλ‹€.
λŒ€ν™” μƒμž - μ»€μŠ€ν…€μ»€μŠ€ν…€ λͺ¨λ‹¬ λŒ€ν™” μƒμžλ₯Ό μ²˜μŒλΆ€ν„° μ‹œμ—°ν•©λ‹ˆλ‹€.
νƒ­ (HATEOAS μ‚¬μš©)HATEOAS 원칙을 μ‚¬μš©ν•˜μ—¬ 탭을 ν‘œμ‹œν•˜κ³  μ„ νƒν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
νƒ­ (JavaScript μ‚¬μš©)JavaScriptλ₯Ό μ‚¬μš©ν•˜μ—¬ 탭을 ν‘œμ‹œν•˜κ³  μ„ νƒν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
ν‚€λ³΄λ“œ 단좕킀htmxκ°€ ν™œμ„±ν™”λœ μš”μ†Œμ— λŒ€ν•΄ ν‚€λ³΄λ“œ 단좕킀λ₯Ό μƒμ„±ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
λ“œλž˜κ·Έ μ•€ λ“œλ‘­ / μ •λ ¬ κ°€λŠ₯htmxλ₯Ό Sortable.js ν”ŒλŸ¬κ·ΈμΈκ³Ό ν•¨κ»˜ μ‚¬μš©ν•˜μ—¬ λ“œλž˜κ·Έ μ•€ λ“œλ‘­ μž¬μ •λ ¬μ„ κ΅¬ν˜„ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
λ‹€λ₯Έ μ½˜ν…μΈ  μ—…λ°μ΄νŠΈν•˜κΈ°λŒ€μƒ μš”μ†Œ μ™Έμ˜ μ½˜ν…μΈ λ₯Ό μ—…λ°μ΄νŠΈν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
확인 μ•Œλ¦Όhtmx둜 μ»€μŠ€ν…€ 확인 λŒ€ν™” μƒμžλ₯Ό κ΅¬ν˜„ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
비동기 인증htmxμ—μ„œ 비동기 인증 토큰을 μ²˜λ¦¬ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.
μ›Ή μ»΄ν¬λ„ŒνŠΈμ›Ή μ»΄ν¬λ„ŒνŠΈ 및 μ‰λ„μš° DOMκ³Ό htmxλ₯Ό ν†΅ν•©ν•˜λŠ” 방법을 μ‹œμ—°ν•©λ‹ˆλ‹€.

#Migrating from Hotwire / Turbo ?

For common practices see the Hotwire / Turbo to htmx Migration Guide.