[FE - ConnecTo] DAY52 TILπŸ‘©πŸ»β€πŸ’»

orangechickΒ·2022λ…„ 9μ›” 23일
0

πŸ“šZeroBase ConnecTo Front-End

λͺ©λ‘ 보기
40/53
post-thumbnail

22.09.23 μˆ˜μ—… μ‹œκ°„ 쀑 κ³΅λΆ€ν•œ λ‚΄μš©λ“€μ„ μ •λ¦¬ν•˜μ˜€μŠ΅λ‹ˆλ‹€ 😊
ν”Όλ“œλ°±μ€ μ–Έμ œλ‚˜ ν™˜μ˜μž…λ‹ˆλ‹€! 🍊

νŒ€ 회고

  • 개발 흐름을 μ΅νžˆλŠ” 데 집쀑
    1. μš”κ΅¬μ‚¬ν•­ 뢄석
    2. λ¬Έμ œν•΄κ²° μˆœμ„œ 정리
      1. κΈ°λŠ₯ κ°„μ˜ μš°μ„ μˆœμœ„ μ„€μ •
    3. κΈ°λŠ₯ λ™μž‘μ— μ§‘μ€‘ν•΄μ„œ μ½”λ”©
      1. ꡬ체적으둜 μ΄λ²€νŠΈκ°€ μ–΄λ–€ νλ¦„μœΌλ‘œ λ°œμƒν•˜κ³  κΈ°λŠ₯이 λ™μž‘ν•˜λŠ”μ§€
      2. 1μ°¨ μ½”λ”© λ•ŒλŠ” 쑰금 λ”λŸ½λ”λΌλ„ μ •ν™•ν•˜κ²Œ λ™μž‘ν•˜λ„λ‘ κ΅¬ν˜„ν•˜λŠ” 것에 집쀑
        1. μ½”λ“œ λ™μž‘μ„ λ‹¨κ³„λ³„λ‘œ μ •ν™•ν•˜κ²Œ μΈμ§€ν•˜κ³  μ„€κ³„ν•˜λ„λ‘ μœ μ˜ν•˜λ©΄μ„œ μ½”λ”©
        2. μ‚¬μš©ν•˜λŠ” ν•¨μˆ˜λ“€μ˜ λ™μž‘ 원리, λ™μž‘ 흐름, λ°˜ν™˜κ°’ 등을 μƒκ°ν•˜λ©° μ½”λ”©
          1. μ–΄λ– ν•œ ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•  λ•ŒλŠ” λΆ„λͺ…ν•œ μ΄μœ μ™€ κ·Όκ±°κ°€ μžˆμ–΄μ•Ό ν•œλ‹€
    4. λ¦¬νŒ©ν† λ§
  • μ½”λ“œ λ³€ν™” 양상
    1. μ΄ˆμ•ˆ
      1. μš”κ΅¬μ‘°κ±΄ 각각에 addEventListener ν•¨μˆ˜λ₯Ό μ‚¬μš©
      2. addEventListener μ•ˆμ˜ 이벀트 ν•Έλ“€λŸ¬ λ‚΄λΆ€μ—μ„œ λͺ¨λ“  λ™μž‘ 처리
        1. μ–΄λ””μ—μ„œ μ–΄λ–€ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆλŠ”μ§€
        2. 이벀트 처리λ₯Ό μœ„ν•΄ μ•Œκ³ μžˆμ–΄μ•Ό ν•  것듀 λ³€μˆ˜ν™”
          1. 화면에 그릴 정보
          2. 정보λ₯Ό λ‚˜νƒ€λ‚Ό HTMLμš”μ†Œ
          3. 정보λ₯Ό μ‘°μž‘ν•  ν•¨μˆ˜
          4. μ‘°μž‘ν•œ 정보λ₯Ό HTMLμš”μ†Œμ— 그릴 ν•¨μˆ˜
    2. λ¦¬νŒ©ν† λ§
      1. 1차원적인 μ ‘κ·Ό
        1. μ€‘λ³΅λ˜λŠ” μ½”λ“œλ₯Ό μ°Ύμ•„λ‚΄μ„œ 간좔리기
        2. λ³€μˆ˜ 이름이 μ μ ˆν•œμ§€ ν™•μΈν•˜κ³  μˆ˜μ •ν•˜κΈ°
      2. μ’€ 더 λ‚˜μ•„κ°€λ©΄
        1. μ€‘λ³΅λ˜κ±°λ‚˜ λΆˆν•„μš”ν•œ λ™μž‘μ΄ μžˆλŠ”μ§€ ν™•μΈν•˜κΈ°
        2. 더 효율적인 방법이 μžˆλŠ”μ§€ κ³ λ―Όν•˜κΈ°
        3. κΈ°μ‘΄κ³Ό λ‹€λ₯Έ λ°©λ²•μœΌλ‘œ 접근해보기

πŸ€”Β κ°œλ³„ 회고

μ œκ°€ μ½”λ“œλ₯Ό 짜본 κ²½ν—˜μ΄ λ„ˆλ¬΄λ‚˜λ„ μ μ–΄μ„œ 처음 μ‹œμž‘ν•  λ¬΄λ ΅μ—λŠ” μ½”λ“œλ₯Ό μ§œλŠ”λ° μžˆμ–΄μ„œ 두렀움이 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

κ·Έλž˜μ„œ 제일 처음 ν”„λ‘œκ·Έλž˜λ°μ„ μ‹œμž‘ν–ˆμ„ λ•Œμ—λŠ” ν•œ 쀄 짜고 μ§μ§€μ—κ²Œ 물어보고 ν•œμ€„ 짜고 λ¬Όμ–΄λ³΄λŠ” κ²ƒμ˜ λ°˜λ³΅μ΄μ—ˆμŠ΅λ‹ˆλ‹€.

그리고, μš”κ΅¬μ‚¬ν•­μ„ 보고 μ½”λ“œλ₯Ό 지 λ•Œ, ν•œκΊΌλ²ˆμ— λͺ¨λ“  것을 λ‹€ μƒκ°ν•˜κ³  μ§œμ•Όκ² λ‹€κ³  생각을 ν•˜λ‹€λ³΄λ‹ˆ, μ½”λ“œ κ΅¬ν˜„λ„ μ•ˆλ˜κ³ , 진행도 μ•ˆλ˜κ³  μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

κ·Έλ ‡μ§€λ§Œ, 이번 ν˜‘μ—… νŽ˜μ–΄ ν”„λ‘œκ·Έλž˜λ°μ„ ν†΅ν•΄μ„œ μ½”λ“œλ₯Ό 지 λ•Œ μ–΄λ–€ μˆœμ„œλ‘œ μƒκ°ν•˜κ³  μ§œμ•Όν•˜λŠ”μ§€λ₯Ό μƒκ°ν•˜λ©° μ½”λ“œ μ§œλŠ” μ—°μŠ΅μ„ μ§„ν–‰ν–ˆκ³ , κ·Έ κ²°κ³Ό 처음 1번 λ¬Έμ œμ—μ„œ μ—„μ²­ λ²„λ²…μ˜€μ—ˆλŠ”λ°, 11번 문제λ₯Ό κ΅¬ν˜„ν•  λ•Œ, 짝지가 μ•„νŒŒμ„œ μ˜€μ§€ λͺ»ν•œ λ‚ μ΄μ—ˆμ§€λ§Œ, μ‹œκ°„μ΄ 였래 걸리더라도 ν˜Όμžμ„œ μ°¨κ·Ό μ°¨κ·Όν•΄μ„œ, 90% μ •λ„λŠ” κ΅¬ν˜„ν•  수 있게 λ˜μ—ˆκ³ , μ½”λ“œλ₯Ό 지 λ•Œ 두렀움도 쀄일 수 있게 λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

그리고 전체 μ½”λ“œλ₯Ό 계속 λ°˜λ³΅ν•˜λ©° μƒκ°ν•˜λ©΄μ„œ λ³Ό 수 μžˆλŠ” μ‹œκ°„μ΄μ—ˆμ–΄μ„œ μ’‹μ•˜μŠ΅λ‹ˆλ‹€.

μ•„μ‰¬μ› λ˜ 점은 μ œκ°€ μ½”λ“œ μ§œλŠ” 것이 μ΄μ œμ•Ό μ’€ μ΅μˆ™ν•΄μ§€κ³ , μžμ‹ κ°λ„ λΆ™μ—ˆλ‹€λ³΄λ‹ˆ, λ¦¬νŽ™ν† λ§ κ³Όμ •μ—μ„œ 짝지와 μ΅œλŒ€ν•œ μ†Œν†΅ν•˜λ©΄μ„œ μ§„ν–‰ν–ˆμ§€λ§Œ, 더 적극적으둜 μ°Έμ—¬ν•˜μ§€ λͺ»ν•œ 것 κ°™μ•„μ„œ μ•„μ‰¬μ› μŠ΅λ‹ˆλ‹€.

λ‹€μŒ νŽ˜μ–΄ ν”„λ‘œκ·Έλž˜λ° λ•Œμ—λŠ” 쑰금 더 곡뢀λ₯Ό ν•΄μ„œ, λ¦¬νŽ™ν† λ§ λ•Œ μ§€κΈˆλ³΄λ‹€ 더 적극적으둜 μ°Έμ—¬ν•΄μ•Όκ² λ‹€κ³  μƒκ°ν–ˆμŠ΅λ‹ˆλ‹€.

profile
μ„±μž₯ν•˜λŠ” 개발자🌼

0개의 λŒ“κΈ€