π μ κ° μ§μν νμ¬λ€μ λ€μ κΈ°μ€μ λ§μ‘±ν΄μΌνμ΄μ
- νλ°ν μ견 곡μ λ₯Ό ν΅ν΄ κ°λ°μλ€μ΄ ν¨κ» μ±μ₯ν μ μλ κ·λͺ¨μλ FE μμ§λμ΄ μ‘°μ§
- μλΉμ€ κ°λ° λΏλ§ μλλΌ κΈ°μ μ€ν°λλ ν¨κ» μ§ννλ©° μ£Όλμ΄λ‘μ μ±μ₯ν μ μλ μ‘°μ§
- React λ₯Ό νμ©νμ¬ μλΉμ€λ₯Ό κ°λ° λ° μ μ§λ³΄μνκ³ μλ μ‘°μ§
- νλ°ν μ½λ리뷰λ₯Ό ν΅ν΄ μ’μ μμ€μ½λ νμ§κ³Ό μνΈκ° λ°μ μ μν΄ νμ°λ μ‘°μ§
- λ΄κ° κ΄μ¬μλ λΆμΌμ λΉμ¦λμ€μμ λ°μνλ λ¬Έμ λ€μ κΈ°μ μ μΈ λ°©λ²μΌλ‘ κ³ λ―Όνκ³ ν΄κ²°νλ μ‘°μ§
μ§κΈκΉμ§λ Vue
λ₯Ό νμ©ν΄μ μλΉμ€ κ°λ°μ ν΄μλλ° λ°©λν React
μνκ³μμλ§
κ²½νν μ μλ κ²λ€μ΄ μλ€κ³ μκ°ν΄μ μλ‘μ΄ μ
무νκ²½μμλ κΌ React
λ₯Ό νμ©ν΄λ³΄κ³ μΆμμ΄μ.
μ¬μ΄λ νλ‘μ νΈλ‘ React
λ₯Ό νμ΅νλ€κ³ ν΄λ κ²°κ΅μλ νκ³κ° μκ³ ,
μ€λ¬΄μμ λ°μνλ λΉμ¦λμ€ μ΄μλ€μ ν΄κ²°νλ κ²κ³Όλ ν° μ°¨μ΄κ° μλ€κ³ μκ°νκ±°λ μ.
κ·Έλ¦¬κ³ λ¬΄μλ³΄λ€ κ·λͺ¨κ° ν° FE μ‘°μ§μμ νμλ€κ³Όμ νλ°ν μ½λ리뷰 λ° κΈ°μ 곡μ λ₯Ό ν΅ν΄
μλ‘κ° μ±μ₯ν μ μλ κ³³μμ μΌνκ³ μΆμμ΄μ.
π νΈλ¦¬ν (Triple) μ μ§μνλ€
μ 쑰건μ λΆν©νλ νμ¬λ₯Ό μ°Ύλ μ€ νΈλ¦¬ν
FE μμ§λμ΄μ§κ΅° μ±μ©κ³΅κ³ λ₯Ό λ³΄κ² λμμ΄μ.
νμμ μ¬ν λ€λλκ±Έ μ’μνκΈ° λλ¬Έμ μ΄ νμ¬μ μλΉμ€μ λν΄μλ μ΄μ λΆν° μκ³ μμκ³
μΈλ‘ μ ν΅ν΄ μκ°λ νΈλ¦¬ν
μ λν κΈμ μ μΈ κΈ°μ¬λ€, κ·Έλ¦¬κ³ λ¬΄μλ³΄λ€ νΈλ¦¬ν
μ νλ₯ν κ°λ° λ¬Ένλ
μ£Όλμ΄ FE κ°λ°μλ‘μ μ±μ₯νκΈ°μ μΆ©λΆν νκ²½μ΄λΌλ μκ°μ΄ λ€μ΄μ μ μ¬ μ§μμ κ²°μ¬νκ² λμμ΄μ.
π νΈλ¦¬ν ν©λ₯ κ³Όμ
1οΈβ£ μ μ¬ μ§μ λ° μλ₯κ²ν
νΈλ¦¬ν
μ μλ₯κ²ν -> μ¬μ κ³Όμ -> 1λ²μ λ©΄μ -> μ²μ°νμ -> μ
μ¬
μ νλ‘μΈμ€λ‘ μμ
μ΄ μ΄λ£¨μ΄μ‘μ΄μ.
μ κ°μ κ²½μ° μλ₯κ²ν μ λλ΅ 1μ£ΌμΌ μ λ μκ°μ΄ μμλμλ κ² κ°μμ.
2οΈβ£ React λ₯Ό νμ©ν ꡬνκ³Όμ
μ¬μ κ³Όμ μ κ²½μ° νΈλ¦¬ν
ννμ΄μ§μ νΉμ μμμ ꡬννλ λ¬Έμ κ° λμμ΄μ.
1μ£ΌμΌμ΄ μ£Όμ΄μ‘κ³ React
λ₯Ό μ¬μ©ν΄μ κ°λ°ν΄μΌνκΈ° λλ¬Έμ
React
μ¬μ© κ²½νμ΄ κ±°μ μλ μ λ‘μ¨λ λ³λμ νμ΅ κΈ°κ°λ νμνμ΄μ.
νμΌμλ React
곡μ λ¬Έμλ₯Ό ν΅ν΄ μ λ°μ μΈ λ΄μ©λ€μ 곡λΆνκ³ ,
μ€μ νλ‘μ νΈ κ΅¬νμ μ£Όλ§μ μ§μ€ν΄μ μ§νν΄μ μ£Όμ΄μ§ λ§κ°μΌλ³΄λ€ ν루 λΉ λ₯΄κ² κ³Όμ λ₯Ό μ μΆνμ΄μ.
3οΈβ£ κ³Όμ μ΄ν ν λ²μ κΈ°μ λ©΄μ
μ¬μ κ³Όμ μ΄ν μκ°λ³΄λ€ μμ² λΉ λ₯΄κ² κ²°κ³Όλ₯Ό λ°μ μ μμμ΄μ.
μ λ λ°€ 11μμ μ΄λ©μΌλ‘ μ μΆνλλ° λ°λ‘ λ€μλ μμΉ¨ 9μ 30λΆμ―€μ μ μ μΌλ‘
μ±μ© λ΄λΉ λ¦¬μΏ λ₯΄ν°λΆκ»μ μ°λ½μ μ£Όμ
¨μ΄μ.
μ΄ν μ μ μΌλ‘ μ±μ© λ©΄μ μΌμ μ μ‘°μ¨νκ³ λ³Έκ²©μ μΌλ‘ λ©΄μ μ€λΉλ₯Ό μμνκ² λμμ΄μ.
4οΈβ£ 3μΌκ°μ κΈ°μ λ©΄μ μ€λΉ
μ¬μ€ μ΄λ λΉμμλ νμ¬μΌμ΄ λ§μ΄ λ°λΉ μ λ©΄μ μ μ€λΉν μκ°μ΄ λ§μ§ μμ μν©μ΄μμ΄μ.
ν΄κ·Όμ λ¦κ² νκΈ° λλ¬Έμ λ³΄ν΅ ν루μ 1~2 μκ° μ λλ°μ μ¬μ κ° μμ§ μμμ£ .
κ·Έλμ μ νκ³Ό μ§μ€μ μν΄ μ κ° μ μΆνλ κ³Όμ μ μ½λμμ λμ¬ μ μμλ§ν μ§λ¬Έλ€μ μκ°ν΄λ΄€κ³
μ΄κ²λ€μ μμ£Όλ‘ μ 리νλ©° λ©΄μ μ μ€λΉνμ΄μ.
μ무λλ React
κ° μ΅μνμ§ μλ€λ³΄λ React
κ°μ΄λ λ¬Έμλ νλ² λ€μ μ½μ΄λ³΄κ³ κ³Όμ λ₯Ό ꡬννλ©°
κΆκΈνλ μ λ€μ 리μμΉλ₯Ό ν λ€ ν¬μ€ν νλ λ°©μμΌλ‘ 곡λΆνμ΄μ.
5οΈβ£ λ©΄μ D-Day, κ·Έλ¦¬κ³ ν©κ²© π
3μΌκ°μ λ©΄μ μ€λΉκ° λλ λ€, κΈμμΌ μ€μ 11μμ μΈμ±λ©΄μ + κΈ°μ λ©΄μ
μ ν¨κ» μ§ννμ΄μ.
μΈμ±λ©΄μ
μ κ²½μ°μλ λ¦¬μΏ λ₯΄ν° 1λΆκ³Ό ν¨κ» 1:1
λ‘ 30λΆ κ°λ νΈμν λΆμκΈ°μμ μ§νλμμ΄μ.
λ¦¬μΏ λ₯΄ν° λΆμ΄ μ§μμκ° κΈ΄μ₯νμ§ μλλ‘ μ΅λν λ°°λ €ν΄μ£Όμ
μ
μ λ μ΄λμ λ κΈ΄μ₯μ νκ³ μ΄ν λ©΄μ μ νΈμνκ² μ§νν μ μμ΄μ μ λ§ κ°μ¬νλ κΈ°μ΅μ΄ λμ π
μΈμ±λ©΄μ
μμλ μ£Όλ‘ μ κ° μ μΆν μ΄λ ₯μλ₯Ό λ°νμΌλ‘ νΈλ¦¬ν
μ μ§μ λκΈ°μ
νμ¬ λ€λκ³ μλ νμ¬μμμ κ²½νλ€μ μμ£Όλ‘ μ§λ¬Έμ μ£Όμ ¨μ΄μ.
μ κ°μ κ²½μ°μλ λ¦¬μΏ λ₯΄ν°λΆμκ² μ§λ¬Έν κΈ°νκ° μμ λ
μ κ° κ°κ³ μΆμ΄ μ§μν μ΄ νμ¬μ λν λ§μ§λ§ νμ μ μ»κ³ μΆμ΄μ
λ¦¬μΏ λ₯΄ν° λΆκ»μλ μ νΈλ¦¬ν
λ‘ μ΄μ§μ κ²°μ¬νκ² λ κ²μΈμ§ λ¬Όμ΄λ΄€μ΄μ.
μ΄λ λ¦¬μΏ λ₯΄ν°λΆκ»μ λ΅λ³ ν΄μ£Όμ λ΄μ©μ΄ μ΄λ λΉμ κ°νκ² κΈ°μ΅μ λ¨μκ³ ,
νΈλ¦¬ν
μμ κΌ μΌν΄λ³΄κ³ μΆλ€λ κ²°μ¬μ νλλ‘ μν₯μ μ£Όμμ΄μ.
νΉν μ 무μ λν λ°λλΌμΈμ μ°μ§ μλ λ¬Ένκ° μ λ§ λ§μμ λ€μμ΄μ!
κΈ°μ λ©΄μ
μ ν λ΄ μ€λ¬΄μ§ 3λΆκ³Ό ν¨κ» 1:3
λ©΄μ μΌλ‘ 1μκ° μ λ μ§ννμ΄μ.
κ°λ¨ν λΌμ΄λΈ μ½λ©κ³Ό μ¬μ κ³Όμ λ‘ μ μΆν μ½λμ λν μ§μμλ΅μ΄ μ΄λ£¨μ΄μ‘μ΄μ.
React
κ²½νμ΄ λ§μ§ μμκΈ° λλ¬Έμ μ΄λ₯Ό λ°°λ €ν΄μ£Όμλ λͺ¨μ΅μ΄ κ΅μ₯ν μΈμκΉμμ΄μ.
νμ΄ν μ§λ¬Έλ€λΆν° λ μΉ΄λ‘μ΄ κΈ°μ μ§λ¬Έλ€ λ± μ¬λμλ μ§λ¬Έλ€μ ν΄μ£Όμ
¨κ³
μ΄λ₯Ό ν΅ν΄ μ λν μ΄λ² λ©΄μ μμ λ§μ κ²μ λ°°μΈ μ μμμ΄μ.
μ¬μ€ λ©΄μ μ λ³΄κ³ λμλ νμ μ΄ μμ΄μ μΉν νμκ² νμμ°μ νμλ κΈ°μ΅μ΄ λλ€μ...
μ€λΉκ° μ’ λΆμ‘±νλ κ² κ°μλ€
, μ΄λ κ² λ΅λ³νμ§ λͺ»νλ κ²μ΄ μμ½λ€
λ± λ§μ ννκ° λ¨μκΈ° λλ¬Έμ
κΈμ μ μΈ κ²°κ³Όλ₯Ό κΈ°λ€λ¦¬κΈ°λ³΄λ€λ μ’μ κ²½νμΌλ‘ λ¨κΈ°μκ³ μκ°νμμ΄μ.
κ·Έλ λ μΌκ³Ό μ¬λμ μΉμ΄κ³ ν΄κ·Όνλ μ λ
,
λͺ¨λ₯΄λ λ²νΈλ‘ μ°λ½μ΄ μμ΅λλ€...!!!!!
μλ νμΈμ μ νλ, νΈλ¦¬ν μ±μ©νμ λλ€.
μΆνλ립λλ€. FE κ°λ° μ§κ΅°μ ν©κ²©νμ ¨μ΅λλ€!
λ©΄μ κ²°κ³Ό λ° μ²μ° νμλ₯Ό μν μλ₯ μ μΆκ±΄μΌλ‘ μ°λ½μ μ£Όμ
¨μ΅λλ€.
λ―Ώμ μ μλ μμμ λ무 κΈ°λ» μ¬λλ§κ³ μ‘°μ©ν λ²μ€ μμμ μ λ λͺ¨λ₯΄κ²
ν¬κ² ννΈνλ©° ν΅ννλ κΈ°μ΅μ΄ λλ€μ π
νΈλ¦¬ν
μΈ‘μμ κΈ°λ μ΄μμΌλ‘ λ§μ‘±μ€λ¬μ΄ μ²μ° νμλ₯Ό ν΄μ£Όμ
μ λͺ¨λ μ μ°¨κ° λΉ λ₯΄κ² λ§λ¬΄λ¦¬λμκ³
μ
μ¬μΌ μ‘°μ¨λ νμ¬ μ κ° κ·Όλ¬΄νκ³ μλ νμ¬ μ¬μ μ μ΄ν΄ν΄μ£Όμ
μ 무리μλ λ μ§μ μ
μ¬νκ² λμμ΅λλ€.
λ€μ νλ² μ±μ© λ΄λΉμλΆλ€κ³Ό κ°λ°νλΆλ€μκ² κ°μ¬λλ €μ βΊοΈ
π μ΄λ° νμ¬λ€λ ν¨κ» μ§μν΄λ΄€μ΄μ
νΈλ¦¬ν
μ΄μΈμ μ΄λ² μ΄μ§ μ€λΉκΈ°κ°λμ μ§μν νμ¬λ€μ λν νκΈ°μμ.
1οΈβ£ ν μ€ λ± ν¬
κ²½λ ₯ 2λ
μ΄ν
λ₯Ό λμμΌλ‘ λͺ¨μ§ν κ³΅κ³ μ μ§μνμ΄μ.
λ€νν μλ₯λ λΆμμΌλ... μ¬μ κ³Όμ κ° React λ‘ μ§νλλ€λ μ¬μ€μ μν μ΄ν μ μ΄λ©μΌλ‘ μκ² λμμ΄μ.
Reactλ 2λ
μ μ 곡μλ¬Έμ νλ² μ½μ΄ λ³Έκ² μ λΆμΈλ°.. μ΄κ±°λ‘ κ³Όμ μ νμ μ§νν μκ°μ νλκΉ
λμμ΄ μΊμΊν΄μ§λλΌκ΅¬μ.
μ΄λ λΉμμ νμ¬ μΌλ λ§μμ μ λ μΌκ·Ό ν κΈνκ² React λ₯Ό μ°Ύμλ³΄κ³ μνμ λ΄€μ§λ§..
λΉμ°ν React κΈ°λ³Έμ μΈ λμ μ리λ λͺ°λΌμ νμν κΈ°λ₯ ꡬννλ λ°©λ² μμΉνλλ°
λ λ§μ μκ°μ μ°λλΌ μ£Όμ΄μ§ κΈ°λ₯μ건μ μ λλ‘ κ΅¬νλͺ»νμ§λ§
κ·Έλλ μ΅μ μ λ€νκ³ μΆμ΄μ κΈ°νμ΄ λλ λ€μλ μ°ν΄ κΈ°κ°μ μνκ΄λ¦¬λ₯Ό μν
Context API
κ΄λ ¨ λ΄μ©μ 곡λΆνκ³ κ³Όμ μ λ°λ‘ μ μ©ν΄λ΄€λ κΈ°μ΅μ΄ λλ€μ.
λΉμ°ν κ²°κ³Όλ κ³Όμ μ ν λΆν©κ²©.. μΈμ€ μμμ§λ§ λ€νν κΈ°μ λ©΄μ κΉμ§ μ§ννκ² λμμ΅λλ€.
μλ§ μ£Όκ΄μ λ¬Έμ λ‘ μ μΆν λ΄μ©λ€μ λ³΄κ³ λ©΄μ μ μ§νν΄λ³΄μκ³ κ²°μ νλκ² μλμμκΉ.. μκ°μ΄ λλ€μ!
λλ¦λλ‘ μ΄μ¬ν κ³ λ―Όνκ³ κ°λ°νλ€κ³ μκ°νμ§λ§ μ½λ리뷰μμ μκ°νμ§ λͺ»ν λΆλΆμμ λ¬Έμ μ λ€μ΄ λ°κ²¬λλλΌκ΅¬μ.
μμΌλ‘ λ μ κ²½μ¨μ κ°λ°ν μ μλ λ°©λμ λν΄μ μκ°ν΄λ³΄λ κ³κΈ°κ° λμμ΄μ!
μ΄λ μ§μ ν νλ‘ νΈμλ κ°λ°μκ° λκΈ° μν΄ νμν λλͺ©μ΄ 무μμΌκΉ?
μ λν κΉμ κ³ λ―Όμ λΉ μ‘μ΅λλ€.
λ©΄μ λ νλ μ μ μ΄ μμ΄μ μ κ° λ¬΄μ¨λ§μ νκ³ μλμ§λ κΈ°μ΅μ΄ μ μλλ€μ..
μλ λ©΄μ μ΄λΌλκ±Έ 보면 λμΆ© κ°μ΄ μ€λλ°, μ΄λ μ λ©΄μ λ³΄κ³ νλ½ν μκ°μ΄ 20000% λ€μμ΄μ.
κ·Έλ¦¬κ³ λ°μ κ²°κ³Όλ λΆν©κ²©...π
μ§μ νλ€λ κΈ°μ΅μ΄ νλ¦Ών΄μ§ λ μ―€ μ μ μΌλ‘ μ°λ½μ΄ μλλ°, μΆν FE κ°λ°μ ν¬μ§μ μΌλ‘ κ³΅κ³ κ° μ΄λ¦¬λ©΄
μλ €μ£Όμ λ€κ³ νμ μ κ°μ¬ν©λλ€~ νκ³ κΈλ² μ±μ© μ νμ λ§λ¬΄λ¦¬νμ΄μ.
ν©κ²©μ λͺ»νμ§λ§ μ΄λ² μ±μ© μ νμ κ³κΈ°λ‘ React μ λν΄μ μ λλ‘ κ³΅λΆν΄λ΄μΌκ² λ€κ³ μκ°μ΄ λ€μμ΅λλ€.
κ·Έλμ λ°λ‘ λ€μλ React μ€ν°λλ₯Ό λͺ¨μ§νκ³ μ½ 3κ°μκ° μ§ννμ΅λλ€.
2οΈβ£ μμ΄λΈλ¦¬
컀머μ€μͺ½μλ κ΄μ¬μ΄ μμ΄μ μ§μνμ΄μ.
μμ΄λΈλ¦¬
λ μλ₯ μ¬μ¬ ν νμκ΄λ¦¬ νλ‘μΈμ€λ₯Ό ꡬννλ κ³Όμ κ° μ£Όμ΄μ‘μ΄μ.
3μΌκ°μ μ νμκ°μ΄ μμκ³ Vue
λ₯Ό μ΄μ©ν΄μ μꡬμ¬νμ κ°λ°ν λ€ μ μΆνμ§λ§
μμ½κ²λ λ©΄μ μ νκΉμ§ μ§ννμ§λ λͺ»νμ΄μ.
3οΈβ£ μ€μΌν°λ©, μΌμ©μΌ
μλ₯ ν΅κ³Ό ν μ€μΊν°λ©
μ μ½λ©ν
μ€νΈλ₯Ό, μΌμ©μΌμ μ¬μ κ³Όμ κ° μ 곡λμμ΄μ.
μ κ°μ κ²½μ° μ€μΊν°λ©
μ½λ©ν
μ€νΈ μ΄ν μ¬μ κ³Όμ λ₯Ό νλ² λ 보μκ³ μ°λ½μ΄ μμλ€μ.
μ¬μ κ³Όμ λ λ κ³³ λͺ¨λ React
λ₯Ό νμ©νλλ‘ μ μ½ μ‘°κ±΄μ΄ μμμ΄μ.
νμ§λ§ νΈλ¦¬ν
μ ν©κ²©νκΈ° λλ¬Έμ λ νμ¬ λͺ¨λ μ΄νμ νλ‘μΈμ€λ μ§ννμ§ μμμ΄μ.
π μ΄μ§μ μ€λΉνλ©° λλ μ λ€
μ΄λ² μ΄μ§μ ν΅ν΄ μ μ€μ€λ‘ μ£Όλμ΄ κ°λ°μλ‘μ λ°©ν₯μ μ μ‘κ³ μλμ§ μκ°ν΄λ³΄λ κ³κΈ°κ° λμμ΄μ.
μ무λλ νμ¬ λ€λκ³ μλ νμ¬μλ FE κ°λ°μκ° μ λ€λ³΄λ
μ€μ€λ‘ μ°λ¬Όμμ κ°κ΅¬λ¦¬κ° μλκΉ νλ κ³ λ―Όμ μ λ§ λ§μ΄ νμκ±°λ μ.
κ·Έλ¦¬κ³ κ³Όμ μ μ€λΉνλ©° μ€μ€λ‘ λΆμ‘±ν μ λ€λ μκ² λμκ³ κΎΈμ€ν¨μ μ€μμ±μ λ€μ νλ² λλΌκ² λμμ΄μ.
νΉνλ μ΄λ ₯μ μ
λ°μ΄νΈλ κΎΈμ€ν νλ κ²μ΄ μ’μ κ² κ°λλΌκ΅¬μ.
λ§μ μ΄λ ₯μλ₯Ό λ€μ μ°λ €κ³ νλ μ§ννλ μ
무λ€μ μ 리νκΈ° μ΄λ €μ κ³ μνλ κΈ°μ΅μ΄ λλ€μ.
μμ§μ μμΌλ‘ κ°κΈΈμ΄ λ¨Ό 2λ
μ°¨ FE κ°λ°μμ μμ κ²½νμ΄
μ¬λ¬λΆλ€μκ² μ‘°κΈμ΄λλ§ λμμ΄ λμμΌλ©΄ μ’κ² λ€λ κΈ°λμ ν¨κ» νκ³ λ₯Ό λ§μΉλλ‘ νκ² μ΅λλ€ π€
'βοΈ doodle' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
λμ 2022λ λλ μ΄λ μκΉ? (0) | 2022.12.31 |
---|---|
κ°λ°μ κ²½ν(DX) νΊμ보기 (0) | 2022.08.09 |
μ€λ¬Όμ¬μ―, μ€λ¬Όμ¬λ - 2λ μ°¨ FEκ°λ°μμ μ΄μ§ νκΈ° 1νΈ (7) | 2022.04.25 |
π¬ λκΈ