νμ¬ Historyλ pushState
{}
μν κ°μ²΄κ° λΉμ΄ μλ pushState
λ₯Ό νΈμΆν©λλ€. νΈμΆμκ° μν κ°μ²΄λ₯Ό μ€μ ν μ μλλ‘ νλ κ²μ΄ μ€μν©λλ€. κ°λ₯ν κ²½μ° μ΅μν window.history.state
λ₯Ό μ¬μ©νλ κ²μ΄ ν©λ¦¬μ μΈ κΈ°λ³Έκ°μ
λλ€. History.navigate
λ stateObject
λ₯Ό μΆκ° 맀κ°λ³μλ‘ μ¬μ©ν΄μΌ ν©λλ€.
λμνμ§ μμ μ μμ§λ§ κ·Έλ μ§ μμ κ²½μ°μλ μ λ₯Ό μ€λν΄ λ³΄μμμ€.
History APIμ μμ μ λ€μ νμν μ μλ μ± κ°νΌ λ° κ³΅μ κ°λ₯ν URLμ μ 곡νλ κ²μ λλ€. APIλ₯Ό μ¬μ©νμ¬ κΈ°λ‘ κ°μ²΄λ₯Ό 첨λΆνλ©΄ λ€μ νμνλ νμ΄μ§κ° λμΌν URLμ λΆμ¬λ£μ κ²½μ° νμλλ νμ΄μ§μ _μλλ€_. μ΄κ²μ κΉ¨μ§ κ² κ°μ΅λλ€ ... κ·Έλ¦¬κ³ μ΅μν λΈλΌμ°μ μΈμ μ€μ JSμ μμμ μνλ₯Ό μ μ₯ν μ μλ κΈ°λ₯κ³Ό μ€λ³΅λ©λλ€.
κ·Έκ²μ λΈλΌμ°μ ꡬνμκ° "μ΄λ°, ν μ μλ€λ©΄ κΉλνμ§ μμκΉμ..."λΌκ³ μκ°νκ³ μ€μ κ²°κ³Όλ₯Ό κ³ λ €νμ§ μμ APIμ κ°μ λμκ° λ©λλ€.
λλ λΉμ μ΄ λ°λμ§ν μ± λμκ³Ό λΈλΌμ°μ APIκ° μ 곡νλ κ²λ³΄λ€ λ μ νμ μΈ κΈ°λ‘ μ΄λ²€νΈμ μΈλΆμ±μ λν΄ κ°μ νκ³ μλ€κ³ μκ°ν©λλ€. νΉν URIλ‘ νΈμΆλ λ λμμ μ§μνλ μ±μ΄ μλλΌ νλ μμν¬μ λ¬λ € μμ΄μΌ ν μ΄μ κ° μμ΅λλ€. URIλ‘ μλ³λλ 리μμ€(λ° μΈμ½λ©λ μν)μ μ§κ΅νλ μν(νμ κ²½λ‘μ μν΄ μ 곡λ¨)κ° μκ³ νλ μ ν μ΄μ μ΄ λ λͺ¨λμ λν΄ μ‘°κ±΄μ§μ΄μ§ κ²μ΄ μλ²½νκ³ λͺ λ°±νκ² ν©λ²μ μΈ κ² κ°μ΅λλ€. λΆλͺ ν κ·Έ μ νμ κ°λ³ μ±μ λ¬λ € μμ΅λλ€.
κ·Έ μΆμμ μΈ μ£Όμ₯μ μ μΈνκ³ , μλ₯Ό λ€μ΄ History APIλ₯Ό μ¬μ©νμ¬ (λ€λ‘ λ²νΌ ν¬ν¨) νμν λ λ³κ²½ μ¬νμ μ μ₯/μμ νλλ‘ μ μνλ μ± κ°νΌ κ°λ₯ν μ λ ₯ μμμ ꡬννλ λ°©λ²μ μλ €μ£Όμμμ€.
μ΄κ²μ νλ μ€μ λ³κ²½ μ¬νμ
λλ€. History.navigate
맀κ°λ³μλ₯Ό μΆκ°νμ§ μμΌλ €λ©΄ currentState
μμ±μ΄λ ν¨μλ₯Ό ν΅ν΄ μ£Όμ΄μ§ μνλ₯Ό μ¬μ©νλλ‘ λ§λ€ μλ μμ΅λλ€.
μλ₯Ό λ€μ΄ μ± κ°νΌ κ°λ₯ν μ λ ₯ μμμ ꡬννλ λ°©λ²μ μλ €μ£Όμμμ€.
(
λ€λ‘ λ²νΌμΌλ‘) History APIλ₯Ό μ¬μ©νμκ² μ΅λκΉ?
λλ λ¨μν μμ λ³κ²½ μ¬νμ λ€λ₯Έ μμ ν μ₯μμ μ μ₯ν κ²μ λλ€. μΈμ , μλ², localstorage...
μ¬λλ€μ΄ μ΄ μ§μ± μ λν΄ μ΄λ»κ² μκ°νλμ§ κΆκΈν΄μ λ€μκ³Ό κ°μ΄ μ§λ¬Ένμ΅λλ€.
https://twitter.com/jashkenas/status/142736117895151616
κ·Έλ¦¬κ³ λ€μκ³Ό κ°μ λ΅λ³μ΄ μμμ΅λλ€.
https://twitter.com/juandopazo/status/142737949178601472
https://twitter.com/yaypie/status/142737982879842304
https://twitter.com/fortes/status/142742305877659648
History APIλ URIμ ꡬλ³λλ νμ κ²½λ‘μ μ°κ²°λ μ± μνλ₯Ό ꡬ체μ μΌλ‘ λ€λ£Ήλλ€. μ¦ "μ°λ¦¬κ° μ¬κΈ° μ΄λ»κ² μμ΄?" μλ§λ Hysterisis APIλΌκ³ λΆλ¬μΌ ν κ²μ λλ€. μ°λ¦¬λ λμΌν URIλ₯Ό 곡μ νκ³ λμΌν 'νμ΄μ§'μ μμ μ μμ§λ§ λ§μ°μ€μ λ€λ‘ λ²νΌμ λλ₯΄κ±°λ λͺ¨λ°μΌμμ λ€λ‘ μ€μμ΄νν λ λμΌν λ°ν 보기/νμ΄μ§/μνκ° μλ μ μμ΅λλ€. κ·Έλ¦¬κ³ κ·Έ λ€λ‘ λμμ URIλ₯Ό λ³κ²½νμ§ μκ³ μ± μν/κΈ°λ‘μ λ³κ²½ν μ μμ΅λλ€. λͺ¨λ νμ μ νμ΄ URI μ νμΈ κ²μ μλλλ€. λ°λΌμ URIλ₯Ό 곡μ ν λ λμΌν 리μμ€ λλ 'νμ΄μ§'λ₯Ό νμνμ§λ§ λμΌν νμ μνλ νμνμ§ μμ μ μμ΅λλ€.
λλ λΉμ μ 무리μ κ²½νμ κ°μ¬νμ§λ§ λλΆλΆμ κ°λ°μκ° μ μμκ° μλν λλ‘ APIλ₯Ό μ¬μ©νλ λ°©λ²μ μμ§ μ΄ν΄νμ§ λͺ»νλ€λ κ²μ 보μ¬μ£ΌκΈ° μν κ²μ΄λΌκ³ μκ°ν©λλ€. κ·Έκ²μ νλ μμν¬κ° κ·Έκ²μ ν¬μ₯νλ μ’μ μ΄μ κ° μλλλ€.
λν μμ κ°μ μ μ§νλ λ°©λ²μ΄ μλλΌ push/popState APIλ₯Ό μ¬μ©νμ¬ νμνκΈ° μν΄ λ€λ‘ λ²νΌμ λλ μ λ λ³κ²½ μ¬νμ μ μ₯νλΌλ λ©μμ§λ₯Ό μ¬μ©μμκ² νμνλ λ°©λ²μ λν μ§λ¬Έμ λ€λ£¨μ§ μμμ΅λλ€. μ± κ°νΌ κ°λ₯ν URIκ° μλ μμμμ λ©λ¦¬ λ¨μ΄μ Έ μμ΅λλ€. μ΄μ λν λμ²λ₯Ό κ³ λ €νμκΈ° λ°λλλ€.
λλ μΌλ°μ μΌλ‘ Backboneκ³Ό WebDevλ₯Ό μ²μ μ νμ§λ§ tribalvibesμ λμν©λλ€.
Facebookμ Graph APIλ₯Ό κΈ°λ°μΌλ‘ νλ μΉ μμ© νλ‘κ·Έλ¨μ λ§λ€κ³ Backboneμ νμ κΈ°λ₯μ μ¬μ©νμ¬ μ¬μ©μκ° λ€λ₯Έ νλͺ©μΌλ‘ λμκ° λ³Ό μ μλλ‘ νκ³ μΆμ΅λλ€. Facebookμ΄ μ§κΈ νκ³ μλ κ²κ³Ό μ μ¬ν©λλ€. κ·Έλ¬λ pushStateμ stateobjectκ° μμΌλ©΄ μ¬μ©μλ APIμμ νλͺ©μ λ€μ λ‘λν΄μΌ νλ©° μ΄λ λΆλͺ ν λΉμ©μ΄ λ§μ΄ λλλ€.
μλ§λ μ΄ λ¬Έμ μ μΌλ°μ μΈ ν¨ν΄μ΄ 무μμΈμ§ λͺ¨λ₯΄κΈ° λλ¬ΈμΌ κ²μ λλ€. νμ§λ§ μ΄μ λν μν κ°μ²΄κ° μμΌλ©΄ λ§€μ° λμμ΄ λ κ²μ΄λΌκ³ μκ°ν©λλ€.
MDN λ¬Έμμ λ°λΌ μν κ°μ²΄λ λμ€ν¬μ μ μ₯λ©λλ€. λ‘컬 μ μ₯μμ μ μ₯νλ κ²κ³Ό μ΄λ»κ² λ€λ₯Έμ§ μ΄ν΄κ° λμ§ μμ΅λλ€. λλ μ΄κ²μ΄ λ€μ λ€λ£¨μ΄μ ΈμΌ νλ€κ³ μκ°νλ€. κΈ°λ‘ APIμμ μν κ°μ²΄λ₯Ό μ¬μ©ν μ μλ κ²½μ° λ‘컬 μ μ₯μ λλ λ€λ₯Έ μν μ μ₯ λ°©λ²μ μ¬μ©νλ κ²μ κ΄λ ¨μ΄ μμ΄ λ³΄μ λλ€.
λ§μ΅λλ€. νμ§λ§ λ°λμ λλ€. λ‘컬 μ μ₯μ, μΏ ν€ λλ λ¨μν νμ¬ URLμ μ°κ²°λμ§ _μλ_ μνλ₯Ό μ μ₯νλ λ€λ₯Έ λ°©λ²μ΄ μλ κ²½μ° μν κ°μ²΄λ₯Ό μ¬μ©νλ κ²μ κ΄λ ¨μ΄ μμ΅λλ€.
μ 곡λ λꡬλ₯Ό νμ©νλ κ²μ΄ λ μ’μ§ μμ μ΄μ λ 무μμ λκΉ? μν κ°μ²΄λ μ΄μ μνλ₯Ό μ μ₯νκ³ μ‘μΈμ€νλ μ§μ μ μΈ λ°©λ²μ μ 곡ν©λλ€. μ¬μ©μκ° νμ΄μ§μ λμ°©ν λλ§λ€ λ‘컬 μ μ₯μλ₯Ό νμνλ λμ history.stateλ₯Ό μ¬μ©ν μ μμΌλ©΄ URL κ²½λ‘λ₯Ό ν΅ν΄ 보기μ μΌλ° μνλΏλ§ μλλΌ μ¬μ©μκ° λ‘ λμκ°κ³ μΆμ μλ μμ΅λλ€.
μ μκ°μλ λΌμ°νΈλ₯Ό μ¬μ©νλ κ°λ¨ν μ±μ λΌμ°νΈλ₯Ό κ°λ¨νκ² μ¬μ©ν΄μΌ ν©λλ€. μ 체 κ²½νμ μν΄ URLμ 볡μ¬νμ¬ λΆμ¬λ£μ΅λλ€. 볡μ‘ν μ±μ κ²½λ‘λ₯Ό μ ν리μΌμ΄μ μ μΌλ° μμ λλ νΉμ λ μ½λμ λν λ¨μν μ§μ μ μΌλ‘λ§ μ¬μ©ν΄μΌ νλ©°, μ¬μ©μ(μλ²), μΈμ λλ λ‘컬μ΄λ κ°μ μ§μμ± μ νμ λ μ λνλ΄λ μ€ν λ¦¬μ§ APIλ₯Ό μ¬μ©ν΄μΌ ν©λλ€.
κΈ°λ‘ μν κ°μ²΄λ₯Ό μ¬μ©νλ©΄ λ¨μΌ νμ΄μ§ μ±μ΄ URLμ μ μ¬μ μΌλ‘ μꡬμ μΈ μ± κ°νΌλ‘ μ¬μ©ν μ μλ κ°λ¨ν λ°©λ²μ μ₯μ μ 무ν¨νν©λλ€.
λ°±λ³Έμ νμ λ€λ₯Έ νλ μμν¬λ³΄λ€ λ§€μ° μ μ°νκ³ λ λ λ¨μ μ΄μμ΅λλ€. μ΄κ²μ΄ κΈ°λ³Έ window.history.pushStateμ λ€λ₯Έ μ΄μ λ₯Ό μ΄ν΄ν μ μμ΅λλ€. μ΄λ€ μ¬λλ€μ κ·Έκ²μ μ’μνμ§ μλλ€λ κ²μ μ΄ν΄ν©λλ€. κ·Έλ¬λ μ¬μ© μ¬λΆλ μ΅μ’ μ¬μ©μμκ² λ§‘κ²¨μΌ ν©λλ€.
κ·Έλ¬λ λ€μ μκ°ν΄ 보μμμ€.
@rafayepes λλ λΉμ μ μ£Όμ₯μ μ μ μΌλ‘ λμν©λλ€. μ λ Backboneκ³Ό κ·Έ λ¨μμ±μ μ’μνμ§λ§ μ΄ API λ³κ²½μΌλ‘ μΈν΄ μ±μ΄ URLκ³Ό μν κ°μ 1:1 κ΄κ³λ₯Ό μ μ₯ν΄μΌ ν λ μ½λμ λ§μ λ¬Έμ μ ν΄κ²° λ°©λ²μ΄ λμ λμμ΅λλ€. History APIμ μνΈ μμ©νλ κΈ°λ³Έ λ°©λ²μ ν¨μ¬ λ μ¬μΈ κ²μ λλ€.
κ°μ₯ μ μ©ν λκΈ
History APIλ URIμ ꡬλ³λλ νμ κ²½λ‘μ μ°κ²°λ μ± μνλ₯Ό ꡬ체μ μΌλ‘ λ€λ£Ήλλ€. μ¦ "μ°λ¦¬κ° μ¬κΈ° μ΄λ»κ² μμ΄?" μλ§λ Hysterisis APIλΌκ³ λΆλ¬μΌ ν κ²μ λλ€. μ°λ¦¬λ λμΌν URIλ₯Ό 곡μ νκ³ λμΌν 'νμ΄μ§'μ μμ μ μμ§λ§ λ§μ°μ€μ λ€λ‘ λ²νΌμ λλ₯΄κ±°λ λͺ¨λ°μΌμμ λ€λ‘ μ€μμ΄νν λ λμΌν λ°ν 보기/νμ΄μ§/μνκ° μλ μ μμ΅λλ€. κ·Έλ¦¬κ³ κ·Έ λ€λ‘ λμμ URIλ₯Ό λ³κ²½νμ§ μκ³ μ± μν/κΈ°λ‘μ λ³κ²½ν μ μμ΅λλ€. λͺ¨λ νμ μ νμ΄ URI μ νμΈ κ²μ μλλλ€. λ°λΌμ URIλ₯Ό 곡μ ν λ λμΌν 리μμ€ λλ 'νμ΄μ§'λ₯Ό νμνμ§λ§ λμΌν νμ μνλ νμνμ§ μμ μ μμ΅λλ€.
λλ λΉμ μ 무리μ κ²½νμ κ°μ¬νμ§λ§ λλΆλΆμ κ°λ°μκ° μ μμκ° μλν λλ‘ APIλ₯Ό μ¬μ©νλ λ°©λ²μ μμ§ μ΄ν΄νμ§ λͺ»νλ€λ κ²μ 보μ¬μ£ΌκΈ° μν κ²μ΄λΌκ³ μκ°ν©λλ€. κ·Έκ²μ νλ μμν¬κ° κ·Έκ²μ ν¬μ₯νλ μ’μ μ΄μ κ° μλλλ€.
λν μμ κ°μ μ μ§νλ λ°©λ²μ΄ μλλΌ push/popState APIλ₯Ό μ¬μ©νμ¬ νμνκΈ° μν΄ λ€λ‘ λ²νΌμ λλ μ λ λ³κ²½ μ¬νμ μ μ₯νλΌλ λ©μμ§λ₯Ό μ¬μ©μμκ² νμνλ λ°©λ²μ λν μ§λ¬Έμ λ€λ£¨μ§ μμμ΅λλ€. μ± κ°νΌ κ°λ₯ν URIκ° μλ μμμμ λ©λ¦¬ λ¨μ΄μ Έ μμ΅λλ€. μ΄μ λν λμ²λ₯Ό κ³ λ €νμκΈ° λ°λλλ€.