ZARANARAπŸ‘ΆπŸ» ν”„λ‘œμ νŠΈ 총 회고

μ–‘μ£Όμ˜Β·2021λ…„ 12μ›” 12일
0

ZARANARA project

λͺ©λ‘ 보기
4/4

1. ν”„λ‘œμ νŠΈ μ†Œκ°œ 및 기획 μ˜λ„

🚩 ν”„λ‘œμ νŠΈ μ†Œκ°œ

"아이가 μžλΌλŠ” λͺ¨λ“  μˆœκ°„, μžλΌλ‚˜λΌλŠ” μ•„μ΄λ“€μ—κ²Œ 꿈과 희망의 곡간을 μ„ μ‚¬ν•©λ‹ˆλ‹€."
μžλΌλ‚˜λΌλŠ” 자라 ν™ˆ νŽ˜μ΄μ§€λ₯Ό ν΄λ‘ ν•˜μ—¬ κΈ°μ‘΄ λ”°λœ»ν•˜κ³  νŒ¨μ…”λ„ˆλΈ”ν•œ μΈν…Œλ¦¬μ–΄λ₯Ό μ œκ³΅ν•˜λŠ” νŽ˜μ΄μ§€μ—μ„œ 아이듀을 μœ„ν•œ κ³΅κ°„μœΌλ‘œ μƒˆλ‘­κ²Œ κΈ°νšν•˜μ˜€μŠ΅λ‹ˆλ‹€.

πŸ‘©β€πŸ’» ν”„λ‘œμ νŠΈ 멀버

  • Front-End 3 & Back-End 3

πŸ›  Development Tools

  • React
  • SASS
  • React-router

πŸ“‘ Communication Tools

  • Notion
  • Git & Github
  • Trello
  • Slack


2. κ΅¬ν˜„μ‚¬ν•­

(μ²΄ν¬ν•œ 뢀뢄을 λ‹΄λ‹Ήν•˜μ˜€μŠ΅λ‹ˆλ‹€-!)

βœ… Nav, Footer
메인 νŽ˜μ΄μ§€
리슀트 νŽ˜μ΄μ§€
βœ… 상세 νŽ˜μ΄μ§€
μž₯λ°”κ΅¬λ‹ˆ νŽ˜μ΄μ§€
둜그인, νšŒμ›κ°€μž… λͺ¨λ‹¬

좔후에 νŽ˜μ΄μ§€ μ†Œκ°œ μ˜μƒ 링크λ₯Ό μ²¨λΆ€ν•˜κ² μŠ΅λ‹ˆλ‹€.


3. μž˜ν•œ 점

  • λͺ¨λ‹¬μ°½κ³Ό μŠ¬λΌμ΄λ”λ₯Ό 슀슀둜 κ΅¬ν˜„ν–ˆλ‹€. μ²˜μŒμ—λŠ” λ§‰μ—°ν–ˆμ§€λ§Œ, ꡬ글링과 정보 곡유λ₯Ό 톡해 λ§ˆμΉ¨λ‚΄ κ΅¬ν˜„ν•΄λƒˆλ‹€.
  • props, state κ°œλ…μ„ μ΅ν˜”λ‹€. μ΄ˆλ°˜μ—λŠ” λ‚΄κ°€ μ•Œκ³  μžˆλŠ” 건지 μ‘°μ°¨ 애맀λͺ¨ν˜Έν–ˆλ‹€. μ•ŒκΈ΄ μ•Œκ² λŠ”λ°, μ„€λͺ…ν•˜λ €λ©΄ 또 μƒˆλ‘œμ› λ‹€. ν•˜μ§€λ§Œ, μ΄λ²ˆμ— μ»΄ν¬λ„ŒνŠΈν™”ν•˜λ©° κ°œλ…λ“€μ„ μ •ν™•νžˆ μ΅ν˜€ λ‹€λ₯Έ λΆ„λ“€κ»˜ μ„€λͺ…도 κ°€λŠ₯ν•΄μ‘Œλ‹€.
  • λ¦¬μ•‘νŠΈμŠ€λŸ¬μš΄ μ½”λ“œμ— λ”μš± μ΅μˆ™ν•΄μ‘Œλ‹€.
  • μ—λŸ¬μ— κ°μ‚¬ν–ˆλ‹€. λͺ¨λ₯΄λŠ” μƒνƒœμ—μ„œ λ˜λŠ” 것보단, 차라리 μ—λŸ¬κ°€ λ– μ„œ 짚고 λ„˜μ–΄κ°ˆ 수 μžˆλŠ” 것에 감사함을 λŠκΌˆλ‹€. λͺ¨λ“  μ—λŸ¬μ—λŠ” μ΄μœ κ°€ μžˆμ–΄ 닀행이닀.
  • μ˜μ‚¬μ†Œν†΅μ΄ ν•„μš”ν•˜λ‹€κ³  λŠλ‚„ λ•ŒλŠ” μ£Όμ €ν•˜μ§€ μ•Šκ³  이야기 λ‚˜λˆ„λ €κ³  ν–ˆλ‹€. 말을 ν•˜μ§€ μ•ŠμœΌλ©΄ μƒλŒ€λ°©μ΄ μ–΄λ–€ 생각을 가지고 μžˆλŠ”μ§€ μ•Œ 수 μ—†λ‹€.

4. μ•„μ‰¬μš΄ 점

  • 1μ£Όμ°¨ 곡동 λͺ©ν‘œλ₯Ό 작고 가지 λͺ»ν–ˆλ‹€. μ‹œκ°„μ΄ 흐λ₯΄λ©΄μ„œλ„ λ‚΄κ°€ μ§€κΈˆ 이 μ†λ„λ‘œ λ‚˜μ•„κ°€λŠ” 게 λ§žλŠ”κ±΄μ§€ 의문이 λ“€μ—ˆλ‹€. 의문이 λ“€μ—ˆμœΌλ©΄μ„œλ„ 이 생각듀을 κ³΅μœ ν•˜μ§€ λͺ»ν–ˆκ³ , 이런 μ €λŸ° κ³ λ―Όν•  μ‹œκ°„μ— 일단은 λ‚˜μ•„κ°€μž(μ½”λ“œλ₯Ό 치자..)λŠ” λ§ˆμŒμ΄μ—ˆλ‹€. λ‹€μŒ ν”Œμ  λ•ŒλŠ” 각자의 μž‘μ—… 속도와 νŽ˜μ΄μ§€ 진행λ₯ μ„ %둜 μˆ˜μΉ˜ν™”ν•˜μ—¬ κ³΅μœ ν•œλ‹€λ©΄ 더 쒋을 것 κ°™λ‹€.

  • λŒ€λž΅μ μΈ λ§ˆμ§€λ…Έμ„ μ„ 그리지 λͺ»ν•œ 것. 기획 단계 λ•ŒλΆ€ν„° κ°μžκ°€ 진행할 수 μžˆλŠ” 선을 κ·Έλ €μ•Ό ν–ˆλŠ”λ°, κ·ΈλŸ¬μ§€ λͺ»ν•œ 점이닀. ν”„λ‘œμ νŠΈ 기간을 κ³ λ €ν•œλ‹€λ©΄, μŠ€μ½”ν”„λ₯Ό 쑰금 쒁게 μž‘μ„ ν•„μš”κ°€ μžˆμ—ˆλ‹€. 사싀 μ–΄λ–»κ²Œ 보면, 이것은 λ‹Ήμ—°ν•˜λ‹€. 본인의 μ‹€λ ₯을 μ •ν™•ν•˜κ²Œ λͺ¨λ₯΄κ³ , 또 ν”„λ°±κ°„μ˜ 톡신이 μ–Όλ§ŒνΌ 걸릴지 μ „ν˜€ μ˜ˆμƒν•  수 μ—†μ—ˆκΈ° λ•Œλ¬Έμ΄λ‹€. 이 뢀뢄은 λͺ…μ‹¬ν•˜κ³  λ‹€μŒ ν”Œμ  λ•Œ λ°˜μ˜ν•΄μ•Όκ² λ‹€.


5. 배운 점 ✍️

개발 >

  • Pages, Components의 차이점을 μ•Œκ³  어디에 μ–΄λ–€ μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€μ–΄μ•Ό ν•˜λŠ”μ§€ μ•ˆλ‹€.
  • event handlerλ₯Ό μ •μ˜ν•΄μ„œ νŠΉμ • μ΄λ²€νŠΈμ— λΆ€μ—¬ν•  수 μžˆλ‹€.
  • μžμ‹μ»΄ν¬λ„ŒνŠΈμ—μ„œ λΆ€λͺ¨μ»΄ν¬λ„ŒνŠΈμ— μ–΄λ–»κ²Œ 데이터λ₯Ό λ„˜κ²¨μ•Ό ν•˜λŠ”μ§€ μ•Œκ³  μžˆλ‹€.
  • map λ©”μ„œλ“œλ₯Ό μ‚¬μš©, jsx λ¦¬ν„΄ν•˜μ—¬ λͺ©λ‘μ„ κ΅¬ν˜„ν•  수 μžˆλ‹€.
  • fetchλ₯Ό μ‚¬μš©ν•˜μ—¬ λ°±μ•€λ“œ apiλ₯Ό ν˜ΈμΆœν•˜κ³ , 응닡받은 데이터λ₯Ό ν™œμš©ν•˜μ—¬ 화면을 그렀쀄 수 μžˆλ‹€.
  • 둜그인 μ‚¬μš©μžμ˜ token을 μ™œ localStorage에 μ €μž₯ ν•˜λŠ”μ§€ μ„€λͺ…ν•  수 μžˆλ‹€.
  • children κ°œλ…μ„ μ΄μš©ν•˜μ—¬ μ»΄ν¬λ„ŒνŠΈλ₯Ό μž¬μ‚¬μš© ν•  수 μžˆλ‹€.
  • path둜 동적 λΌμš°νŒ…μ„ κ΅¬ν˜„ν•  수 μžˆλ‹€.
  • scssλ₯Ό μ™œ μ‚¬μš©ν•˜λŠ”μ§€ μ΄ν•΄ν•˜κ³  μžˆλ‹€.
  • nesting κΈ°λŠ₯을 ν™œμš©ν•˜μ—¬ μŠ€ν‹°μΌλ§μ„ ꡬ성할 수 μžˆλ‹€.
  • scss 의 variable / extend / mixin / & λ“± μ—¬λŸ¬κΈ°λŠ₯을 자유자재둜 μ‚¬μš©ν•  수 μžˆλ‹€.
  • μ‚¬μš©μžκ°€ λ”μš± νŽΈν•˜κ²Œ μ΄μš©ν•  수 μžˆλ„λ‘ μΉœμ ˆν•œ UI에 λŒ€ν•΄ κ³ λ―Όν–ˆλ‹€.

ν˜‘μ—…, μ†Œν†΅ >

  • μ†λ„λŠ” λ§žμΆ°κ°€λŠ” 것이고, λΆ€μ‘±ν•œ 것은 μ„œλ‘œ μ±„μ›Œκ°€λŠ” 것이닀.
  • ν˜Όμžκ°€ μ•„λ‹ˆλΌ νŒ€μ΄μ–΄μ„œ κ°€λŠ₯ν–ˆλ˜ 결과물이닀. νŒ€μ›λ“€κ³Ό ν•¨κ»˜λΌλ©΄ λΆˆκ°€λŠ₯μ΄λž€ μ—†λ‹€.
  • ν”„λ‘ νŠΈ κ°„μ˜ μ†Œν†΅ 뿐만 μ•„λ‹ˆλΌ ν”„λ°±κ°„μ˜ μ†Œν†΅ λ˜ν•œ 맀우맀우 μ€‘μš”ν•˜λ‹€.
  • 무엇이든 이야기λ₯Ό ν•΄μ•Ό μ•ˆλ‹€. μƒλŒ€λ°©μ΄ μ•Œμ•„μ€„ κ²ƒμ΄λΌλŠ” 생각은 금물! μ†”μ§ν•˜κ²Œ μ΄μ•ΌκΈ°ν•˜λ©΄μ„œ μ˜κ²¬μ„ μ‘°μœ¨ν•΄λ‚˜κ°€λŠ” 것이 μ€‘μš”ν•˜λ‹€.

6. λŠλ‚€μ 

profile
λšœλ²…λšœλ²…

0개의 λŒ“κΈ€