μ ν΅μ μΈ μΉμ¬μ΄νΈμμλ μ¬μ©μκ° μΉμ¬μ΄νΈ λ΄μ λ€λ₯Έ νμ΄μ§λ‘ μ΄λνλ©΄, λΈλΌμ°μ κ° νμ΄μ§λ₯Ό 보μ¬μ£ΌκΈ° μν΄μ λ§€λ² HTML νμΌλ‘ λ νμ΄μ§μ μ 체λ₯Ό λΆλ¬μμΌλ§ νλ€.
μμ κ°μ μμ κ·Έλ¦Όμ²λΌ λμΌν νμ΄μ§ μ νμ 보μ¬μ£Όκ³ μλ€. μ ν΅μ μΈ μΉμ¬μ΄νΈλ νμ΄μ§ μ 체λ₯Ό λ‘λ©νκ³ , SPAλ Menu, Footerμ κ°μ νμ΄μ§ μ ν μ νμ μ€λ³΅λλ λΆλΆμ μλ‘ λΆλ¬μ€μ§ μλλ€. μ ν΅μ μΈ μΉμ¬μ΄νΈμμ μ΄μ κ°μ΄ νμ΄μ§ μ 체λ₯Ό λΆλ¬μ€λ νμλ₯Ό λ³΄ν΅ κΉλΉ‘μΈλ€κ³ νννλ€.
μΉμ¬μ΄νΈκ° 볡μ‘ν΄μ§κ³ μ ν리μΌμ΄μ
ννλ₯Ό κ°μ§κ² λλ©΄μ, μ¬μ©μμ μλΉμ€ μ¬μ΄μ λμ± λ§μ μνΈμμ©μ΄ μΌμ΄λκ² λμλ€. νμ§λ§ μ΄λ΄ λλ§λ€ Headerλ Navigation Barμ κ°μ΄ μ€λ³΅λλ μμλ€μ λ§€λ² λΆλ¬μ€λ κ²μ μλ²μμ λΆνμν νΈλν½μ λ°μμμΌ°λ€. λν μ¬μ©μ μ
μ₯μμλ λ§€λ² λͺ¨λ νμ΄μ§λ₯Ό λΆλ¬μ€κ² λλ©΄μ λ λλ¦° λ°μμ±μ κ°μ§κ² λμκ³ , μ ν리μΌμ΄μ
κ³Ό κ°μ μ¬μ©μ κ²½νμ μ 곡νκΈ° μ΄λ ΅κ² λ§λ€μλ€.
πΉ 1990λ
λ νλ°μ HTML λ¬Έμ μ μ²΄κ° μλ, μ
λ°μ΄νΈμ νμν λ°μ΄ν°λ§ μλ²μμ μ λ¬λ°μ λ°μ΄ν°λ₯Ό JSκ° λμ μΌλ‘ HTML μμλ₯Ό μμ±ν΄μ νλ©΄μ 보μ¬μ£Όλ λ°©μμ΄ κ°λ°λΌ μ¬μ©λκΈ° μμνλ€.
πΉ 2000λ λ μ€λ°λΆν° μ΄λ¬ν κ°λ° λ°©μμ μ΄μ©ν μΉ μ ν리μΌμ΄μ μ΄ λ³΄νΈνλμμΌλ©°, μ΄κ²μ Single Page Application(SPA)μ΄λ€.
μλ²λ‘λΆν° μμ ν μλ‘μ΄ νμ΄μ§λ₯Ό λΆλ¬μ€μ§ μκ³ νμ΄μ§ κ°±μ μ νμν λ°μ΄ν°λ§ λ°μ, κ·Έ μ 보λ₯Ό κΈ°μ€μΌλ‘ νμ¬μ νμ΄μ§λ₯Ό μ λ°μ΄νΈν¨μΌλ‘μ¨ μ¬μ©μμ μν΅νλ μΉ μ΄ν리μΌμ΄μ μ΄λ μΉ μ¬μ΄νΈ
μ°λ¦¬κ° λ§μ΄ μ¬μ©νλ SNSλ‘ μλ₯Ό λ€μλ©΄, μΉκ΅¬κ° μ¬λ¦° μ¬μ§μ μ’μμλ₯Ό λλ₯΄κ³ λκΈμ λ¬κ³ , κΆκΈν λ κ²μμ νκΈ°λ νλ€. μ΄λ΄ λ μ ν리μΌμ΄μ κ³Ό μ¬μ©μ μ¬μ΄μμλ μμλ‘ μνΈμμ©μ΄ λ°μνλλ° μ΄λ νμ΄μ§ μ 체λ₯Ό λ λλ§νλ κ²μ΄ μλ νμν λΆλΆλ§ μ λ°μ΄νΈνκΈ° λλ¬Έμ μ¬μ©μ νλμ λΉ λ₯Έ λ°μμ 보μΈλ€. μλ² μ μ₯μμλ μμ²λ°μ λ°μ΄ν°λ§ λ겨주면 λλ―λ‘ κ³Όκ±°μ κ°μ κ³ΌλΆν λ¬Έμ λ μ€μΌ μ μμλ€. λν νλ©΄ μ 체λ₯Ό μλ‘ λ λλ§ν νμκ° μμ΄ λ³΄λ€ λμ UXλ₯Ό μ 곡νλ€.
π¨ JavaScript νμΌ ν¬κΈ°κ° ν¬κ³ , 첫 νλ©΄ λ‘λ© μκ°μ΄ κΈΈμ΄μ§λ€.
SPAμ κ²½μ°μλ JavaScript νμΌμ ν¬κΈ°κ° ν¬κΈ° λλ¬Έμ JS νμΌμ κΈ°λ€λ¦¬λ μκ°μΌλ‘ 첫 νλ©΄ λ‘λ© μκ°μ΄ κΈΈμ΄μ§λ€. λΈλΌμ°μ λ 첫 νλ©΄μ λ‘λ©ν λ HTML νμΌμ μ½μ ν κ·Έ μμ μλ script μμ Javascript νμΌμ λ€μ λ°μμ€λ κ³Όμ μ κ±°μΉκΈ° λλ¬Έμ΄λ€.
첫 νλ©΄ λ‘λ©μ ν λ μ½μ HTML νμΌμ κ±°μ λΉμ΄μκ³ , λλΆλΆμ λͺ¨λ μ½λλ€μ΄ JavaScript νμΌ μμ λ€μ΄μλ€ λ³΄λ μμ°μ€λ½κ² JavaScript νμΌμ΄ 무거μμ§λ©°, μ΄ JS νμΌμ κΈ°λ€λ¦¬λ μκ°μΌλ‘ μΈν΄μ 첫 νλ©΄ λ‘λ© μκ°μ΄ κΈΈμ΄μ§λ€.
π¨ κ²μ μμ§ μ΅μ ν(SEO)κ° μ’μ§ μλ€
κ²μμμ§ μ΅μ νλ ꡬκΈμ΄λ λ€μ΄λ² κ°μ κ²μμμ§μ΄ μλ£λ₯Ό μμ§νκΈ° μ’λλ‘ μΉνμ΄μ§λ₯Ό ꡬμ±νλ κ²μ λ»νλ€. κ²μ μμ§μ μλ λ°©μμ κ²μ λ‘λ΄μ΄ μΉνμ΄μ§μ μλ μ 보λ₯Ό μμ§νκ³ λΆμν΄μ κ·Έ κ²°κ³Όκ°μ μΈλ±μ€λ₯Ό λ§λ€μ΄μ 보κ΄νκ³ μλ€κ° μ¬μ©μκ° κ²μμ΄λ₯Ό μ
λ ₯νλ©΄ 보κ΄νλ μΈλ±μ€μμ κ²μμ΄μ κ°μ₯ μ°κ΄μ± λμ μΉ νμ΄μ§λ€μ μμλλ‘ λ³΄μ¬μ£Όλ λ°©μμΌλ‘ μλλλ€. νμ§λ§ SPAμ κ²½μ°μλ HTML νμΌμ λ³λ€λ₯Έ μλ£κ° μκΈ° λλ¬Έμ κ²μ μμ§μ΄ μ μ νκ² λμνμ§ λͺ»νλ€. κ²μ λ‘λ΄μ΄ μλ£λ₯Ό μμ§ν λ μΉ νμ΄μ§μ URL, HTMLμ λ¬Έμ λ΄μ κ°μ’
νκ·Έ, λ§ν¬ λ±μ λΆμνλλ° SPAλ HTMLμ΄ κ±°μ λΉμ΄μμ΄ κ²μ λ‘λ΄μ΄ μλ£λ₯Ό μΆ©λΆν μμ§νμ§ λͺ»νκ² λλ κ²μ΄λ€. μ΄λ¬ν μ΄μ λλ¬Έμ κ²μ λ
ΈμΆμ΄ μ€μν μΉ μ ν리μΌμ΄μ
μ κ²μ μμ§ μ΅μ νμ λν λμμ±
μ λ°λ‘ λ§λ ¨ν΄μΌ νλ©°, μ± μμμ μ/λ€λ‘ κ°κΈ° λ±μ μν κ΄λ¦¬λ ν΄μΌ λκΈ° λλ¬Έμ κ°λ°μ 볡μ‘λκ° λ λμ΄λλ€. νμ§λ§ SPAμμλ κ²μ μμ§ μ΅μ νμ λμν μ μλλ‘ κ²μ μμ§μ΄ λ°μ νκ³ μλ μΆμΈμ΄λ€.
μΆμ²: μ½λμ€ν μ΄μΈ