λ νν΄κ° μ§λκ°κ³ μλ‘μ΄ ν΄κ° μμλλ€.
νκ³ λ‘μ μμ±νκΈ°μ λ¦μ κ°μ΄ μμ§λ§, λ¦κ²λλ§ κΈ°λ‘νλ κ² λ°μ μ λμ± λμμ΄ λμ§ μμκΉ ν΄μ μμ±ν΄λ³΄λ 2022 νκ³ λ‘, μμ!
μμλλ‘ μ¨λ³΄μ λ μΈ κ³ π
2021λ 3νλ 1νκΈ°μ 5μ 곡μ λͺ°μ λ€μ ν μ°λ¬μ κ³μ νκΈ° νμ₯μ€μ΅ μΈν΄μ μ§νν¨κ³Ό λμμ κ°μΈμ μΈ μΌλ‘ μΈν΄ μ¬νκ² μ§μ³€μλ€. κ·Έλμ ννκΈ°λ₯Ό ν΄ννλ©° μ΄λμ λ μΌλ λ§λ¬΄λ¦¬νκ³ λ³΅κ΅¬μ μκ°μ κ°μ‘λ€.
λΉ λ₯Έ μ·¨μ μ΄ λͺ©νμκΈ° λλ¬Έμ 2022λ 1νκΈ°μ μνκΈ°λ‘ λ³΅ννλ€. μ§κΈ μκ°ν΄λ³΄λ©΄ κ΅μ₯ν μ ν μΌ μ€ νλλΌκ³ μκ°νλ€. νκ΅ νΉμ±μ 2νκΈ°μ μ νμ΄ μ μμ΄λ €μ μ€νλ € 1νκΈ°λ₯Ό νλ² λ λ€λλκ² μκ°νμ μ΄μ μ κ°μ§ μ μμλ λ―.
κ·Έλ μ§λ§ νμ€μ μΈ λ¬Έμ (μνλΉπΈ)λ‘ μΌμ κ·Έλ§λ μ μμ΄μ 2νλ λ νλ κ·Όλ‘μ₯νμμΌλ‘ λ€μ λ€μ΄κ°λ€. 1νκΈ° μ€μλ 곡λΆμ λ³ν κ°λ₯ν μμ€μ΄κΈ° λλ¬Έμ μ λΉν μ μ€μ¬κ°λ©° λ€λ λ€.
λ
Έλμμ κ·Όλ‘μ₯νμ (κ·Έλ§μ λ κ°λ μΌκ·Όκ³Ό μ£Όλ§μΆκ·Όμ΄ μλ..)
μ§κΈ 보λ λλ¦ μ΄μ¬ν μ΄μλ€ μΆλ€.
μ‘Έμ νλ‘μ νΈλ‘ 무μΈκ° λ§λ€μμ΄μΌ νλ€. μ΄λ―Έ μ΄λμ λ μ§μν μ§λ¬΄μ λν΄ νμ μ§μ μνμκ³ , νμ₯μ€μ΅ μΈν΄μ νλ©° λ§λ μΈμ°λ€κ³Ό μΉ μλΉμ€λ‘ μΊ‘μ€ν€λμμΈμ μ§νν΄λ³΄κΈ°λ‘ νλ€.
νμ¬ λ°°ν¬λ λ°±μλκ° λ©μΆ°μ μλνμ§ μμΌλ―λ‘.. μ΄λ―Έμ§λ‘λΌλ μ κΉ..
νμλ€κ³Ό λΈλ μΈμ€ν λ° νλ©° νμ μ§μ μμ΄λμ΄λ "νλ‘μ νΈ κ΅¬νκΈ° λ무 νλ€λ€! μ½κ² ꡬν΄μ€!" μλ€. μ¬μ€ νλΆ μ‘Έμ μλ€μ μμ€μ΄κΈ° λλ¬Έμ μμ² λλ¨ν νλ‘μ νΈλ μλμ§λ§ κ·Έλμ λ°°μ΄κ±Έ μ μ©νλ©° λ΄κ° μΌλ§λ λ°μ νλμ§ κ²μ¦νλ μ리λΌλ μκ°μ΄ λ€μλ€.
λ°±μλλ Spring bootλ‘, νλ‘ νΈλ Reactμ reduxλ₯Ό μΉμ΄ κ΄λ¦¬νλ€.
μ¬μ€ λ²μ¨ μ°λ€κ° λ λ² λ λ €λ¨Ήμ κΈμ΄λΌ μμμ΄ κΈκ°νμ§λ§ λ€μ λ§ μ‘κ³ μ¨λ³΄κΈ°λ‘...
κ²°λ‘ λΆν° λ§νλ©΄,, μ΄κ±΄ 2023λ μ λͺ©νκ° λμλ€! (μ λλ‘ μνλ€λ λ»)
μ κΈ° μ λΉμΉΈλ€μ 보μλΌ! μ¬μ§μ΄ 9μ μ μ κ±°μ μ νμλ€.
λ¬Έμ λ₯Ό νΈλ €λ λ Έλ ₯μ νμ§ μμ κ²μ μλλ€. λλ¦ κ³΅λΆνκ² λ€κ³ λμ리μμ μκ³ λ¦¬μ¦ μ€ν°λλ λ€μ΄κ°μ λλ¦ μ΄μ¬ν νΈλ €κ³ νμΌλ κ²°λ‘ μ μΌλ‘λ 20λ§μμ λ²κΈμ λΌ λ» νλ€κ° μ°©ν μ€ν°λμλ€μ λ°°λ €λ‘ μ λΉν λ²κΈμ μ§λΆνλ€...
λ¬Έμ μ μ λμ΄ν΄ 보μλ©΄
λ²κΈμ΄ μλ μ λμ κ²½μ° λΉλ€μ΄μ§λ©΄ "λ²κΈ λ΄κ³ λ§μ§ λ"μ νλλ‘ λ³μ§ λ μ μλ€. λ΄κ° κ·Έλ° νλλ‘ μν κ²μ μλμ§λ§ κ²½κ°μ¬μ μ€νλ € μ€μ΄λ λΆλΆμ΄ λ μλ μλ€λ μ΄μΌκΈ°λ€.
κ±°κΈ°λ€ λ¬Όλ¦¬μ μΌλ‘ μκ°λ λ§μ§ μμλ€. 1νκΈ°λΆν° 2νκΈ° μ΄λ°κΉμ§λ νλ‘μ νΈ-μ‘Έμ
νλ‘μ νΈ-곡λͺ¨μ μΌλ‘ μ΄μ΄μ§λ μ€μΌμ€λ‘ κ°ν μ΄μΈμ μ΄μλ€κ³ ν μ μμκ³ , 2νκΈ° μ€λ°λΆν°λ κ·Όλ‘μ₯νμ μΌμ΄ λ무λ λ°λΉ μ Έμ μΌκ·Όκ³Ό μ£Όλ§μΆκ·Όμ λ°₯λ¨Ήλ―μ΄ νλ©° 물리μ μΌλ‘ μκ³ λ¦¬μ¦μ μκ°μ μλ κ² μ΄λ €μ λ€.
μ€ν°λμλ€μκ²λ μν΄λ₯Ό ꡬνκ³ λμλ€. λ€λ₯Έ κ°μ λ°©μμ΄ νμνλ€κ³ μκ°νλ€.
κ·Έλμ 1μμ΄ λλκ°λ μ§κΈμ λλ¦ μ΅μ₯ μ€νΈλ¦(κ·Έλλ΄€μ 14μΌ)μ μ μ§νλ μ€μ΄λ€.
μμΌλ‘ 1μΌ 1λ¬Έμ λ μ΅κ΄μ λ€μ¬μ μλλ°μ μ μ§νκ³ μΆλ€.
λλΆμ΄ 1μμ λλμ΄ solved.ac 골λλ₯Ό μ°μλ€!!! π μλ¬΄νΌ μ΄μ μ΄μ¬ν νλ μ€
μ·¨μ
μ€λΉλΌκ³ μ°κ³ .. λ±ν μ λλ‘ ν κ²μ μκ³ κ·Έμ νλ‘μ νΈλ₯Ό μ¬λ¬κ° νλ€.
μ¬ν΄λ μ§μ§λ‘ μ·¨λ½νλ κ±Έλ‘ νκ³ ..! νλ‘μ νΈ μκ°λ ν΄λ³΄μ
React.js
Redux-Saga
Styled-Component
λͺ¨λ TILμ λͺ¨μ보μλΌλ μμ΄λμ΄μμ μΆλ°ν νλ‘μ νΈλ‘ μ¬μ©μμ github, tistoryκΈλ€μ μ°λν΄μ ν λμ λͺ¨μλ³Ό μ μλ€.
μ¬μ€ μ΄μ λ
λμ νλ νλ‘μ νΈμ λΉν΄μ μμ±λκ° νμ°Έ μ¬λΌκ°κ³ Reactμ λν κΈ°μ λ ₯μ νμ°Έ λμ΄μ¬λ¦΄ μ μμλ μ’μ κΈ°νμλ€κ³ μκ°νλ€.
κ°μΈμ μΌλ‘ μ΄λ €μ λ κ²μ Reduxμ ꡬ쑰λ₯Ό νμ
νλ κ²μ΄ μ΄λ €μ λλ°, μ μ μ¬μ©λ²μ μ΅νλ©° ꡬ쑰λ κΉ¨λ¬μμ§λ§ λ°λ©΄μ Reduxλ₯Ό μ΄μ©ν api ν΅μ ꡬ쑰 μ체μ 볡μ‘ν¨μ λλΌκΈ°λ νλ€.
React.js
React-query
Styled-Component
TTL νμλ€κ³Ό ν¨κ» KBSCμ 곡κ°SWμ μ°Έκ°νκΈ° μν΄ νκ²½μ μ£Όμ λ‘ λ§λ νλ«νΌ μλΉμ€λ€.
νκ²½μ λμλλ μ€μ²μ ν΅ν΄ ν¬μΈνΈλ₯Ό λͺ¨μ λ©Έμ’
μκΈ°μ’
λλ¬Όλ€μ λ΄ μ¬μ λ°λ €μ€μλ κ·μ¬μ΄ μμ΄λμ΄μμ μΆλ°νλ€.
μ΄λ²μ μ νλ‘μ νΈμμ λλ Reduxμ λ¨μ μ React-Queryλ₯Ό λμ
νλ©΄μ κ°μ ν΄λ³΄κ³ μ νλ€.
μ²μ React-Queryλ₯Ό μ¬μ©ν΄ λ³Έ μκ°μ μ§κ΄μ μ΄κ³ κΉλν κ΄λ¦¬, μΊμ±μ ν΅ν ν¨μ¨μ μΈ λ°μ΄ν° μμ²μ΄ λμ λ보μλ€. Suspenseλ±μ νμ©λ μΈμκΉμλ€.
λ€μ νλ‘μ νΈλ₯Ό νκ² λλ€λ©΄ μ‘°κΈ λ μμΈν 곡λΆνκ³ μ¬μ©νκ³ μΆλ€.
PeacePieceμμ λ΄κ° λ§‘μ κΈ°λ₯ μ€ μΈμκΉμλ κ²μ μ΄λͺ¨μ§ νΌμ»€ κΈ°λ₯μΈλ°, λ무 κ·μ¬μ΄ μΈν°νμ΄μ€λ₯Ό λ§λ€μ μμκ³ react-queryμ optimistic updateλ₯Ό ν΅ν΄μ μ¦κ°μ μΈ νΌλλ°±μ λ°μν μ μμ΄ κΉλν ꡬμ±μ΄ λμ§ μμλ μΆλ€.
κ±°κΈ°λ€ νλ‘μ νΈμμλ μ΅μ΄λ‘ tsλ₯Ό μ¬μ©νλλ°, tsμ μ₯μ λ§μ μ€λ‘―ν λλ μ μμλ€. ts λ§μΈ
μ¬μ€ κΈμ μ°λ μ§κΈ μ΄μκ°κΉμ§λ μμ¬μ΄μ μ΄ 987654321κ°λ λλ κ² κ°λ€.
μΌλ¨ κΈ μμ± νλ€κ° μΈλΆ λ§ν¬ λλ¬μ λκ°λ€κ° λ€λ‘ κ°κΈ° λλ¬μ κΈμ΄ λ λΌκ°κ²λ§ λλ²μ΄λΌ λ§€μ° μ¬μ μΌλ‘ λΆμνκ³ , μ‘°κΈν λ§μμΌλ‘ μ¨μ λ§μΆ€λ²μ΄ νλλ μ λ§λ κ² κ°μ λμ€μ κ³ μ³μΌμ§ νκ³ μΌλ¨ μ¬λ¦¬λ €κ³ νλ€...
2022λ
μ μΆμ§λ ₯μ μν λμλΏκΈ°λΌκ³ μκ°νκ³ μΆλ€.
μ¬ν΄λ μ λ§λ‘, μ λ§λ‘ μ·¨μ
μ ν΄μΌ νκΈ°μ! 2023λ
μ μν μΆμ§λ ₯μ λͺ¨μΌλ..
λ§μ§λ§μΌλ‘ 2022λ μ μ΄λ―Έ λλ¬μ§λ§ νν΄λμ λμμ λ§μ΄ λ°μ μ νλΈ νλ λ¨κΈ°κ³ κ°μΌμ§