๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ

๐Ÿšฉ Project codefolio: MVP ์ค‘๊ฐ„๋ฐœํ‘œ

ยท ์•ฝ 2๋ถ„
Seung hyo, Lee
Front End Engineer @ Assistfit

3์ฃผ์ฐจ๊นŒ์ง€์˜ ํ›„๊ธฐ ๋ฐ ์†Œ๊ฐ


1. MVP ์ค‘๊ฐ„๋ฐœํ‘œ ์ž๋ฃŒ(๊ธฐ์ž…)โ€‹


2. ๊ธฐ์ˆ ์  ์˜์‚ฌ๊ฒฐ์ • & ํŠธ๋Ÿฌ๋ธ”์ŠˆํŒ… ๊ธฐ๋กโ€‹


3. ์ค‘๊ฐ„๋ฐœํ‘œ ํ”ผ๋“œ๋ฐฑ ๊ธฐ๋กโ€‹

  • ์›”์š”์ผ์— ๋Œ€๋ฉด ํ”ผ๋“œ๋ฐฑ์„ ๊ผผ๊ผผํžˆ ๊ธฐ๋กํ•ด๋‘๊ณ , ๊ฐœ์„ ์ด ํ•„์š”ํ•œ ์‚ฌํ•ญ์— ์ ์šฉํ•ด๋ด…์‹œ๋‹ค.(์ถ”ํ›„ ์ž‘์„ฑ)

4. ์ค‘๊ฐ„ ๋ฐœํ‘œ ํ›„ ํšŒ๊ณ โ€‹

1) ๋ฏธ๊ตฌํ˜„ ๋œ MVP ๊ธฐ๋Šฅ

  • ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ (์ž๋™์™„์„ฑ ์ง€์›)
  • ์•Œ๋žŒ๊ธฐ๋Šฅ (์ข‹์•„์š” ๋ฐ ๋Œ“๊ธ€์— ๋Œ€ํ•œ ์•Œ๋žŒ)

2) ์ถ”๊ฐ€/๊ฐœ์„  ํ•  ๊ธฐ๋Šฅ๊ณผ ๊ทธ ์ด์œ 

  • (์ถ”๊ฐ€) ๊ฒŒ์‹œ๊ธ€ ๋ฐ ์‚ฌ๋žŒ ์ถ”์ฒœ ๋ฑƒ์ง€ : ๋‹จ์ˆœํ•œ ์ข‹์•„์š”๊ฐ€ ์•„๋‹Œ, ํ”„๋กœ์ ํŠธ๋‚˜ ์‚ฌ๋žŒ์— ๋Œ€ํ•œ ๊ธ์ •์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ์ฃผ๊ธฐ ์œ„ํ•ด
  • (์ถ”๊ฐ€) github api ์ถ”๊ฐ€ : ์™ธ๋ถ€ API๋ฅผ ์‚ฌ์šฉํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒฝํ—˜ + ๋ถ€ํŠธ์บ ํ”„ ์ปจ์…‰์— ๋งž๋Š” API ์ ์šฉ
  • (๊ฐœ์„ ) react-query๋กœ ๋ฆฌํŒฉํ† ๋ง ์ง„ํ–‰
  • (๊ฐœ์„ ) atom ์›์ž๋‹จ์œ„ ๋ฆฌํŒฉํ† ๋ง ์ง„ํ–‰
  • (๋…ผ์˜) Toast UI Editor์—์„œ ํƒ€ Editor๋กœ ๋ณ€๊ฒฝํ•˜์—ฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์šฉ๋Ÿ‰, ์„ฑ๋Šฅ ๊ฐœ์„ 
  • (๋…ผ์˜) Recoil to Jotai ๋ฆฌํŒฉํ† ๋ง ๋…ผ์˜
  • (์Šคํƒ€์ผ) ๋””์ž์ธ ์™„์„ฑ๋ณธ ์ ์šฉ, ์ธํ„ฐ๋ ‰์…˜

3) ์ถ”๊ฐ€/๊ฐœ์„ ํ•  ๊ธฐ๋Šฅ์„ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ ํ•  ๊ฒƒ์ธ์ง€

  • ๊ฒŒ์‹œ๊ธ€ ๋ฐ ์‚ฌ๋žŒ ์ถ”์ฒœ ๋ฑƒ์ง€ : ์ข‹์•„์š” ๊ธฐ๋Šฅ์— type ์ถ”๊ฐ€, post table์— column ์ถ”๊ฐ€

์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์ถ”์ฒœํ•ด์š” (๊ตฟ์•„์ด๋””์–ด, ์™„์„ฑ๋„๋Œ€๋ฐ•, ํ›Œ๋ฅญํ•œ์ฝ”๋“œ, ๋‹ค์–‘ํ•œ๊ธฐ๋Šฅ ๋ฑƒ์ง€ UI)

  • github api ์ถ”๊ฐ€ : ๊ฐœ์ธ์˜ ์‚ฌ์šฉ์–ธ์–ด, ํ”„๋กœ์ ํŠธ๋ณ„ ๊ธฐ์—ฌ ์ •๋„๋ฅผ ๋Œ€๋žต์ ์œผ๋กœ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ๊ตฌ์„ฑ

Github ์ €์žฅ์†Œ์™€ ์‚ฌ์šฉ ์–ธ์–ด ๋น„์œจ UI


5. ์•ž์œผ๋กœ์˜ ๊ณ„ํš ๋ฐ ์šฐ์„ ์ˆœ์œ„โ€‹

์ˆœ์œ„๊ตฌ๋ถ„์•ž์œผ๋กœ์˜ ๊ณ„ํš (๊ตฌ์ฒด์ ์œผ๋กœ)
1MVP๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๊ธฐ
2MVP์•Œ๋žŒ ๊ธฐ๋Šฅ ๊ตฌํ˜„ํ•˜๊ธฐ
3๊ฐœ์„ react-query๋กœ ๋ฆฌํŽ™ํ† ๋ง ์ง„ํ–‰ํ•˜๊ธฐ
4๊ฐœ์„ atom ์›์ž๋‹จ์œ„ ๋ฆฌํŽ™ํ† ๋ง ์ง„ํ–‰ํ•˜๊ธฐ
5์Šคํƒ€์ผ๋””์ž์ธ ์™„์„ฑ๋ณธ ์ ์šฉ ๋ฐ ์ธํ„ฐ๋ ‰์…˜ ๊ณ ๋„ํ™” ํ•˜๊ธฐ

6. ์ด๋ฒˆ์ฃผ(23.03.03)๊นŒ์ง€ ํ•ด์•ผํ•  ์ผโ€‹