π©π»π» Weekly I Learned π β¨ μ΄λ² μ£Ό λ§λ¬΄λ¦¬νλ©° λ°±μλκ°λ°μ λΆλ€κ³Ό ν¨κ»νλ ν΄λ‘ μ½λ© νλ‘μ νΈλ₯Ό μμνλ©΄μ githubμ λ§μ΄ νμ©ν΄λ³Έλ€λκ° νλ λͺ©νλ€μ΄ μμλ€. μ’μ νμλΆλ€μ λ§λμ λ€μν κ²λ€λ μ¬μ©ν΄λ³΄κ³ 곡λΆν μ μλ μ£Όκ°μ΄μλ κ² κ°λ€. λ€λ§, νλ‘μ νΈμ λ§λ°μ§ λ μ‘°λΆμμΌλ‘ 2μΌ μ λλ₯Ό λΉ μ‘μ΄μΌ νμκΈ°μ μμ λν
μΌμ μ‘λ μμ
λ€μ λ§μ΄ μ°Έμ¬λ₯Ό λͺ» νλ μ μ΄ λ§μ΄ μμ¬μ λ€. λμ λΆμ¬λ₯Ό μ±μμ€ νλ‘ νΈνμλ€μκ² λ무 κ°μ¬νλ€. π μ§λμ£Ό λ―Έλ νλ‘μ νΈλ₯Ό μ§ννλ©΄μ λ°°μ λ λ΄μ©μ 50% μ΄ν΄νμλ€κ³ μ μμλλ°, μ΄λ² νλ‘μ νΈλ₯Ό ν΅ν΄μ 80% μ΄ν΄νκ² λ κ² κ°λ€. μμ§λ 100%κ° μλκ±°λ?! λΌλ μκ°μ μ‘°κΈν λ§μμ΄ μμ§λ§ μ겨λλ μ€λ₯λ₯Ό λ§μ£Όνλ©΄μ νμ΄λκ°λ κ²λ€μ μ‘°..
π©π»π» Today I Learned π β¨ νμ
νμ
! νμ
! μ§λ μ£Ό κΉνμ μ¬μ©ν νλ‘ νΈλ€λΌλ¦¬μ νμ
μ μ λλ‘ νμ§ λͺ» νκΈ° λλ¬Έμ μ΄λ² μ£Όμ νλ ν΄λ‘ μ½λ©μμλ νλ‘ νΈλ€λΌλ¦¬μ νμ
μ λν λΆλΆμ μ ν΄λ³΄κ³ μΆλ€λΌλ μκ°μ κ°μ§κ³ νλ‘μ νΈμ μνλ€. λ°±μλλΆλ€μ μ§λ μ£Όμ λ¬λ¦¬ μ€νλ§μ νμλ λΆλ€μ λ§λ¬κ³ , μ°λ¦¬κ° ν΄λ‘ νκΈ°λ‘ ν μλΉμ€λ “λΉκ·Όλ§μΌ”. μΉ λ²μ Όλ³΄λ€λ μ± λ²μ Όμ μΉμΌλ‘ κ°μ Έμ€λ μμ λ°©μμ ννλ€. ⨠ꡬ쑰μ λ°μ΄ν° νλ¦ κ΅¬ν κ³νμ λ°λΌ κ°λλΌ μ μ μμλ μ§λ μ£Όμ λ¬λ¦¬ μ΄λ² μ£Όλ ν¨μ¬ λ νννκ² μ²΄κ³μ μΈ νλ¦μΌλ‘ νλ‘μ νΈλ₯Ό μμν μ μμλ€. githubμ λ€μν λ©λ΄λ€μ μ κ·Ή νμ©νκΈ°λ‘ νκ³ κ΅¬ν κ³νμ μ΄κΈ° λ¨κ³λΆν° νννκ² μ‘μμ github mergeμ νΌλμ€λ¬μμ μ΅..
π©π»π» Weekly I Learned π μ£ΌνΉκΈ° 3μ£Όμ°¨λ₯Ό λ€ λ§λ¬΄λ¦¬ μ§κ³ λμ μ²μμΌλ‘ λ°±μλ κ°λ°μλΆλ€κ³Ό ν¨κ» μ§ννλ νμ
! μ΄μ μ μ¬λ¬ λͺ
κ³Ό νμ
ν΄μ μ§ννλ μ μ΄ μμκΈ° λλ¬Έμ μ΄λ²μλ κΉνλΈ μ¬μ©μ μ ν리!! λΌκ³ λ€μ§νλ©° μ§ννλ€. μ΄λ² νμ
μ ν΅ν΄μ μ‘κ³ κ°μΌν κ² μλ€λ©΄ κΉν μ¬μ©λ²κ³Ό μ§λ μ£Ό κ³Όμ μμ μ λλ‘ μ΄ν΄νμ§ λͺ»ν λΆλΆλ€μ΄λΌκ³ μκ°νλ€. κ·Έλ¦¬κ³ λ°±μλ κ°λ°μλΆλ€κ³Ό μ²μ ν΄λ³΄λ νμ
μ΄μκΈ°μ, μλ‘μ λν λ°°λ € + μ΄ν΄κ° μ μΌ μ€μνλ€κ³ μκ°νλ©° μ§ννλ€. λ€νμ΄λ ν¨κ» νλ λ°±μλ κ°λ°μλΆλ€μ λ무 μ°©νμ
¨κ³ λ§μ λ°°λ €λ₯Ό ν΄μ£Όμ
¨λ€ ππ» β¨ νλ‘μ νΈ μκ° νλ‘μ νΈ : Together μ§λ μ£Ό κ³Όμ λ₯Ό λ² μ΄μ€λ‘ νλ νλ‘μ νΈλ μ§ννμλ€. “ν¬κ²λ” λΌλ μ΄λ¦μ κ°λ° μ€ν°λ λͺ¨μμ λ§λ..
π λ°±μλκ°λ°μλΆλ€κ³Ό 첫 νμ
! μ΄λ²μ£Ό νλ‘μ νΈλ₯Ό μμμΌλ‘ μ΄μ λ°±μλ κ°λ°μλΆλ€κ³Όμ νμ
μ΄ μμλμλ€! μ²μ ν΄λ³΄λ νμ
μ΄λΌμ κΈ΄μ₯λλκ³ μλ‘μ μΈμ΄μ νλ‘μΈμ€λ₯Ό μ΄ν΄νμ§ λͺ» ν κΉ κ±±μ μ λ§μ΄νμ§λ§ 4μΌμ΄ μ§λ μ§κΈκΉμ§ 무리μμ΄ μ μ§νλμ΄κ°λ κ² κ°λ€! ν¨κ» νλ λ
Έλκ°λ°μλΆλ€λ νλ‘ νΈκ° μΌμ΄ λ§λ€κ³ μμ² λ°°λ €ν΄μ£Όμκ³ λμμ£Όμ
¨λ€! API λͺ
μΈλ₯Ό μ μ΄λ΄λ €κ°λ©΄μ λμμ μμ΄μ΄νλ μ μμ
λ ν΄μ νλ‘μ νΈμ μ¬μ©λμ΄μΌ ν λΆλΆλ€μ κΌΌκΌΌν μ±κΈ°κ³ νμν΄μΌνλ λΆλΆμ μ μ±κ²Όλκ² κ°λ€. νμ¬λ μλ²κ°λ°μ λλμ νλ‘ νΈ ννΈκ° μ€λΉκ° λλ©΄ axios λ₯Ό μ΄μ©ν΄μ μ°κ²°νλ©΄ λλ€! μμ§ νλ‘ νΈννΈκ° λ€ μ€λΉκ° λμ§μμλ€. λ΄κ° λ§‘μ λΆλΆμ μΌμΆ 리λμ€κΉμ§ μ§νλμλλ°, λ‘κ·ΈμΈ, νμκ°μ
ννΈκ° μ λ§ μμν΄μ μ΄λ ΅λ€λ..
π©π»π» Weekly I Learned π β React μ μμνκ΄λ¦¬ μ μ μν κ΄λ¦¬λ, λ§ κ·Έλλ‘ μ μμμ μνλ₯Ό κ΄λ¦¬νλ€λ λ§μ
λλ€. 리μ‘νΈμμλ μμμμ νμλ‘ μν κ°μ μ λ¬νλ©° κ΄λ¦¬λ₯Ό νκ² λλ μμ€ν
μ
λλ€. μλμ μ¬μ§μ²λΌ 리μ‘νΈ νλ‘μ νΈλ₯Ό λ§λ€λ€λ³΄λ©΄ μλ§μ μ»΄ν¬λνΈλ€μ΄ λ°μν©λλ€. μ΄ λ μνκ°μ μ λ¬ μ λ¬νκ² λλ©΄ λΉμ°ν ν·κ°λ¦¬κ³ , νμμλ κ°λ μ λ¬νκ² λλ μν©μ΄ λ°μνκ² λ©λλ€. μ΄ λ λΆνμν propsλ₯Ό μ λ¬λ°μμΌνλ μν©μμ props drilling μ΄λΌλ λ¬Έμ κ° λ°μνκΈ°λ ν©λλ€. props drilling 리μ‘νΈ μ»΄ν¬λνΈμμ λ€λ₯Έ λΆλΆμΌλ‘ λ°μ΄ν°(props)λ₯Ό μ λ¬νλ κ³Όμ μμ μ€λ‘μ§ μ λ¬λ§μ μν΄μ μ¬λ¬ μ»΄ν¬λνΈλ₯Ό κ±°μΉλ μν©μ λ§ν©λλ€. μ΄λ° λΆνμν props dril..
π©π»π» Today I Learned π μ΄λ² μ£Ό κ°μΈ κ³Όμ μλ λ§€κ±°μ§ μ¬μ΄νΈ λ§λ€κΈ° – μΈμ€νκ·Έλ¨κ°μ λλμ μ¬μ΄νΈμλ€. λ€μν μꡬμ¬νλ€μ΄ μλ κ³Όμ μλλ° μ¬μ€ μ λλ‘ μ ꡬννλ€κ³ 100%λ‘ μ₯λ΄μ ν μκ° μλ€. μμ½κ²λ λ§μ΄λ€. μ΄λ² μ£Ό κ³Όμ λ μμμΌμ΄λ©΄ λ€ μμ±νκ² μ§? λΌκ³ μκ°νμλλ°, λ§μ§λ§ λ§κ°κΉμ§λ μ’μμ λ²νΌ κΈ°λ₯ λ²κ·Έλ₯Ό μ‘μλ΄μ§ λͺ»ν΄μ λ°λλΌμΈμ§μ κΉμ§λ μ½λλ₯΄λ₯΄ λ§μ§κ³ μμλ€. mitter λΌκ³ μ΄λ¦μ μ§μ΄ μ€ μ΄λ² λμ νλ‘μ νΈ! μΈμ€νκ·Έλ¨κ°μ μ΄λ―Έμ§ 곡μ κΈ°λ° sns μ€νμΌμΈλ° μ΄λ¦μ νΈμν°μμ κ°μ Έμλ€ γ
ν μ£Ό λμ ꡬν ν΄λΈ κΈ°λ₯λ€μ λμ΄ν΄λ³΄μλ©΄ λ‘κ·ΈμΈ νμκ°μ
κ²μλ¬Ό μΆκ° κ²μλ¬Ό μ‘°ν κ²μλ¬Ό μμ (+μ¬μ
λ‘λ / λ μ΄μμ λ³κ²½) κ²μλ¬Ό μμ 무ν μ€ν¬λ‘€ λκΈ μ°κΈ° μ’μμ ..
π©π»π» Today I Learned π π TODAY 무ν μ€ν¬λ‘€ ꡬννλ©΄μ μ€λ₯λ₯Ό λ§λ¬λ€. λμ€μ λ©ν λμ λΆμ‘κ³ 40λΆκ°λμμλλ° κ²°κ³Όλ μ€νλ‘ μΈν μ€λ₯μλ€ π 무ν μ€ν¬λ‘€μΈλ°, μ€ν¬λ‘€μ νλ©΄ μ΄λ°μ λΆλ¬μ§λ κ°μ κΈΈμ΄λ§νΌ λκ°μκ² λ°λ³΅μ μΌλ‘ λ‘λ©μ΄ λμλ€. 무ν λ λλ§μ΄ λλ μ€ μκ³ λ°μ΄ν°λ² μ΄μ€ μ΄μ©? μ΄λ¬λλ° κ·Έκ±΄ μλμλ€. 무ν μ€ν¬λ‘€ μ»΄ν¬λνΈμ λ£κ²¨μ£Όλ propsκ° μ€μ 리λμ ν¨μμμ λμ΄μ€λ κ° μ€μ μ€νκ° μμ΄μ λ‘λ©μ΄ μ λλ‘ μ΄λ£¨μ΄μ§μ§ μμλ κ²μ΄λ€. μ€λ μκ² λ console.log()μ ν. λ©ν λκ³Ό νλ νλμ© λ€ μ°μ΄λ³΄κ³ κ°μ΄ μ λλ‘ μ λ€μ΄μ¨κ² μμ΄μ κ·Έκ±°λΆν° κ³ μ³λ³΄μ μΆμ΄μ κ³ μΉλ¬ κ°λ€κ° λ°κ²¬ν μ€ν. κ·Έλ¦¬κ³ ν΄κ²°λ μ€λ₯. …κ·Έλ¦¬κ³ λ°λ €μ€λ λ―Όλ§ν¨. μ μ€λ₯ λλ¬Έμ 2..
π TODAY μ€λ ν루 λμ firebaseλ₯Ό μ΄μ©ν΄μ κ²μλ¬Όμ μ¬λ¦¬λ κ±Έ λ€ ν μ μμ κ±°λΌκ³ μκ°νλλ°, νμ΄μ΄λ² μ΄μ€μ μ°λν΄μ λ‘κ·ΈμΈ/νμκ°μ
κΈ°λ₯ ꡬνμ΄ μ΄λ €μ λ€. λ°μ΄ν°λ² μ΄μ€μ κΈμ μ¬λ¦¬κ³ μλ―Έμ§κΉμ§ μ¬λ¦¬λλ° μ μ νλ¦° λμ΄ λμ΄μ κ°μλ₯Ό λ³΄κ² λλ κ² κ°μλ€. μ΄λ κ² κ°μλ₯Ό 보면μ νλ‘μ νΈλ₯Ό ν΄λκ°λ©΄ λλκ±΄κ° μ΄κ² 머리μ λ¨λ? μ΄λ° μμ¬μ΄ λ λ€κΈ° μμνλ€. κ·Έλ°λ° νμ€ν μ½λλ₯Ό μ μ΄λκ³ κ΅¬νμμΌλ³΄κ³ λ€μ κ·Έ μ½λλ₯Ό νλ² λ 보면 νμ€ν κΈ°λ₯ ꡬνμ νλ¦μ μ λ³Ό μ μλ κ² κ°κΈ°λ νλ€. μ΄μ μ κ² κ°μΌλ©΄μλ μ μ λ―ΈκΆ μμΌλ‘ λΉ μ§λ λλ. κ·Έμ λμμ μμ κΈ°λ₯λ€μ΄ νλ,λ ꡬνλλκ² λμ 보μ΄λ λΏλ―ν¨κ³Ό λμμ μ¬λ―ΈκΉμ§ μμΌλ λ©μΆμ§ λͺ»νκ³ κ³μνλ κ² κ°λ€. μ€λ κ΅μ₯ν μκ°μ ..
π©π»π» Today I Learned π π TODAY 리μ‘νΈ μ
λ¬Έμ£Όκ° λͺ¨λ λλκ³ μ¬νμ£Όμ°¨κ° μμλμλ€. κ°μΈ κ³Όμ λ‘ λΆμ¬λ°μκ² μνλ§, λ§€μ΄λ§μ΄ μλλ° μνλ§λ μνλ§μ΄ μλμλ€. γ
μνλ§μΌλ‘ λΆμ¬λ°μ κ³Όμ λ μ½κ°, μ±ν
κΈ°λ₯μ΄ λΉ μ§ νΈμν°κ°μ λλ π΅ λμ μ μ μ΄ ν! μΌμ΄λλ©΄μλμ΄ νκΈνκΈ λλ λλμ λ°μλ€. λ‘κ·ΈμΈ νμ΄μ§ νμκ°μ
νμ΄μ§ λ©μΈ νμ΄μ§ λ‘κ·ΈμΈ κΈ°λ₯ ꡬν νμ΄μ΄λ² μ΄μ€ νμκ°μ
μ°κ²° λ₯Ό λλΈ μν©μΈλ°, μ¬μ€ μ»΄νΌλνΈλ₯Ό μͺΌκ°μ ꡬννλ κ²λ§ ν΄λ΄€μ§ elementκΉμ§ μͺΌκ°μ ꡬνν΄λ³΄λ 건 μ²μμ΄λΌμ μ λ§ μ μΈκ³μ΄λ©΄μλ λͺ¨λ°μΌ, νλΈλ¦Ώκ°μ건 μ¬μ΄μ¦λ₯Ό μ΄λ»κ² μ‘°μ νμ§? λΌλ μκ°μ΄ λ€μλ€. μ’ λ κΈ°λ₯ ꡬνμ΄ μ΄λ£¨μ΄μ§λ§ λν
μΌνκ² viewλ₯Ό λ€λ¬μ κ³νμ΄λ€. π TOMORROW λ‘κ·ΈμΈ μ μ§..
π©π»π» Weekly I Learned π μ΄μ μ 리μ‘νΈμ λΌμ΄ν μ¬μ΄ν΄μ λν΄μ ν¬μ€ν
μ ν μ μ΄ μλλ°, μ΄λ²μλ 리μ‘νΈμ ν΄λμ€ν , ν¨μνμ λ°λ₯Έ μ¬μ΄ν΄μ λ©μλμ λν μμΈν μ΄μΌκΈ°λ₯Ό ν΄λ³΄λ €κ³ νλ€. β λΌμ΄ν μ¬μ΄ν΄ (ν΄λμ€ν) ν΄λμ€νμμ λΌμ΄ν μ¬μ΄ν΄μ μΈμΈνκ² λλλ©΄ μ΄ 9κ°κ° μ‘΄μ¬νλ€. μ΄ μ€μμ μΉ΄ν
κ³ λ¦¬λ₯Ό λλ 보μλ©΄ ν¬κ²λ 3κ°μ§λ‘ λλλλ°, μμ±μ΄ λ λ(Mount), μ
λ°μ΄νΈ λ λ(Update), μ¬λΌμ§ λ(Unmount) μ΄λ€. μ΄ν΄λ₯Ό λκΈ° μν΄μ μμ μ 첨λΆνλ μ¬μ§μ΄μ§λ§ νλ² λ 첨λΆν΄λ³Έλ€. β λΌμ΄ν μ¬μ΄ν΄ λ©μλ 1οΈβ£ constructor ν΄λμ€ν μμ±μλΌλ λ§μ΄λ€. ν΄λμ€ν μ»΄ν¬λνΈλ₯Ό λ§λ€ λ μ²μμΌλ‘ μ€νλλ€. μ΄ λ©μλμ μ΄κΈ° stateλ₯Ό λ£μ μ μλ€. ν¨μν ..
π©π»π» Today I Learned π β TDZ? TDZ(Temporal Dead Zone) λ, νκΈλ‘ μ§μνμλ©΄ μΌμμ μΈ μ¬κ°μ§λλ λ». →μ€μ½νμ μμ μ§μ λΆν° μ΄κΈ°ν μμ μ§μ κΉμ§μ ꡬκ°μ TDZ(Temporal Dead Zone) λΌκ³ ν©λλ€. β λ³μ μμ± κ³Όμ μ μΈ λ¨κ³(Declaration phase) : λ³μλ₯Ό μ€ν 컨ν
μ€νΈμ λ³μ κ°μ²΄μ λ±λ‘νλ λ¨κ³λ₯Ό μλ―Έν©λλ€. μ΄ λ³μ κ°μ²΄λ μ€μ½νκ° μ°Έμ‘°νλ λμμ΄ λ©λλ€. μ΄κΈ°ν λ¨κ³(Initialization phase) : μ€ν 컨ν
μ€νΈμ μ‘΄μ¬ νλ λ³μ κ°μ²΄μ μ μΈ λ¨κ³μ λ³μλ₯Ό μν λ©λͺ¨λ¦¬λ₯Ό λ§λλ λ¨κ³ μ
λλ€. μ΄ λ¨κ³μμ ν λΉλ λ©λͺ¨λ¦¬μλ undefinedλ‘ μ΄κΈ°ν λ©λλ€. ν λΉ λ¨κ³(Assignment phase) : μ¬μ©μκ° u..
π©π»π» Today I Learned π β¨ μ΅μ
λ 체μ΄λμ΄λ? κ·Έλ₯ μ€μ½- λ³΄κ³ μ§λκ° λλ μΌνμ°μ°μμ μ΄λκ±°λ₯Ό λ€λ₯΄κ² λ§νλ건κ°? λΌλ©° κ°λ³κ² μκ°νκ³ μ°Ύμλ΄€λλ° κ·Έλ°κ² μλμλ€. ……… Optional Chainingμ ES2020μμ λ±μ₯ν μλ‘μ΄ μ°μ°μλ‘μ ‘?.’ μ ννλ‘ μ¬μ©νλ©° 체μΈμΌλ‘ μ΄λ£¨μ΄μ§ κ° μ°Έμ‘°κ° μ ν¨νμ§ λͺ
μμ μΌλ‘ κ²μ¦νμ§ μκ³ μ°κ²°λ κ°μ²΄ μ²΄μΈ λ΄μ κΉμν μμΉν μμ± κ°μ μ½μ μ μλ μ°μ°μμ΄λ€. 체μ΄λ μ°μ°μ(.)μ λΉμ·νκ² λμνμ§λ§ μ°Έμ‘°κ° null νΉμ undefinedμ¬λ μλ¬μμ 리ν΄νμ§ μκ³ undefined κ°μ 리ν΄νλ€. ν¨μλ λ§μ°¬κ°μ§λ€. μ€μ²©λ μ€λΈμ νΈ νλ‘νΌν°μ μ κ·Όνλ λ°μ κ°μ₯ μμ ν λ°©λ²μΌλ‘, μ€κ° νλ‘νΌν°κ° μ‘΄μ¬νμ§ μμ κ²½μ°μλ μμ νκ² μ κ·Ό..