λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

Frontend Dev/πŸ₯ μ½”λ“œμŠ€ν…Œμ΄μΈ  FE λΆ€νŠΈμΊ ν”„

Section4 Unit2 [μ†”λ‘œ ν”„λ‘œμ νŠΈ] COZ Shopping

λ°˜μ‘ν˜•


Section4 Unit2 [μ†”λ‘œ ν”„λ‘œμ νŠΈ] COZ Shopping

 

πŸ“Œ Chapter1. μ†”λ‘œ ν”„λ‘œμ νŠΈ

 λ³Έ ν”„λ‘œμ νŠΈ 전에 κ°„λ‹¨νžˆ μ§„ν–‰ν•˜λŠ” μ†”λ‘œ ν”„λ‘œμ νŠΈκ°€ μ‹œμž‘λ˜μ—ˆλ‹€.

 

• μŠ€ν”„λ¦°νŠΈ 기간은 5일 (ν‰μΌλ§Œ / μ˜€λŠ˜λΆ€ν„° λ‹€μŒμ£Ό μ›”μš”μΌκΉŒμ§€)

  • 첫 날은 ν”Œλž˜λ‹ 데이, λ§ˆμ§€λ§‰ 날은 회고 데이

• 이번 κ³Όμ œλŠ” μ• μžμΌ 방법둠과 μŠ€ν¬λŸΌλ³΄λ“œλ₯Ό ν™œμš©ν•œ ν”„λ‘œμ νŠΈλ‘œ, 혼자 μž‘μ—…ν•˜λŠ” μ†”λ‘œ ν”„λ‘œμ νŠΈμ΄μ§€λ§Œ κΉƒκ³Ό κΉƒν—ˆλΈŒλ₯Ό 적극 ν™œμš©ν•œλ‹€.

• 또, 이번 κ³Όμ œλŠ” Reactλ₯Ό μ‚¬μš©ν•΄ 주어진 μš”κ΅¬μ‚¬ν•­μ„ λ§Œμ‘±ν•˜λŠ” μƒν’ˆλ¦¬μŠ€νŠΈ νŽ˜μ΄μ§€, 그리고 μ‚¬μš©μžκ°€ 뢁마크 ν•œ μƒν’ˆλ“€μ„ μ‘°νšŒν•  수 μžˆλŠ” 뢁마크 νŽ˜μ΄μ§€λ₯Ό ν¬ν•¨ν•˜λŠ” SPA 앱을 κ΅¬ν˜„ν•˜λŠ” 것이 λͺ©μ μ΄λ‹€.

 

• 이번 μ†”λ‘œ ν”„λ‘œμ νŠΈμ—μ„œμ˜ λ‚˜μ˜ λͺ©ν‘œλŠ”,

  • κΉƒν—ˆλΈŒ μ‚¬μš© μ΅μˆ™ν•΄μ§€κΈ° (branch, push, pull request, merge λ“±μ˜ μž‘μ—…λ“€)

  • μ‹œκ°„ 내에 κ΅¬ν˜„ μ™„λ£Œ ν›„ κ³Όμ • 정리

  • 그리고 νŠΉλ³„ν•  것 없이 λ¦¬μ•‘νŠΈλ‘œ κ΅¬ν˜„μ΄λ‚˜ μž˜ν•˜μžλŠ” 것!

 

 μ΄λ²ˆ μ†”λ‘œ ν”„λ‘œμ νŠΈλŠ” 과정을 정리해 λ”°λ‘œ 글을 μ“ΈκΉŒ ν•œλ‹€. λͺ©ν‘œμ™€ λ°°μ› λ˜ 점듀, μ•Œκ²Œ 된 λΆ€λΆ„κ³Ό κ΅¬ν˜„ κ³Όμ •μ—μ„œμ˜ μ–΄λ €μ› λ˜ 뢀뢄듀을 λ”°λ‘œ 기둝해두면 쒋을 것 κ°™λ‹€λŠ” 생각이 λ“€μ—ˆλ‹€. μš°μ„  λ…Έμ…˜μœΌλ‘œ μ •λ¦¬ν•˜κ³ , 좔후에 λΈ”λ‘œκ·Έμ—λ„ μ˜¬λ¦¬κ²Œλ˜μ§€ μ•Šμ„κΉŒ?!

 


 

πŸ“Œ Chapter2. μ†Œν”„νŠΈμ›¨μ–΄ κ°œλ°œλ°©λ²•λ‘ 

μ†Œν”„νŠΈμ›¨μ–΄ κ°œλ°œμ— λŒ€ν•œ 체계적인 μ ‘κ·Ό λ°©μ‹μœΌλ‘œ, μ†Œν”„νŠΈμ›¨μ–΄ 개발 과정에 ν•„μš”ν•œ 단계, ν™œλ™, μ‚°μΆœλ¬Ό, μˆœμ„œ 등을 μ •μ˜ν•˜κ³  μ„€λͺ…ν•˜λŠ” 것이 μ†Œν”„νŠΈμ›¨μ–΄ 개발 방법둠이닀.

μ†Œν”„νŠΈμ›¨μ–΄ 개발 λ°©λ²•λ‘ μ˜ 일반적 단계: μš”κ΅¬μ‚¬ν•­ 뢄석 → 섀계 → κ΅¬ν˜„ → ν…ŒμŠ€νŠΈ → μœ μ§€λ³΄μˆ˜ 

 λŒ€ν‘œμ μœΌλ‘œ μ‚¬μš©λ˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄ 개발 λ°©λ²•λ‘ μ—λŠ” 폭포수 λͺ¨λΈκ³Ό μ• μžμΌ λͺ¨λΈμ΄ μžˆλ‹€.

 

이번 ν”„λ‘œμ νŠΈμ—μ„œ 진행될 μ• μžμΌ λͺ¨λΈμ— λŒ€ν•΄ μ•Œμ•„λ³΄μž.

 

μ• μžμΌ λͺ¨λΈ(Agile Model)

  • 고객의 ν”Όλ“œλ°±μ„ λΉ λ₯΄κ²Œ λ°˜μ˜ν•˜λ©°, μž¦μ€ 변화에 μœ μ—°ν•˜κ²Œ λŒ€μ‘ν•˜λŠ” λͺ¨λΈ

  • μž‘μ€ λ‹¨μœ„λ‘œ κ°œλ°œν•˜κ³  ν…ŒμŠ€νŠΈν•˜λ©° μ§€μ†μ μœΌλ‘œ κ°œμ„ ν•˜λŠ” λͺ¨λΈ

  • μ‚¬μš©μžμ˜ μš”κ΅¬μ‚¬ν•­ 일뢀뢄 ν˜Ήμ€ μ œν’ˆμ˜ 일뢀뢄을 반볡적으둜 κ°œλ°œν•˜μ—¬ μ΅œμ’… μ‹œμŠ€ν…œμœΌλ‘œ μ™„μ„±ν•˜λŠ” λͺ¨λΈ

  • μš”κ΅¬μ‚¬ν•­μ΄ 자주 λ°”λ€Œκ³  ν˜‘μ—…μ΄ 많이 ν•„μš”ν•œ ν”„λ‘œμ νŠΈμ— 적합

 

 μ• μžμΌ 방법둠은 μš”κ΅¬μ‚¬ν•­μ΄ λ³€ν™”ν•˜λŠ” 것을 λ‹Ήμ—°ν•œ μ „μ œλ‘œ 두고, λ³€ν™”ν•˜λŠ” μš”κ΅¬μ‚¬ν•­μ— λ―Όμ²©ν•˜κ²Œ λŒ€μ‘ν•˜λ©° κ°œλ°œμ„ μˆ˜ν–‰ν•˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄ 개발 방법둠이닀. λ¬Έμ„œμ— μ˜μ‘΄ν•˜κΈ°λ³΄λ‹€ μ½”λ“œ 지ν–₯적으둜 효율적인 κ°œλ°œμ„ 지ν–₯ν•˜λŠ” λͺ©μ μ—μ„œ νƒ„μƒν–ˆλ‹€.

 

 μ• μžμΌ 방법둠과 λŒ€λΉ„λ˜λŠ” 폭포수 방법둠은 μš”κ΅¬λΆ„μ„λΆ€ν„° 기획, 개발, ν…ŒμŠ€νŠΈ, μΆœμ‹œκΉŒμ§€ 순차적으둜 μ§„ν–‰ν•˜μ—¬ 마치 폭포가 λ–¨μ–΄μ§€λŠ” μ‹μœΌλ‘œ 순차적인 단계λ₯Ό λ°ŸλŠ” 전톡적인 개발 λ°©λ²•λ‘ μœΌλ‘œ, κΈ°νšλ‹¨κ³„μ—μ„œ ν”„λ‘œμ νŠΈ 전체λ₯Ό λŒ€μƒμœΌλ‘œ ν”Œλž˜λ‹μ„ μ§„ν–‰ν•œ ν›„ ν”„λ‘œμ νŠΈ 전체에 λŒ€ν•œ κΈ°νšλ¬Έμ„œκ°€ λ‚˜μ˜¨ ν›„ μΌκ΄„μ μœΌλ‘œ κ°œλ°œμ— λ“€μ–΄κ°€λŠ” 진행방식을 띄고 μžˆμ–΄, κ°œλ°œμ„ μ§„ν–‰ν•˜λ©΄μ„œ λ°œμƒν•˜λŠ” κΈ°νšλ‹¨κ³„μ—μ„œ μ˜ˆμΈ‘ν•  수 μ—†λŠ” μ΄μŠˆλ“€μ— λŒ€ν•΄ μœ μ—°ν•˜κ²Œ λŒ€μ‘ν•˜κΈ° μ–΄λ ΅λ‹€. 이처럼 폭포수 방법둠은 μš”κ΅¬λΆ„μ„, κΈ°νšλ“± 전체 ν”„λ‘œμ νŠΈμ— λŒ€ν•œ λͺ¨λ“  λ¬Έμ„œλ₯Ό λ§Œλ“€κ³ , ν•΄λ‹Ή μž‘μ—…λ“€μ΄ λͺ¨λ‘ λλ‚œ 이후 κ°œλ°œμ— λ“€μ–΄κ°€κΈ° λ•Œλ¬Έμ— 고객의 μš”κ΅¬μ— λ―Όκ°ν•˜κ²Œ λ°˜μ‘ν•˜κΈ° μ–΄λ ΅λ‹€.

 

 λ°˜λ©΄ μ• μžμΌ 방법둠은 λ¬Έμ„œκ°€ μ•„λ‹Œ μ½”λ“œλ‘œ λ³΄μ—¬μ£ΌλŠ” 것이 μ€‘μš”μ‹œλ˜κ³ , 전체가 μ•„λ‹Œ κΈ°λŠ₯ λ‹¨μœ„μ˜ ν”„λ‘œν† νƒ€μž…μ„ 기반으둜 개발이 μ§„ν–‰λ˜κΈ° λ•Œλ¬Έμ— μ’€ 더 μž‘μ€ λ‹¨μœ„λ‘œ κ°œλ°œμ„ ν•΄μ„œ, ν•΄λ‹Ή 뢀뢄을 직접 κ³ κ°μ—κ²Œ 선보이고 ν”Όλ“œλ°±μ„ λΉ λ₯΄κ²Œ 전달받아 μˆ˜μ •μ΄λ‚˜ μ΄μŠˆμ²˜λ¦¬μ— λŒ€ν•œ κΈ°λ―Όν•œ λŒ€μ‘μ΄ κ°€λŠ₯ν•˜λ‹€.

 

 μ• μžμΌ 방법둠을 κ΅¬μ²΄ν™”ν•˜κΈ° μœ„ν•΄ 슀크럼(Scrum)κ³Ό 칸반(Kanban)을 μ‚¬μš©ν•  수 μžˆλ‹€.

 

 

πŸ“Œ Chapter3. ν”„λ‘œμ νŠΈ μš”κ΅¬μ‚¬ν•­ 뢄석

 μ• μžμΌμ—μ„œμ˜ ν”„λ‘œμ νŠΈ μš”κ΅¬μ‚¬ν•­ 뢄석은 전체 μŠ€ν”„λ¦°νŠΈμ— λŒ€ν•΄ λͺ¨λ‘ ν•œκΊΌλ²ˆμ— μ§„ν–‰ν•˜λŠ” 것이 μ•„λ‹ˆλΌ, 맀 μŠ€ν”„λ¦°νŠΈ ν”Œλž˜λ‹ 당일 ν•΄λ‹Ή μŠ€ν”„λ¦°νŠΈ λ™μ•ˆ 진행할 κΈ°λŠ₯에 λŒ€ν•΄ 기획 λ¬Έμ„œ 및 λ””μžμΈ λͺ©μ—…을 μ°Έκ³ ν•˜μ—¬ μš”κ΅¬μ‚¬ν•­μ„ λ„μΆœν•œλ‹€.

 λ”°λΌμ„œ μŠ€ν”„λ¦°νŠΈ κΈ°κ°„λ§ˆλ‹€ ν•œ λ²ˆμ”© μ§„ν–‰λ˜λŠ” μž‘μ—…μ΄λ©°, μŠ€ν”„λ¦°νŠΈμ˜ λ‹¨μœ„μ— 따라 μž‘μ—… 기간은 λ‹¬λΌμ§ˆ 수 μžˆμ§€λ§Œ ν•΄λ‹Ή μŠ€ν”„λ¦°νŠΈμ˜ ν”Œλž˜λ‹ 날에 μ§„ν–‰λ˜λŠ” μž‘μ—… 쀑 ν•˜λ‚˜μ΄λ‹€.

 

 μŠ€ν”„λ¦°νŠΈ 기간은 νŒ€λ§ˆλ‹€ λ‹€λ₯΄μ§€λ§Œ 보톡 2μ£Όμ—μ„œ 4μ£Όλ₯Ό ν•˜λ‚˜μ˜ μŠ€ν”„λ¦°νŠΈ μž‘μ—… κΈ°κ°„μœΌλ‘œ μ„€μ •ν•˜λ©°, 보톡 μŠ€ν”„λ¦°νŠΈ 첫날을 ν”Œλž˜λ‹ 데이, λ§ˆμ§€λ§‰ 날을 회고 데이둜 μž‘λŠ”λ‹€. 

 

ν”„λ‘œμ νŠΈ μš”κ΅¬μ‚¬ν•­ 뢄석 단계

1. λŒ€λž΅μ μΈ κΈ°λŠ₯ μ„ μ • 단계 - 이번 μŠ€ν”„λ¦°νŠΈ κΈ°κ°„ 내에 진행할 수 μžˆμ–΄ λ³΄μ΄λŠ” λŒ€λž΅μ μΈ κΈ°λŠ₯ 및 νŽ˜μ΄μ§€ μ„ μ •

2. 각 κΈ°λŠ₯ ꡬ체화 단계 - μ„ΈλΆ€ κΈ°λŠ₯을 κ΅¬μ²΄ν™”ν•˜κ³ , κ²°μ •ν•œ 것듀을 이슈 ν‹°μΌ“μ˜ description으둜 μž‘μ„±ν•˜λŠ” 것이 이상적인 ν”Œλž˜λ‹

3. 이슈 ν‹°μΌ“ 생성 및 ν”Œλž˜λ‹ 포컀 단계 - 슀크럼 λ³΄λ“œμ˜ Backlog에 이슈 티켓을 μƒμ„±ν•˜κ³ , μ„ΈλΆ€ 사항듀을 μž‘μ„±. μš°μ„ μˆœμœ„λ₯Ό κΈ°μ€€μœΌλ‘œ 티켓이 μ •λ ¬λ˜λ©°, ν”Œλž˜λ‹ 포컀(μž‘μ—… μ†Œμš” μ‹œκ°„ μ„€μ •)λ₯Ό ν•œλ‹€. 

4. μŠ€ν”„λ¦°νŠΈ λ²”μœ„ μ„€μ • 단계 - μŠ€ν”„λ¦°νŠΈ κΈ°κ°„ λ™μ•ˆ ν•˜λ£¨μ— 집쀑 κ°€λŠ₯ν•œ 총 μž‘μ—… μ‹œκ°„ 계산. (보톡 ν•˜λ£¨ 5μ‹œκ°„ 정도) 총 μž‘μ—… μ‹œκ°„μ„ ν•΄λ‹Ή ν‹°μΌ“μ˜ μž‘μ—… μ‹œκ°„κ³Ό λΉ„κ΅ν•˜μ—¬ ν•΄λ‹Ή μŠ€ν”„λ¦°νŠΈ κΈ°κ°„ λ™μ•ˆ ν•΄μ•Όν•  μž‘μ—…μ„ μ •ν•œλ‹€.

 


πŸŒ™  였늘의 회고

 μ˜€λŠ˜λΆ€ν„° 5μΌλ™μ•ˆ μ†”λ‘œ ν”„λ‘œμ νŠΈ 기간을 κ°€μ§€κ²Œ λ˜μ—ˆλ‹€. 본격적인 ν”„λ‘œμ νŠΈμ— λ“€μ–΄κ°€κΈ° 전에 μ•½κ°„ μ²΄ν—˜νŒ(?) 같은 λŠλ‚Œμ˜ ν”„λ‘œμ νŠΈμΈλ°λ„ λ‘κ·Όλ‘κ·ΌπŸ‘€ 자료ꡬ쑰 μ•Œκ³ λ¦¬μ¦˜ 문제 ν‘ΈλŠ” 것보닀 λ°±λ§Œλ°°λŠ” 더 μž¬λ―Έμžˆμ„ 것 κ°™λ‹€.

λ””μžμΈ 파일과 μš”κ΅¬μ‚¬ν•­μ€ μ½”λ“œμŠ€ν…Œμ΄μΈ  μΈ‘μ—μ„œ λ‹€ μ€€λΉ„ν•΄μ£ΌκΈ° λ•Œλ¬Έμ— UI와 κΈ°λŠ₯ κ΅¬ν˜„λ§Œ ν•˜λ©΄ λ˜λŠ” κ°„λ‹¨ν•œ μ‡Όν•‘λͺ° μ‚¬μ΄νŠΈλ₯Ό λ§Œλ“œλŠ” ν”„λ‘œμ νŠΈμ˜€λ‹€.

 λ””μžμΈ 파일 보고 κ·Έλƒ₯ μ‹œμž‘ν•˜λ©΄ λ˜λŠ”κ±΄μ€„ μ•Œμ•˜λŠ”λ°, 생각보닀 μ„ΈνŒ…ν•  것도 많고 μš”κ΅¬μ‚¬ν•­λ„ λ§Žμ•„μ„œ μ˜€λŠ˜μ€ ν•˜λ£¨μ’…μΌ μ–΄λ–€ μ‹μœΌλ‘œ μ§„ν–‰ν•˜κ³ , κ³„νšμ„ μ§œλŠ” ν”Œλž˜λ‹ 데이둜 λ³΄λƒˆλ‹€. ν”„λ‘œμ νŠΈ μ‹œμž‘ 전에 라이브 μ„Έμ…˜μ—μ„œ κ°•μ‚¬λ‹˜μ΄ μ–ΈκΈ‰ν•œ λΆ€λΆ„λ“€κ³Ό μœ μ–΄ν΄λž˜μŠ€μ—μ„œ μ œκ³΅ν•œ ν•™μŠ΅μžλ£Œλ„ λŒ€μΆ©(?) μ½μ–΄λ³΄λ‹ˆ μ• μžμΌ λ°©λ²•λ‘ μœΌλ‘œ μ§„ν–‰ν•˜λ©°, μ‹€μ œλ‘œ λ‹€λ₯Έ μ‚¬λžŒλ“€κ³Ό ν•¨κ»˜ μž‘μ—…ν•˜λŠ” κ²ƒμ²˜λŸΌ κΉƒκ³Ό κΉƒν—ˆλΈŒλ₯Ό μ‚¬μš©ν•˜κΈ°λ₯Ό ꢌμž₯ν–ˆλ‹€.

 Agileμ΄λΌλŠ” λ‹¨μ–΄λŠ” 많이 λ“€μ–΄λ΄€μ§€λ§Œ 그게 무슨 λœ»μΈμ§€ μ°Ύμ•„λ³Ό 생각을 μ „ν˜€ ν•˜μ§€ μ•Šμ•˜μ—ˆλ‹€. 왠지 μ–΄λ €μš΄ κ°œλ°œμš©μ–΄μΌκ±°λΌ μƒκ°ν•΄μ„œ, κ²€μƒ‰ν•΄λ΄€μž λ‚΄κ°€ 이해 λͺ»ν•  λ‚΄μš©μ˜ μ–΄λ– ν•œ 것인지 μ•Œμ•˜λ‹€..🫠 그런데 μ• μžμΌμ΄λΌλŠ” 것이 μ†Œν”„νŠΈμ›¨μ–΄ 개발 λ°©λ²•λ‘ μ΄μ—ˆλ‹€λ‹ˆ..

μ—¬νŠΌ μ• μžμΌ 방법둠도, κΉƒν—ˆλΈŒμ—μ„œ ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜μ—¬ 슀크럼 λ³΄λ“œλ₯Ό ν™œμš©ν•΄ ν”Œλž˜λ‹μ„ ν•˜λŠ” 것도, 브랜치λ₯Ό 생성해 μž‘μ—…μ„ λ”°λ‘œ μ§„ν–‰ν•œ ν›„ merge ν•˜λŠ” 것도 μ „λΆ€ λ‹€ 처음이라 μ΅νžˆλŠ”λ° μ‹œκ°„μ΄ μ’€ κ±Έλ Έλ‹€.

 μž‘은 ν”„λ‘œμ νŠΈμ§€λ§Œ 과정을 기둝도 해놓고 μ‹Άμ–΄μ„œ λ…Έμ…˜μ— μ •λ¦¬ν•˜λŠ” κ²ƒκΉŒμ§€λ„ μ‹œκ°„μ΄ 적지 μ•Šκ²Œ μ†Œμš”λ˜μ—ˆλ‹€. 이제 λŒ€λž΅ μ •λ¦¬λŠ” λ˜μ—ˆμœΌλ‹ˆ μ½”λ“œλ₯Ό 쳐볼까!

λ°˜μ‘ν˜•