Section 1μμ λ°°μ΄ κ²
μ§λ νλ¬λμ μλ°μ€ν¬λ¦½νΈ(λ°°μ΄, κ°μ²΄, DOM, κ³ μ°¨ν¨μ), HTMLκ³Ό CSS κΈ°μ΄, Linuxμ Git κΈ°μ΄, κ·Έλ¦¬κ³ λ¦¬μ‘νΈ(jsx, props, state)μ κΈ°μ΄
λ₯Ό λ°°μ λ€. κ΅λΉ κ΅μ‘κ³Όμ μ μκ°νμλλ HTML, CSS, μλ°μ€ν¬λ¦½νΈ, μ μ΄μΏΌλ¦¬λ₯Ό 4κ°μλμ λ°°μ λλ°,, μμΌ μ§§μ κΈ°κ°λμ μ λ§ λ§μ λ΄μ©μ λ€λ€λ€.
μ§κΈ νκΈ°λ₯Ό μμ±νλ©° λ€μ 보λ Section 1μ μ΄λ¦μ΄ π Section 1: Single Page Application μ΄λ€. λ°°μ΄ λͺ¨λ λ΄μ©μ νμ©ν΄ SPAλ₯Ό λ§λλ κ²μ΄ μ΄λ² μΉμ μ λͺ©νμμμ μ΄μ μΌ λΉλ‘μ κΉ¨λ¬μλ€!
twittler λͺ©μ
νμ΄μ ν¨κ» νΌκ·Έλ§λ‘ twittler λͺ©μ
μ λ§λ€μ΄λ³΄μλ€. κ·Έλμμ λ°μ¬λ―Ή, XDλ₯Ό μ¨λ΄€λλ° νΌκ·Έλ§λ νμ
ν λ μ μ©ν κ² κ°λ€.
μ ν¨μ± κ²μ¬
μ κ·ννμμ νμ©ν΄ νμκ°μ
νμ΄μ§μμ μμ΄λμ λΉλ°λ²νΈμ μ ν¨μ± κ²μ¬ κΈ°λ₯μ ꡬννλ€. μ¬λ°λ₯Έ μ
λ ₯νμμΌ λμ μλ λλ₯Ό ꡬλΆν΄μΌ ν΄μ μκ°λ³΄λ€ κΉλ€λ‘μ λ€.
Twittler SPA, State & Props
λ§μ§λ§ κ³Όμ λ€λ‘λ μ£Όμ΄μ§ dummyDataλ₯Ό νμ©ν΄ νΈμν°λ₯Ό ν΄λ‘μ½λ©νλ κ³Όμ λ₯Ό μννλ€. npm install react-router-dom
μ ν΅ν΄ 리μ‘νΈλ‘ SPAλ₯Ό λ§λ€μλ€. λν Stateμ Propsλ₯Ό ν΅ν΄ λΆλͺ¨ μ»΄ν¬λνΈλ‘λΆν° λ°μ΄ν°λ₯Ό μ λ¬λ°μ μ
λ°μ΄νΈ μν€λ κ²κΉμ§ ꡬννλ€.
Section 1μ λ§μΉκ³ λλ μ
μλ‘μ΄ κ±Έ λ°μλ€μ΄λλ°μλ μκ°μ΄ κ±Έλ¦°λ€.
μ¬λλ§λ€ 걸리λ μκ°μ λ€λ₯΄μ§λ§, μ½λμ€ν μ΄μΈ μμ μ 곡νλ 컀리νλΌμ κ·Έ λꡬλΌλ λ² μ°Όμ κ²μ΄λ€. λ§€μΌ μλ‘μ΄ κ°λ μ λ°°μ κ³ , κ³Όμ λ₯Ό ν΄λ΄μΌνλ€.
μκ³ λ¦¬μ¦μ λΆνλ― λκ° λ μ€λ₯΄μ§ μμΌλ©΄ νμκ° λκ² κ³ λ―ΌνκΈ° μΌμ€μκ³ , κ°λ μ μ΄ν΄νλ€κ³ μκ°νλλ° λ§μ κ³Όμ μμ νλ €κ³ νλ μκ°μ²λΌ μ μλλ€. κ·Έλ κ² λΆλͺνκ³ κΉ¨μ§κΈ°λ₯Ό λ°λ³΅νλ€κ° λ¬Έμ κ° ν΄κ²°ν΄λ 'μ΄κ² μ... λμ§?' μΆμ μ°μ°ν κΈ°λΆμ΄ λ€μλ€.
λλ‘λ 'μ! μ΄λμ μ΄λ°κ±°κ΅¬λ!' μΆμ μκ°λ€λ μμλ€. λΈλ‘κΉ
μ μ€μμ±κ³Ό λλΆμ΄ 무ν κ²μνλ©° νΌμ μ½μ§ν μκ°λ€μ μ λ λ°°μ νμ§ μλλ€λ κ±Έ λͺΈμ κΉ¨λ¬μλ€.
κ·Έλ°λ° μμΌλ‘ νμ μλ‘μ΄ κ±Έ λ°μλ€μ¬μΌ νλ€λ©΄?
μ½λμ€ν μ΄μΈ 컀리νλΌμμλ ν¨μ μ»΄ν¬λνΈλ§ λ°°μ΄λ€. ν΄λμ€ μ»΄ν¬λνΈλ λ°λ‘ κ°λ₯΄μ³μ£Όμ§ μλλ€. μ νλΈμμ 2019λ λμ μ λ‘λλ 리μ‘νΈ μμλ€μμλ λͺ¨λ ν΄λμ€ μ»΄ν¬λνΈλ₯Ό μ°κ³ μλλ°, λ¬Έλ κ·Έ μμμ 보λ€κ° μ΄λ° μκ°μ΄ λ€μλ€.
μμΌλ‘ μλ‘μ΄ κ² λμ€λ©΄ λ€μ λ λ°°μμΌκ² λ€...?
λ¬Όλ‘ , μ΄λ₯Ό λͺ¨λ₯΄κ³ κ°λ°μ μμν 건 μλλ€. μμ΄λ¬λνκ²λ λ΄κ° μ΄ κ³΅λΆλ₯Ό μμν κ°μ₯ ν° μ΄μ κ° λ°λ‘ λ 곡λΆν΄μΌνλ€λ μ μ΄μλ€. λ΄κ° κ°μ₯ μ’μνλ λΆλΆμ΄ μμκ°μ λλ₯Ό ννμ λΉ μ§κ² λ§λ κ²μ΄λ€.
μλ‘μ΄ κ±Έ λ°°μμ κΈ°μ‘΄μ κ²κ³Ό ν©μ³μ Έ λ΄ μ€λ ₯μ΄ μ κ·Έλ μ΄λ λλ κ²μ΄ μλλΌ κΈ°μ‘΄μ κ²μ΄ μλ‘μ΄ κ²μΌλ‘ μμ ν λμ²΄λΌ λ΄κ° λ°°μ΄ κ²λ€μ΄ νμκ°μ 무μ©μ§λ¬Όμ΄ λ μλ μλ€λ μκ°μ μκ° κ²μ΄ λ¬λ€.
λ§μ½ μλ°μ€ν¬λ¦½νΈλ₯Ό λ체νλ κ°λ ₯ν μΈμ΄κ° λνλλ€λ©΄...?
μ΄ λΆλΆμ λν΄ λ΄κ° λ΄λ¦° κ²°λ‘ μ 'μΈμμ κ°μκΈ°λ μκ³ , μΆ©λΆν λλΉν μ μλ€'λ κ²μ΄λ€. ITμ
κ³μ μνκ³κ° λΉ λ₯΄κ³ λ―Όκ°νκ² λ³ννλ€λ 건 μ΄λ―Έ μκ³ μμνκ³ ! μλ‘μ΄ μΈμ΄κ° λμ¬λλ§λ€ κ°λ°μλ€μ΄ λͺ¨λ μ€μ§νλ κ²λ μλκ³ ! μ€λ Ή λ΄κ° μ¬μ©ν μΈμ΄κ° μμν μ¬λΌμ§λλΌλ λ΄κ° ν°λν μ»΄ν¨ν°μ μ¬κ³ λ₯λ ₯κ³Ό λ
Όλ¦¬, κΈ°λ³Έμ§μμ΄ μ λ 무μ©μ§λ¬Όμ΄ λ μΌλ μκ³ ! κ·Έλ λ€λ©΄ μΆ©λΆν λλ μ μ΄μλ¨μ μ μλ€λ μκ°μ΄ λ€μκ³ λ€μ λ§μμ λ€μ‘μ μ μμλ€.
κ·Έλ λ€λ©΄ λλ μ΄λ€ κ°λ°μλ‘ μ±μ₯νκ³ μΆμκ°?
νλ¬ λμ 10λͺ μ λμ νμ΄λ₯Ό λ§λ¬λ€. λλ λκ΅°κ°μκ² νμ΄λ€ μ€ ν λͺ μ΄μμν λ°, λλ μ΄λ€ νμ΄μμκΉ?
νμ΄ νλ‘κ·Έλλ°μ νλ©΄μ λλ‘ λ΄κ° κ°λ₯΄μ³μ£ΌκΈ°λ νκ³ , λλ‘ ν¨κ» λλ κ³ λ―ΌνκΈ°λ νκ³ , λλ‘ λμμ λ°κΈ°λ νλ€. κ·Έλμμ λ€λ₯Έ μ¬λμ΄ μ΄ μ½λλ₯Ό μ§μ€ν΄μ λΆμνλ €κ³ νκ±°λ, λ΄κ° μ μ΄λ κ² μ½λλ₯Ό μΌλμ§ μ€λͺ ν κΈ°νκ° μμλλ° νμ΄ νλ‘κ·Έλλ°μ ν΅ν΄ 'μν΅'μ μ€μμ±μ λκΌλ€.
λ΄κ° μλ κ±Έ λ§λ‘ μ€λͺ νκ³ , λ΄κ° λͺ¨λ₯΄λ κ² λμ§ μκ³ μ§λ¬ΈνκΈ° μν΄μλ μν΅λ₯λ ₯μ΄ κΌ νμνκ³ , μ½μ§ μμλ€. κ²λ€κ° λ§€λ² μλ‘μ΄ μ¬λκ³Ό νλ €λ μ²μμλ μ΄μνκΈ°λ νλ€.
νμ§λ§ μ΄ νμ΄ νλ‘κ·Έλλ°μ λμ€μ μ μ¬νμλ λ΄κ° κ²ͺμ μν©λ€μ 미리 μ°μ΅νλ κ±°λΌκ³ μκ°νλ€. κ°λ°μ λ€λ₯Έ μ¬λλ€κ³Ό νμΌλ‘ ν¨κ» νκ² λ κ²μ΄κ³ , νμ¬μ μ μ¬νκ² λλ©΄ μ¬νμ§λ§ λλ κ°μ₯ λͺ»νλ μ¬λμΌ κ²μ΄λ€. κ·Έλ¦¬κ³ μ°μ°¨κ° μμ΄κ³ λ Έλ ₯νλ€λ³΄λ©΄ μ μ μ΄ λ€μ΄μ€κ³ κ·Έλ λ΄κ° λμμ μ€ μ μλ μ¬λμ΄ λ κ²μ΄λ€. μκ°μ΄ νλ₯΄λ©΄μ κ°λ° μ€λ ₯μ λ΄κ° ν€μΈ μ μλ€λ©΄, μ€μν 건 'ν'μΌλ‘μ¨ ν¨κ» μΌνλ κ²μ΄ μλκΉ?
κ·Έλμ λλ ν¨κ» μΌνκ³ μΆμ κ°λ°μ, μν΅νλ κ°λ°μκ° λκ³ μΆλ€.
μν΅λ₯λ ₯μ κ°λ°μ€λ ₯λ§νΌ ν루μμΉ¨μ μκΈ°λ κ² μλλ§νΌ νμ΄ νλ‘κ·Έλλ°μ νλ©° 'κ·Όκ±°λ₯Ό κ°μ§κ³ ' 'μ½κ²' λμ μ½λλ₯Ό μ€λͺ νκ³ , μ΄ν΄κ° μ λμ§ μλ λΆλΆμ΄ 무μμΈμ§ 'μ' μ§λ¬Ένλ, κ·Έλ¦¬κ³ ν¨κ» λ¨κ³λ³λ‘ λ¬Έμ λ₯Ό ν¨κ» ν΄κ²°νλ μ°μ΅μ ν κ²μ΄λ€.
Section 2λ₯Ό μμνλ λ§μκ°μ§
section 2λΌκ³ ν΄μ "λ μ΄μ¬ν ν΄μΌμ§" μ΄λ° μκ°μ μλ€. κ·Έλ₯ μ§κΈμ²λΌ λΆλͺνλ©΄μ λ°°μΈ κ²μ΄λ€.
λ€λ§ section 2 λμ κΌ νκ³ μΆμ κ²μ΄ μλ€λ©΄,
μ΄λ² νλ¬λμ μ λ§ κ³ μνκ³ , λ€μ νλ¬λ νλ΄μ ν΄λ΄μΌκ² λ€π