κ·Έλ¬λ, κ· μΌν μΈν°νμ΄μ€λ μ λ³΄κ° μ ν리μΌμ΄μ μ νΉμ μꡬμ λ§μΆ ννκ° μλλΌ νμ€νλ ννλ‘ μ μ‘λκΈ° λλ¬Έμ ν¨μ¨μ±μ μ νμν¨λ€. REST μΈν°νμ΄μ€λ λκ·λͺ¨ νμ΄νΌλ―Έλμ΄ λ°μ΄ν° μ μ‘μ ν¨μ¨μ μ΄λλ‘ μ€κ³λμ΄ μΉμ μΌλ°μ μΈ κ²½μ°μ μ΅μ νλμμ§λ§, λ€λ₯Έ ννμ μν€ν μ² μνΈμμ©μλ μ΅μ μ΄ μλ μΈν°νμ΄μ€λ₯Ό μ΄λνλ€.
-Roy Fielding, https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_5
μ°λ¦¬λ νμ΄νΌλ―Έλμ΄μ ν¬μ΄λ©°, νμ΄νΌλ―Έλμ΄κ° μ€λλ μΉ κ°λ° μΈκ³κ° μ§λ©΄ν λ§μ λ¬Έμ λ€μ ν΄κ²°ν μ μλ€κ³ μκ°ν©λλ€. μ μ΄λ μΌλΆλ ν΄κ²°ν μ μμ΅λλ€.
htmxμ κ·Έκ²μ΄ μ 곡νλ μΆκ°μ μΈ μ¬μ©μ κ²½ν(UX) κ°λ₯μ±μ ν΅ν΄, λ§μ νλμ μΈ μΉ μ ν리μΌμ΄μ μ΄ HTMLκ³Ό νμ΄νΌλ―Έλμ΄ ν¨λ¬λ€μμ μ¬μ©νμ¬ κ΅¬μΆλ μ μλ€κ³ λ―Ώμ΅λλ€.
κ·ΈλΌμλ λΆκ΅¬νκ³ , λͺ¨λ κΈ°μ μ νμλ νΈλ μ΄λμ€νκ° μ‘΄μ¬ν©λλ€. μ΄ κΈμμλ νμ΄νΌλ―Έλμ΄κ° μ¬λ¬λΆμ΄ κ΅¬μΆ μ€μΈ μ ν리μΌμ΄μ μ΄λ κΈ°λ₯μ μ ν©ν μ§μ λν΄ μκ°ν΄λ³Ό μ μλ λͺ κ°μ§ λ°©λ²μ μ μνκ² μ΅λλ€.
νμ΄νΌλ―Έλμ΄κ° μ’μ μ νμΈμ§μ λν μμΈν λ΄μ©μ μ΄ν΄λ³΄κΈ° μ μ, νμ΄νΌλ―Έλμ΄λ₯Ό μ±ννλ κ²μ΄ μΉ μ ν리μΌμ΄μ μ ꡬμΆν λ μ΄κ² μλλ©΄ μ κ² μμ κ²°μ μ΄ μλλΌλ μ μ λΆλͺ ν νκ³ μΆμ΅λλ€. κ²°κ΅, κ°μ₯ λ¨μΌν SPAμ‘°μ°¨λ μ ν리μΌμ΄μ μ μμνλ λΆνΈμ€νΈλ© λ©μ»€λμ¦μΌλ‘ νμ΄νΌλ―Έλμ΄λ₯Ό μ¬μ©ν©λλ€.
Have SPAs Ruined The Webμμ Rich Harrisλ νμ΄νΌλ―Έλμ΄μ λΉνμ΄νΌλ―Έλμ΄(SPA) κ°λ μ λͺ¨λ νΌν©ν μ ν리μΌμ΄μ μ βμ ννβ μ ν리μΌμ΄μ μ΄λΌλ μ©μ΄λ‘ μ€λͺ ν©λλ€. μ°λ¦¬λ κ·Έμ ν ν¬μ λν μμΈν λ°μμ μ¬κΈ°μμ μ 곡νμ΅λλ€, νμ§λ§ μ€μ©μ μΈ βμ ννβ μ κ·Ό λ°©μμ΄ μΉ κ°λ°μ κ°μ₯ μ’λ€λ κ²μ κ·Έμ μμ ν λμν©λλ€: μ¬λ¬λΆμ μμ μ€μΈ νΉμ μμ μ μ ν©ν λꡬλ₯Ό μ¬μ©ν΄μΌ ν©λλ€.
μ°λ¦¬κ° Rich Harrisμ μλ§λ μκ²¬μ΄ λ€λ₯Ό μ μλ λΆλΆμ νμ΄νΌλ―Έλμ΄λ‘ ν¨κ³Όμ μΌλ‘ ꡬνν μ μλ κΈ°λ₯κ³Ό λ μ κ΅ν ν΄λΌμ΄μΈνΈ μΈ‘ μ κ·Ό λ°©μμ νμλ‘ νλ κΈ°λ₯ μ¬μ΄μ βκ²½κ³μ βμ λλ€. μ°λ¦¬λ htmxλ₯Ό ν΅ν΄ νμ΄νΌλ―Έλμ΄κ° μ€λλ λ§μ μΉ κ°λ°μκ° λ―Ώλ κ²λ³΄λ€ ν¨μ¬ λ λ§μ κ²μ ν μ μλ€κ³ μκ°ν©λλ€. κ·Έλ¦¬κ³ λ§μ μ ν리μΌμ΄μ μ κ²½μ°, κ·Έκ²μ΄ λͺ¨λ UX μꡬ μ¬νμ ν΄κ²°ν μ μλ€κ³ μκ°ν©λλ€.
The Mother Of All htmx Demosμμ Contexteμ David Guillotμ Reactλ₯Ό htmxλ‘ λ체ν¨μΌλ‘μ¨ μ 체 μ½λλ² μ΄μ€κ° 67% κ°μνλ λ± μ¬λ¬ λλΌμ΄ κ²°κ³Όλ₯Ό μ»μλ€κ³ 보μ¬μ€λλ€.
μ°λ¦¬κ° λͺ¨λ νμ΄ Reactμμ htmxλ‘ μ ννλ©΄ μ΄λ¬ν κ²°κ³Όλ₯Ό κ²½νν κ²μ΄λΌκ³ μ£Όμ₯νκ³ μΆμ§λ§, μ¬μ€ Contexte μΉ μ ν리μΌμ΄μ μ νμ΄νΌλ―Έλμ΄ μ€νμΌμ λ§€μ° μ ν©ν©λλ€.
Contexteκ° νμ΄νΌλ―Έλμ΄μ μλ²½νκ² λ§λ μ΄μ λ λ―Έλμ΄ μ§ν₯ μΉ μ ν리μΌμ΄μ μΌλ‘μ, ν μ€νΈμ μ΄λ―Έμ§λ‘ ꡬμ±λ κΈ°μ¬λ₯Ό νμνμ¬ μ½μ μ μλλ‘ νλ κ²μ λλ€. μ΄ μ ν리μΌμ΄μ μ 볡μ‘ν νν°λ§ λ©μ»€λμ¦κ³Ό λ€λ₯Έ νΈμ κΈ°λ₯μ μ 곡νμ§λ§, μ ν리μΌμ΄μ μ ν΅μ¬μ κΈ°μ¬λ₯Ό νμνκ³ λΆλ₯νλ κ²μ λλ€. μ΄κ²μ΄ λ°λ‘ νμ΄νΌλ―Έλμ΄κ° μ€κ³λ λͺ©μ μ΄λ©°, htmxμ νμ΄νΌλ―Έλμ΄κ° κ·Έλ€μ μ ν리μΌμ΄μ μ μ λ§λ μ΄μ μ λλ€.
λ λ€λ₯Έ νμ΄νΌλ―Έλμ΄κ° μ€λ μ±κ³΅ κΈ°λ‘μ κ°μ§κ³ μλ μμμ CRUD κΈ°λ°μ μΉ μ ν리μΌμ΄μ , νΉν Ruby on Rails μ€νμΌμ λλ€. μ ν리μΌμ΄μ μ μ£Όμ λ©μ»€λμ¦μ΄ μμμ 보μ¬μ£Όκ³ ν΄λΉ μμμ λ°μ΄ν°λ² μ΄μ€μ μ μ₯νλ κ²μ΄λΌλ©΄, νμ΄νΌλ―Έλμ΄λ λ§€μ° μ μλν μ μμ΅λλ€.
κ·Έλ¦¬κ³ htmxλ₯Ό μ¬μ©νλ©΄ λ¨μν λͺ©λ‘ 보기/μμΈ λ³΄κΈ° μ κ·Ό λ°©μμ κ΅νλμ§ μκ³ λ§€μ° λΆλλ¬μ΄ μ¬μ©μ κ²½νμ μ 곡ν μ μμ΅λλ€.
νμ΄νΌλ―Έλμ΄κ° μ‘°κΈ λΆμμ ν΄μ§ μ μλ μμ μ€ νλλ νλ©΄μ ꡬ쑰μ μμμ κ±Έμ³ μλ UI μ’ μμ±μ΄ μμ λμ λλ€. μ΄μ κ΄λ ¨λ μ’μ μλ GitHubμ βIssuesβ νμμ 보μ¬μ§λ μ΄μ μμ λλ€. μ€λ«λμ GitHubμμ μ΄μλ₯Ό λ«μΌλ©΄ νμ μ΄μ μκ° μ λλ‘ μ λ°μ΄νΈλμ§ μμμ΅λλ€. μΌλ°μ μΌλ‘ GitHubλ (μμ νλ μλμ§λ§) νμ΄νΌλ―Έλμ΄ μ€νμΌμ μ ν리μΌμ΄μ μ μ¬μ©ν©λλ€.
βμν!β SPA μ νΈκ°λ μΈμΉλ©° λ§ν©λλ€, βGitHubμ‘°μ°¨λ μ΄κ²μ μ λλ‘ νμ§ λͺ»νκ³ μκ΅°μ!β
GitHubκ° μ΄ λ¬Έμ λ₯Ό μμ νμ§λ§, μ΄κ²μ νμ΄νΌλ―Έλμ΄ μ κ·Ό λ°©μμ λ¬Έμ λ₯Ό 보μ¬μ€λλ€: UIμ λΆλ¦¬λ λΆλΆμ μ΄λ»κ² κΉλνκ² μ λ°μ΄νΈν μ μμκΉμ? htmxλ μ΄ μμ μ μννκΈ° μν λͺ κ°μ§ κΈ°μ μ μ 곡νλ©°, Contexteλ κ·Έλ€μ λ°νμμ μ΄λ²€νΈ μ κ·Ό λ°©μμ μ¬μ©νμ¬ μ΄ μν©μ λ§€μ° κΉλνκ² μ²λ¦¬νλ λ°©λ²μ μ€λͺ ν©λλ€.
νμ§λ§, νμ΄νΌλ―Έλμ΄ μ κ·Ό λ°©μμ΄ λ¬Έμ κ° λ μ μλ μμμ΄λΌλ κ²μ μΈμ ν©μλ€. μ΄ λ¬Έμ λ₯Ό νΌνκΈ° μν μ μ¬μ μ λ΅μ μ ν리μΌμ΄μ νλ©΄μμ νΉμ 리μμ€μ λν μ’ μ μμλ₯Ό λμΌν μμ λλ ꡬμ λ΄μ λ°°μΉνλ κ²μ λλ€.
μλ₯Ό λ€μ΄, μ°λ½μ² μ ν리μΌμ΄μ μμ μ°λ½μ²λ₯Ό νμνκ³ νΈμ§νλ μΈλΆ νλ©΄μ΄ μλ€κ³ κ°μ ν΄ λ³΄κ² μ΅λλ€:
μ΄ UIλ λ€μκ³Ό κ°μ λ°©μμΌλ‘ λ μ΄μμλ μ μμ΅λλ€:
μ΄ μλ리μ€μμλ κ° νμ μΉμ μ μ체 νμ΄νΌλ―Έλμ΄ μλν¬μΈνΈλ₯Ό ν λΉν μ μμ΅λλ€:
/contacts/<id>/details
κΈ°λ³Έ μ 보(μ΄λ¦, μ± λ±)λ₯Ό μν μλν¬μΈνΈ/contacts/<id>/emails
μ΄λ©μΌ μΉμ
μ μν μλν¬μΈνΈ/contacts/<id>/phonenumbers
μ νλ²νΈ μΉμ
μ μν μλν¬μΈνΈμ¬κΈ°μ μ€μν μ μ μ΄λ©μΌκ³Ό μ νλ²νΈμ μκ° κ°κ°μ 컬λ μ κ³Ό ν¨κ» νλ©΄μ 곡쑴νλ€λ κ²μ λλ€. μ΄λ ν΄λΉ 컬λ μ μ΄ μμ λ λ κ·Έ νΉμ μμλ§ μ λ°μ΄νΈνλλ‘ λμ μ§μ ν μ μκ² ν΄μ€λλ€. λͺ¨λ λ°μ΄ν° μ’ μμ±μ λ¨μΌ μμ λ΄μ λ°°μΉλμ΄ λ¨μΌνκ³ λͺ νν νκ²μ ν΅ν΄ μ λ°μ΄νΈν μ μμΌλ©°, κ΅μ²΄λ λ μλ‘ κ°μνμ§ μμ΅λλ€.
κ° μμμ νλ©΄μ λ€λ₯Έ μμκ³Ό λ 립μ μΈ μλ² μΈ‘ κ΅¬μ± μμλ‘ μλνλ©°, λͺ¨λ λμ μ°λ½μ² μΈλΆ μ 보 UI λ΄μ μ€μ²©λμ΄ μμ΅λλ€.
μ΄ κ²½μ° μ°λ¦¬μ νμ΄νΌλ―Έλμ΄ API(μ¦, μλν¬μΈνΈ)λ UIμ μν΄ μ£Όλλ©λλ€: νΉμ UI λ μ΄μμμ λ¬μ±νκ³ μ νλ©°, μ°λ¦¬λ APIλ₯Ό κ·Έμ λ§κ² μ‘°μ ν©λλ€. UIκ° λ³κ²½λλ©΄, μ°λ¦¬λ μλ‘μ΄ μꡬ μ¬νμ μΆ©μ‘±μν€κΈ° μν΄ APIλ₯Ό μμ ν λ³κ²½νλ λ° μλ¬΄λ° κ±°λ¦¬λμ΄ μμ΅λλ€. μ΄κ²μ νμ΄νΌλ―Έλμ΄ κ°λ°μ λ νΉν μΈ‘λ©΄ μ€ νλμ΄λ©°, μ¬κΈ°μ λ μμΈν λ Όμν©λλ€.
λ¬Όλ‘ , μ’ μ μμλ₯Ό μ΄ λ°©μμΌλ‘ κ·Έλ£Ήνν μ μλ UI μꡬ μ¬νμ΄ μμ μ μμΌλ©°, μμμ μΈκΈν κΈ°μ μ΄ λ§μ‘±μ€λ½μ§ μλ€λ©΄, λμ μ κ·Ό λ°©μμ κ³ λ €ν λκ° λ μλ μμ΅λλ€.
νμ΄νΌλ―Έλμ΄κ° λ€λ₯Έ μ΅μ λ³΄λ€ λ°μ΄λ λ λ€λ₯Έ μμμ βλ₯ λ§ν¬βκ° νμν λ, μ¦ λλ© νμ΄μ§λ₯Ό λμ΄ μ ν리μΌμ΄μ λ΄λΆλ‘μ λ§ν¬κ° νμν λμ΄κ±°λ, νλ₯ν μ΄κΈ° λ λλ§ μ±λ₯μ΄ νμν λμ λλ€.
νμ΄νΌλ―Έλμ΄λ μΉμ μμ°μ€λ¬μ΄ μΈμ΄μ΄λ©°, λΈλΌμ°μ λ URLμ΄ μ£Όμ΄μ‘μ λ HTMLμ λ λλ§νλ λ° λ§€μ° λ₯μνκΈ° λλ¬Έμ, μ΄λ¬ν μ ν΅μ μΈ μΉ κΈ°λ₯μ μμ΄ μ΄ μ κ·Ό λ°©μμ μ΄κΈ°κΈ° μ΄λ ΅μ΅λλ€.
μμμ μΈκΈν βμ€μ²©λβ UI μΉμ μμ λ Όμνλ―μ΄, νμ΄νΌλ―Έλμ΄κ° μ΄λ €μμ κ²ͺμ μ μλ μμ μ€ νλλ UI μ λ°μ κ±Έμ³ λ§μ UI μ’ μμ±μ΄ μκ³ βμ 체 UIλ₯Ό μ λ°μ΄νΈν μ μλβ κ²½μ°μ λλ€. μ΄κ²μ μ΄ κΈμ 맨 μμμ Roy Fieldingμ΄ μΈκΈν λ΄μ©κ³Ό κ°μ΅λλ€: μΉμ λκ·λͺ¨ νμ΄νΌλ―Έλμ΄ λ°μ΄ν° μ μ‘μ μν΄ μ€κ³λμμΌλ©°, λ§μ μμ λ°μ΄ν° κ΅νμ μν΄ μ€κ³λ κ²μ΄ μλλλ€.
νΉν νμ΄νΌλ―Έλμ΄κ° μ²λ¦¬νκΈ° μ΄λ €μ΄ κ²μ μ΄λ¬ν μ’ μμ±μ΄ λμ μΌ λ, μ¦ μλ² μΈ‘ λ λλ§ μκ°μ κ²°μ ν μ μλ μ 보μ μμ‘΄νλ κ²½μ°μ λλ€. κ·Έ μ’μ μλ μ€νλ λμνΈμ κ°μ κ²μ λλ€: μ¬μ©μκ° μ μ μμμ ν¨μλ₯Ό μ λ ₯νκ³ νλ©΄μμ μ¬λ¬ μ’ μμ±μ λμ μΌλ‘ μμ±ν μ μμ΅λλ€.
(κ·Έλ¬λ, λ§μ μ ν리μΌμ΄μ μμ βνΈμ§ κ°λ₯ν νβ ν¨ν΄μ λ μΌλ°μ μΈ μ€νλ λμνΈμ κ°μ λμμ λν μμ© κ°λ₯ν λμμ΄λ©°, μ΄ ν¨ν΄μ νΈμ§μ μ νλ μμ λ΄μμ 격리νμ¬ νμ΄νΌλ―Έλμ΄μ μ μ°λλ©λλ€.)
νμ΄νΌλ―Έλμ΄ λΆμ° μν€ν μ²λ 리μμ€μ ννμ λ λλ§νκΈ° μν΄ μλ² μΈ‘μ ν¬κ² μμ‘΄ν©λλ€. λ°λΌμ μλ²κ° λ€μ΄λκ±°λ μ κ·Όν μ μλ κ²½μ°, μ΄ μν€ν μ²λ λΆλͺ ν λ¬Έμ κ° λ°μν κ²μ λλ€. μ€νλΌμΈ μμ²μ μ²λ¦¬νκΈ° μν΄ μλΉμ€ μ컀λ₯Ό μ¬μ©νλ κ²μ΄ κ°λ₯νμ§λ§(λ¬Όλ‘ μ΄ λ°©λ²μ 볡μ‘ν μ μμ΅λλ€), λ§μ λκΊΌμ΄ ν΄λΌμ΄μΈνΈ μ ν리μΌμ΄μ μ΄ κ·Έλ λ―μ΄ νμ΄νΌλ―Έλμ΄ μ ν리μΌμ΄μ μ΄ μ€νλΌμΈ μνμμ κ°μ§νκ³ μ€νλΌμΈ λ©μμ§λ₯Ό νμνλ κ²μ μ½μ΅λλ€.
κ·Έλ¬λ μ ν리μΌμ΄μ μ΄ μ€νλΌμΈ νκ²½μμ μμ ν κΈ°λ₯μ μ 곡ν΄μΌ νλ€λ©΄, νμ΄νΌλ―Έλμ΄ μ κ·Ό λ°©μμ μ ν©νμ§ μμ κ²μ λλ€.
νμ΄νΌλ―Έλμ΄κ° μ ν©νμ§ μμ λ λ€λ₯Έ μν©μ UI μνκ° μμ£Ό μ λ°μ΄νΈλλ κ²½μ°μ λλ€. μ’μ μλ λ§μ°μ€ μμ§μμ μΊ‘μ²ν΄μΌ νλ μ¨λΌμΈ κ²μμ λλ€. λ§μ°μ€ μμ§μκ³Ό UI μ λ°μ΄νΈ μ¬μ΄μ νμ΄νΌλ―Έλμ΄ λ€νΈμν¬ μμ²μ λ£λ κ²μ μ μλνμ§ μμΌλ©°, κ²μμ λν΄μλ ν΄λΌμ΄μΈνΈ μΈ‘ μν κ΄λ¦¬λ₯Ό μμ±νκ³ μλ²μλ λ€λ₯Έ κΈ°μ μ μ¬μ©νμ¬ λκΈ°ννλ κ²μ΄ ν¨μ¬ λ λμ κ²μ λλ€.
λ¬Όλ‘ , κ²μμλ μ€μ νμ΄μ§κ° μμ μ μμΌλ©°, μ΄ μ€μ νμ΄μ§λ κ²μμ ν΅μ¬μ μ¬μ©νλ μ루μ λ³΄λ€ νμ΄νΌλ―Έλμ΄λ‘ ꡬννλ κ²μ΄ λ λμ μ μμ΅λλ€. μ κ·Ό λ°©μμ νΌν©νμ¬ μ¬μ©νλ κ²μλ μλ¬΄λ° λ¬Έμ κ° μμ΅λλ€. βμ νβ μ€νμΌμμλ νΉν κ·Έλ μ΅λλ€!
κ·Έλ¬λ μΌλ°μ μΌλ‘ SPA μ»΄ν¬λνΈλ₯Ό λ ν° νμ΄νΌλ―Έλμ΄ μν€ν μ² λ΄μμ ν¬ν¨νλ κ²μ΄ κ·Έ λ°λλ³΄λ€ λ μ½λ€λ μ μ μ£Όλͺ©ν΄μΌ ν©λλ€. 격리λ ν΄λΌμ΄μΈνΈ μΈ‘ μ»΄ν¬λνΈλ μ΄λ²€νΈλ₯Ό ν΅ν΄ λ λμ νμ΄νΌλ―Έλμ΄ μ ν리μΌμ΄μ κ³Ό ν΅μ ν μ μμΌλ©°, λλκ·Έ μ€ λλ‘ Sortable.js + htmx μμ μμ κ·Έ λ°©λ²μ 보μ¬μ€λλ€.
νμ΄νΌλ―Έλμ΄λ₯Ό μ ννμ§ μλ λ§μ§λ§ μ΄μ λ κΈ°μ μ μΈ κ²μ΄λΌκΈ°λ³΄λ€λ μ¬νμ μΈ μ΄μ μ λλ€. νμ¬ μΉ κ°λ°μμλ νμ΄νΌλ―Έλμ΄κ° λ¨μν μΈκΈ°λ₯Ό λμ§ λͺ»νκ³ μμ΅λλ€. λ§μ νμ¬λ€μ΄ μΉ μ ν리μΌμ΄μ μ ꡬμΆνλ νμ€ λΌμ΄λΈλ¬λ¦¬λ‘ Reactλ₯Ό μ±ννμ΅λλ€. λ§μ κ°λ°μμ 컨μ€ν΄νΈλ€μ΄ μ΄μ λ°λΌ κ²½λ ₯μ μμκ³ , λ§μ μ±μ© λ΄λΉμλ€μ νμ΄νΌλ―Έλμ΄λ htmxμ λν΄ λ€μ΄λ³Έ μ λ μμΌλ©°, κ΄μ±μ μΌλ‘ λͺ¨λ μ±μ© κ³΅κ³ μ Reactλ₯Ό λ£μ΅λλ€. Reactλ μ±μ©μ΄ ν¨μ¬ μ½κΈ° λλ¬Έμ λλ€!
μ΄κ²μ μ’μ μ€λ¬μΈ μ μμ§λ§, νμ€μ μΈ νμμ΄λ©° κ²Έμνκ² λ°μλ€μ¬μΌ ν©λλ€. Contexteκ° htmxλ‘ μ ν리μΌμ΄μ μ λΉ λ₯΄κ³ ν¨κ³Όμ μΌλ‘ λ€μ μμ±ν μ μμμ§λ§, λͺ¨λ νμ΄ κ·Έλ κ² μκ³ λ―Όμ²©νλ©° μ΄μ μ μΈ κ²μ μλλ©°, λͺ¨λ μ ν리μΌμ΄μ μ΄ μ΄ μ κ·Ό λ°©μμ λν΄ κ·Έλ κ² μ½κ² νλ¨ν μ μλ κ²μ μλλλ€. λ¨Όμ λ΄λΆ λꡬλ₯Ό μν΄ νμ΄νΌλ―Έλμ΄λ₯Ό κ°μ₯μ리μμ λμ νμ¬ κ·Έ κ°μΉλ₯Ό μ μ¦ν ν, λ λμ κ΄μ μμ κ²ν νλ κ²μ΄ λ λμ μ μμ΅λλ€.
βμ΄λ€ μ’ λ₯μ μ ν리μΌμ΄μ μ htmxκ° μ ν©νμ§ μμκΉμ?βλΌλ μ§λ¬Έμ μμ£Ό λ°μ΅λλ€. μ°λ¦¬λ βμ νβ μ ν리μΌμ΄μ κ°λ μ μ¬μ©νμ¬ κΈ°λ₯λ³λ‘ μ κ·Όνλ κ²μ μ νΈνμ§λ§, νμ΄νΌλ―Έλμ΄ μ κ·Ό λ°©μμ΄ λ€λ₯Έ μ κ·Ό λ°©μλ³΄λ€ λ λμ μ μλμ§ μκ°ν λ λμμ΄ λλ λͺ κ°μ§ κ΄λ²μνκ³ μΈκΈ° μλ μ ν리μΌμ΄μ μ μΌλμ λλ κ²μ΄ μ μ©ν©λλ€.
νμ΄νΌλ―Έλμ΄λ‘ κΉλνκ² κ΅¬νλ μ μλ€κ³ μκ°λλ λ κ°μ§ μ λͺ ν μ ν리μΌμ΄μ μ μλ‘λ Twitterμ GMailμ΄ μμ΅λλ€. λ μΉ μ ν리μΌμ΄μ λͺ¨λ ν μ€νΈμ μ΄λ―Έμ§ μ€μ¬μ΄λ©°, λκ·λͺ¨μ μ λ°μ΄νΈκ° λ°μνκΈ° λλ¬Έμ νμ΄νΌλ―Έλμ΄ μ κ·Ό λ°©μμ λ§€μ° μ ν©ν κ²μ λλ€.
νμ΄νΌλ―Έλμ΄ μ κ·Ό λ°©μμ μ ν©νμ§ μμ λ κ°μ§ μ λͺ ν μΉ μ ν리μΌμ΄μ μλ‘λ Google Sheetsμ Google Mapsκ° μμ΅λλ€. Google Sheetsλ λ§μ μνλ₯Ό ν¬ν¨ν μ μμΌλ©°, μ¬λ¬ μ κ°μ μ’ μμ±μ΄ λ§μ λͺ¨λ μ μ λ°μ΄νΈμ μλ² μμ²μ λ°ννλ κ²μ μ€ν κ°λ₯νμ§ μμ΅λλ€. λ°λ©΄, Google Mapsλ λ§μ°μ€ μμ§μμ λΉ λ₯΄κ² λ°μν΄μΌ νλ©°, λͺ¨λ μμ§μλ§λ€ μλ² μ볡μ νμ©ν μ μμ΅λλ€. μ΄ λ μ ν리μΌμ΄μ μ νμ΄νΌλ―Έλμ΄κ° μ 곡ν μ μλ κ²λ³΄λ€ ν¨μ¬ λ μ κ΅ν ν΄λΌμ΄μΈνΈ μΈ‘ μ€μ μ΄ νμν©λλ€.
λ¬Όλ‘ , λλΆλΆμ μΉ μ ν리μΌμ΄μ μ μ΄λ¬ν μμ λ€λ³΄λ€ κ·λͺ¨μ 볡μ‘μ±μ΄ ν¨μ¬ μ μ΅λλ€. μ¬μ§μ΄ Google Sheetsλ Google Mapsμ‘°μ°¨λ νμ΄νΌλ―Έλμ΄ μ κ·Ό λ°©μμ΄ λ λμ μ μλ λΆλΆμ΄ μμ κ²μ λλ€: λ κ°λ¨νκ³ , λ λΉ λ₯΄κ³ , λ κΉ¨λνκ² κ΅¬νλ μ μμ΅λλ€.
νμ΄νΌλ―Έλμ΄λ₯Ό λꡬ μμμ μΆκ°νλ κ²μ μΉ κ°λ°μλ‘μ μμ§λμ΄λ§ λ¬Έμ λ₯Ό ν΄κ²°ν μ μλ λ₯λ ₯μ ν₯μμν¬ κ²μ λλ€. κ·Έκ²μ΄ μ¬λ¬λΆμ κ°μ₯ μ νΈνλ λκ΅¬κ° λμ§ μλλΌλ λ§μ λλ€. μ΄ μ κ·Ό λ°©μμλ μ’μ μ΄λ‘ μ κ·Όκ±°κ° μμΌλ©°, λ§μ μ ν리μΌμ΄μ μμ μ€μ§μ μΈ μ΄μ μ΄ μμΌλ©°, λ€λ₯Έ μ κ·Ό λ°©μκ³Ό λ¬λ¦¬ μΉμ νλ¦μ λ§λ λ°©μμ λλ€.