21λ λ 9μλΆν° 11μκΉμ§ μ μν Portfolistλ₯Ό μκ°ν΄λ³΄λ €κ³ ν©λλ€. μ μνμ§λ κ½€~ λκ³ 2μλ¬μ κΈ μ¨λκ² μκΉμ γ γ .. μ΄λ κ² νκΈ°λ₯Ό λ¨κ²¨λ³΄λ €ν©λλ€!
Portfolistλ portfolio + list λ₯Ό ν©μΉ ν©μ±μ΄μ΄λ©°, βν¬νΈν΄λ¦¬μ€λ₯Ό 곡μ νλ€βλΌλ μλ―Έλ₯Ό μ§λκ³ μμ΅λλ€. μ ν¬λ μ Portfolistλ₯Ό κ°λ°νμλμ§, μ΄λ€ κΈ°λ₯λ€μ΄ μλμ§ μ¬λ¬λΆλ€κ» μκ°ν κ²μ λλ€. κ·Έλ¦¬κ³ μ€μ¬μ© μ μ λ₯Ό λ°μλ³΄κ³ μλΉμ€λ₯Ό μ΄μν΄λ³΄κΈ° μν΄ μ΄ κΈμ ν¬μ€ν ν©λλ€. (μλ²κ° λ«νμ΅λλ€....)
ν¬νΈν΄λ¦¬μ€νΈλ κ°λ°μλ€μ μν ν¬νΈν΄λ¦¬μ€λ₯Ό κ°νΈνκ² μ μνκ³ κ³΅μ ν μ μλ μλΉμ€ μ λλ€.
κ°λ°μλ€μ μ·¨μ
νκ±°λ μ΄μ§ν λ ν¬νΈν΄λ¦¬μ€λ νμ 쑰건μ
λλ€!
μ΄λ€ κ²½νμ μμμλμ§λ₯Ό μκΈ° μν΄ νμ¬μ μ μΆν΄μΌλλ νμμ μΈ μλ₯ μ€ νλλ‘ ν¬νΈν΄λ¦¬μ€λ₯Ό μꡬν©λλ€. λ°λΌμ ν¬νΈν΄λ¦¬μ€λ₯Ό μμ μ μ€λ ₯μ΄ μ λλ¬λκ² μμ±νλ κ²λ μ·¨μ
μ±κ³΅μ λ§μ λΆλΆμ μ°¨μ§ν©λλ€. κ·Έλ¬λ μ²μ ν¬νΈν΄λ¦¬μ€λ₯Ό μμ±ν λμλ μ΄λ€ λ΄μ©μ΄ λ€μ΄κ°μΌ νλμ§, μ΄λ€ νμμΌλ‘ μμ±ν΄μΌ λλ₯Ό μ μ΄ννκ³ ννν μ μμμ§ λ§λ§νκΈ°λ§ νμ£ π₯
κ·Έλμ μ¬λλ€μ λ€μν ν¬νΈν΄λ¦¬μ€ μμλ₯Ό μ°Ύμ μμ μ ν¬νΈν΄λ¦¬μ€μ λ°©ν₯μ±μ μ‘κ³ μ μμ λ€μ΄κ°λλ€.
ν¬νΈν΄λ¦¬μ€μ μμλ₯Ό μ°Ύμλ³΄κ² λ λ ν¬νΈν΄λ¦¬μ€ μ°ΎκΈ°κΉμ§μ λ§μ μμΉλ₯Ό μꡬνμ¬ λ§€μ° λ²κ±°λ‘κ³ μκ°μ λΊκΈ°λ λλμ λ§μ΄ λ°μμ΅λλ€. κ·Έ ν ν¬νΈν΄λ¦¬μ€λ₯Ό νκ΅°λ° λͺ¨μμ λ³Ό μ μμΌλ©΄ μ’κ² λ€ λΌκ³ μκ°νμ΅λλ€.
λν βκ°λ° κΈ°μ λ€μ λν΄μλ λΈλ‘κ·Έλ μκ³ λ§μ μν΅μ νκ³ μλλ° μ ν¬νΈν΄λ¦¬μ€λ₯Ό 곡μ νλ©΄μ μν΅μ μꡬνλ μλΉμ€κ° μμ§?β λΌλ μλ¬Έμ λΉ μ§κ² λμμ΅λλ€.
κ·Έλμ μ ν¬λ ν¬νΈν΄λ¦¬μ€λ₯Ό μ μνκ³ κ³΅μ νμ¬ μν΅μ ν μ μλ ν¬νΈν΄λ¦¬μ€ 곡μ μλΉμ€λ₯Ό λ§λ€μ΄ λΆνΈν¨μ ν΄κ²°νκ³ μ ν©λλ€.
β Β ν¬νΈν΄λ¦¬μ€ μμ±μ ν΄μΌνλλ° μμμ΄ λ§λ§ν μ¬λλ€μκ² μ¬μ©μκ° μ¬λ¦° ν¬νΈν΄λ¦¬μ€λ€μ 곡μ νμ¬ μμ λ§μ λ μ°½μ±μλ ν¬νΈν΄λ¦¬μ€ μ μμ λ°©ν₯μ±μ μ‘μ μ μλλ‘ λμμ μ€λλ€.
β Β ν¬νΈν΄λ¦¬μ€μ λν΄ μ¬λ¬ μ¬λλ€κ³Ό λκΈ, ν°μΉ κΈ°λ₯μ ν΅ν΄ νλ°ν μν΅μ νλ©° μ 보 곡μ λλ νΌλλ°±μ΄ μ΄λ£¨μ΄μ Έ μ΄μ λ³΄λ€ λμ± μ±μ₯ν λλ‘ λ°μ ν μ μλ κΈ°νλ₯Ό λ§λλλ€.
β Β μ¬λλ€μ΄ μ€μ€λ‘ λ°μ μ νκ³ μΆμ΄λ 무μμ ν΄μΌ νλμ§ λ°©ν₯μ μ‘μ§ λͺ»νλ μ¬λλ€μ μμ κ³Ό λΆμΌμ κ°μ μ¬λλ€μ ν¬νΈν΄λ¦¬μ€λ₯Ό ν΅ν΄ μμ λ§μ λ‘λ맡μ μ€μ ν μ μλλ‘ λμμ€λλ€.
νλ‘ νΈμλ : React, Emotion, React-query, Recoil
μ²μ κ°λ°μ μμνμλμλ Recoilμ μ¬μ©νμ¬ λͺ¨λ μνλ₯Ό κ΄λ¦¬νμ΅λλ€.
νμ§λ§ μ μ°¨ μκ°μ΄ μ§λ μλ‘ Recoilμ λΆνΈν μ λ μκΈ°κΈ° μμνκ³ , μ λμ μΌλ‘ λ°μ΄ν°κ° ν¨μΉλκΈ°λ₯Ό μνλ μ ν¬ μλΉμ€μ λ¬λ¦¬ κ³μ 리ν¨μΉμ ν΄μ€μΌ λμ΅λλ€.
κ·Έλμ νλ°μ React-queryλ₯Ό λμ
νκ² λμκ³ ν¬νΈν΄λ¦¬μ€κ° λ±λ‘λ¨μ λ°λΌ μ λμ μΌλ‘ λ°μ΄ν°κ° λ³νλ μ μλλ‘ λ°μ΄ν°λ₯Ό μ²λ¦¬νμ΅λλ€.
ν¬νΈν΄λ¦¬μ€νΈλ μ λ§μ κΈ°λ₯λ€μ΄ μμ§λ§ κΌ μμ΄μΌ νλ λν κΈ°λ₯ 3κ°μ§λ₯Ό μκ°νλ €κ³ ν©λλ€.
ν¬νΈν΄λ¦¬μ€λ₯Ό λ§λ€κΈ° μν ν¬νλ¦Ώμ μ¬μ©νμ¬ μ¬μ©μλ€μ΄ μμ λ‘κ² ν¬νΈν΄λ¦¬μ€λ₯Ό μ μν μ μμ΅λλ€.
Portfolistμμ μ μν ν¬νΈν΄λ¦¬μ€κ° μλ, ν¬νΈν΄λ¦¬μ€λ₯Ό μ μν μνμ΄ μκ±°λ λ§ν¬κ° μλ€λ©΄ PDF νμμ νμΌ νΉμ λ§ν¬λ₯Ό 첨λΆνμ¬ μμ μ ν¬νΈν΄λ¦¬μ€λ₯Ό μ½κ² 곡μ ν μ μμ΅λλ€.
ν¬νΈν΄λ¦¬μ€λ₯Ό 곡μ νκ²λλ©΄ κ³΅κ° ν¬λ§ν μ¬μ©μλ§ ν¬νΈν΄λ¦¬μ€ νΈλλ§μ νμλ©λλ€.
μμ μ΄ λ³΄κ³ μΆμ λΆμΌλ₯Ό μ ννμ¬ ν¬νΈν΄λ¦¬μ€λ₯Ό νν°λ§ ν μ μμ΅λλ€.
ν¬νΈν΄λ¦¬μ€λ μ΅μ μ, μ€λλμμΌλ‘ μ λ ¬νμ¬ λ³Ό μ μμ΅λλ€.
ν¬νΈν΄λ¦¬μ€ μΉ΄νΈμ μλ ν°μΉ μμ΄μ½μ μ ννμ¬ λμ λ°μμ νν ν μ μμ΅λλ€.
νΉμ λ¨μ΄ κ²μμ΄λ, μ¬μ©μμ μ΄λ¦μ μμ±νμ¬ ν¬νΈν΄λ¦¬μ€λ₯Ό κ²μ ν μ μμ΅λλ€.
π λ€μν ν¬νΈν΄λ¦¬μ€λ₯Ό μμΈνκ² μ΄λν μ μμ΅λλ€.
𧑠ν°μΉ(μ’μμ) κΈ°λ₯μ ν΅ν΄ κ°μ₯ λ§μ ν°μΉμ λ°μ μ¬μ©μμκ²λ μ΄λ¬μ ν¬νΈν΄λ¦¬μ€μ λ±λ‘ λ μ μμ΅λλ€.
π¬ ν¬νΈν΄λ¦¬μ€μ λνμ¬ λκΈκ³Ό λλκΈ μμ±/μμ ν μ μμ΅λλ€.
β οΈ λΆμ μ μΈ λκΈμ μ κ³ κΈ°λ₯μ ν΅νμ¬ λκΈμ μ κ³ ν μ μμ΅λλ€.
μ£Όμ νκ² κ³ κ°μ΄ λκ° λ κ² μΈμ§μ λνμ¬ μ¬λ¬κ°μ§ κ°μ€μ μΈμ 보μμ΅λλ€!
ν¬νΈν΄λ¦¬μ€νΈμ μ£Όμ νκ² κ³ κ°μ μ€μ νμ¬ κ°μ€μ μΈμ보μμ΅λλ€.
μ·¨μ μ€λΉμ - μμ μ λν μ 보λ₯Ό 곡μ ν¨μΌλ‘μ μμ μ μλ¦¬κ³ , λ€λ₯Έ ν¬νΈν΄λ¦¬μ€μ 보며 μμ μ λ‘λ맡μ μ€μ νλ©° μ·¨μ μ μ€λΉν ν¬νΈν΄λ¦¬μ€λ₯Ό μ μν μ μμ΅λλ€.
ex) νμ¬ κ°λ°μλ‘ μ·¨μ μ μνλ Aμ¨κ° λ€λ₯Έ μ¬λλ€μ ν¬νΈν΄λ¦¬μ€λ₯Ό ν΅ν΄μ μμ μ λΆμ‘±ν μ μ μκ³ , κ·Έ μ μ 보μνκΈ° μν΄ μλ‘κ² λ‘λ맡μ μ€μ νκ³ , 곡λΆλ₯Ό νμλ€.
νμ - λ€μν ν¬νΈν΄λ¦¬μ€λ₯Ό ν΅ν΄ μμ μ΄ λμκ° λ°©ν₯μ μ€μ ν μ μμ΅λλ€.
ex) νμ¬ λλ§κ³ μ λ€λλ Bνμμ κ°λ°μλ‘μμ μ±μ₯μ μνμ¬ κ°λ°μμ ν¬νΈν΄λ¦¬μ€λ₯Ό 보며 μμ μ΄ μ΄λ€ κ²μ 곡λΆν΄μΌ νλμ§ κΉ¨λ«κ³ μμ μ΄ λμκ° λ°©ν₯μ μ€μ νμλ€.
ex) νμ¬ λλ§μ΄μ λ€λλ μ΄λ±νμ Aνμμ λλ§κ³ μ λ€λλ Bνμμ ν¬νΈν΄λ¦¬μ€λ₯Ό λ³΄κ³ κ°λ°μμ κΏμ ν€μλκ°, κ°λ°μκ° λκΈ° μν΄ λλ§μ€μ μ‘Έμ νκ³ λλ§κ³ μ λ€μ΄κ°λ€.
κΈ°μ - λ§μ μ¬λλ€μ ν¬νΈν΄λ¦¬μ€λ₯Ό κ°μ μ μΌλ‘ μ νμ¬ μΈμ¬λ₯Ό ꡬν μ μμ΅λλ€.
ex) μ’μ μΈμ¬λ₯Ό μνλ Sμ¬μμ μ¬μ§νλ C νμ₯μ΄ νμμ ν¬νΈν΄λ¦¬μ€νΈλ₯Ό μμ£Ό 보λλ°, μ΄λλ ν¬νΈν΄λ¦¬μ€λ₯Ό λ³΄κ³ μ’μ μΈμ¬κ° μλ κ²μ λ°κ²¬νλ€, Sμ¬μ μ§μν΄λ³΄μ§ μκ² λκ³ μ§μμ κΆμ νμλ€. κ·Έ μΈμ¬λ Sμ¬μ μ§μνμ¬ ν©κ²©μ νμκ³ , Sμ¬λ μ’μ μΈμ¬λ₯Ό ꡬνλ€.
μ¬μ§μ - μμ μ κ²½νμ ν΅ν΄μ λ€λ₯Έ μ¬λλ€μκ² μ‘°μΈμ μ€ μ μκ³ μμ μ ν¬νΈν΄λ¦¬μ€λ₯Ό 곡μ νμ¬ μκΈ° λ§μ‘±, μ±μ·¨λλ₯Ό μ»μ μ μκ³ μ’μ 쑰건μΌλ‘ μ΄μ§μ κΆμ λ°μ μ μμ΅λλ€.
ex) λλ§ νμ¬μ λ€λλ Dμ¨λ ν¬νΈν΄λ¦¬μ€νΈμ μμ μ ν¬νΈν΄λ¦¬μ€λ₯Ό κ²μνκ² λμλ€. Sμ¬ νμ¬μμ Dμ¨μ ν¬νΈν΄λ¦¬μ€λ₯Ό λ³΄κ³ μ΄μ§μ κΆμ νμ¬, μ’μ 쑰건μΌλ‘ Dμ¨λ Sμ¬μΌλ‘ μ΄μ§νλ€.
3κ°μ λμ νμνκ³ κ°λ°νλ©΄μ μμ΄λμ΄κ° λ무 μ’λ€κ³ μκ°νμ΅λλ€. κ·Έλμ κΌ λ°°ν¬ν΄μ μ€μ¬μ©ν΄λ³΄μλΌκ³ λ€μ§νμ§λ§ λ°©νμ΄ λ μ ν¬λ νμ§λΆμ§νκ² ν©μ΄μ§λ κ² κ°μ μ§κΈμ΄λΌλ λ°°ν¬νκ² μ€μλΉμ€λ₯Ό λμ
ν΄λ³΄μνμ¬ μ΄λ κ² λ°°ν¬κΉμ§νκ² λμμ΅λλ€. λ°°ν¬λ₯Ό νλ©΄μ μ€μ€λ‘ QAλ ν΄λ³΄κ² λκ³ QAκ° μ λ§ μ€μνλ€λ κ²μ μκ² λμλ νλ‘μ νΈμλ κ² κ°μ΅λλ€. 무μμ κ°λ°μ νκ²μ΄ μλλΌ μ μμ, κΈ°νμ, λμμΈ, κ°λ° λ€κ°μ΄ μ§ννλκ±°λΌ μ΄λ ΅κ³ νλ€κΈ΄ νμ§λ§ λͺ¨λ μ΄μ¬ν λ§λ€μ΄ λΏλ―νλ κ² κ°μμ. ν μ λΆ μ€μ¬μ© μλΉμ€λ μ²μμ΄κ³ μ΄μ¬ν μ μνκ³ λ§λ κ²μ΄λ μ¬λ¬λΆ λͺ¨λ ν λ²μ© μ¬μ©ν΄ μ£Όμκ³ νΌλλ°± λ¨κ²¨μ£Όμλ©΄ μ’μ κ² κ°μ΅λλ€. κ·Έλ¦¬κ³ κΈ°νκ° λλ€λ©΄ μ½λ리뷰κΉμ§ λ¨κ²¨μ£Όμλ©΄ μ λ§ κ°μ¬ν κ² κ°μ΅λλ€!!
κΈ΄κΈ μ½μ΄μ£Όμ μ κ°μ¬ν΄μ!
https://github.com/DSM-Portfolist
https://www.youtube.com/watch?v=TE1TaYrIe44
μ€μ€... UIμμ² μ΄μλ€μ! μ¬λ°λ μλΉμ€ μλ³΄κ³ κ°λλ€ γ γ