[Team Project] ๐Ÿ’Š care/of ๐Ÿ’Š

jenny87879ยท2021๋…„ 3์›” 7์ผ
1

Projects

๋ชฉ๋ก ๋ณด๊ธฐ
1/1
post-thumbnail

0. care/of

๋ฏธ๊ตญ์˜ ์˜์–‘์ œ ํŒ๋งค ์‚ฌ์ดํŠธ care/of

์†Œ๋น„์ž์˜ ์„ค๋ฌธ ์‘๋‹ต์— ๋”ฐ๋ฅธ ์˜์–‘์ œ๋ฅผ ์ถ”์ฒœํ•ด์ฃผ๋Š” ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ, ์ถ”์ฒœ๋ฐ›์€ ๊ฒƒ๋ฟ ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ ์นดํ…Œ๊ณ ๋ฆฌ ๋ณ„, ๊ฑด๊ฐ• ๋ชฉ์  ๋ณ„๋กœ ์˜์–‘์ œ๋“ค์„ ์„ธ๋ถ„ํ™”์‹œ์ผœ์„œ ์†Œ๋น„์ž์˜ ์„ ํƒ์„ ๋„์™€์ฃผ๋Š” ์‚ฌ์ดํŠธ๋‹ค.


I. TEAM COOP

1. ํŒ€ ๊ตฌ์„ฑ

ํ”„๋ก ํŠธ์—”๋“œ 3๋ช… - ์œ ์ƒ˜์†”(PM), ๋ฐ•์ง€์—ฐ, ์ด์ง€์€
๋ฐฑ์—”๋“œ 4๋ช… - ๊ฐ•ํ˜„์ˆ˜, ๊น€์น˜์˜ค, ์กฐํ˜œ์œค, ์–‘ํ•œ์•„

2. ํ”„๋กœ์ ํŠธ ๊ธฐ๊ฐ„

2021.02.15 ~ 2021.02.26(12์ผ๊ฐ„)

3. FrontEnd ๊ธฐ์ˆ  ์Šคํƒ

  • HTML / CSS
  • JavaScript
  • React
  • CRA
  • React Router
  • SASS
  • RESTful API
  • AWS EC2

II. ํ”„๋กœ์ ํŠธ ์ง„ํ–‰๊ณผ์ •

1. Planning meeting

์ด ๋‘๋ฒˆ์˜ Planning meeting์ด ์žˆ์—ˆ์œผ๋ฉฐ, ๋งค์ฃผ ์›”์š”์ผ meeting์„ ์ง„ํ–‰ํ–ˆ๋‹ค.

1-1. ์ฒซ๋ฒˆ์งธ Planning meeting

ํ”„๋ก ํŠธ์™€ ๋ฐฑ์ด ๋งŒ๋‚˜ ํšŒ์˜๋ฅผ ํ•˜๊ธฐ ์ „, ํ”„๋ก ํŠธ๋Š” ํ”„๋ก ํŠธ๋ผ๋ฆฌ ๋ฐฑ์—”๋“œ๋Š” ๋ฐฑ์—”๋“œ๋ผ๋ฆฌ ๋งŒ๋‚˜ ํด๋ก ํ•˜๊ฒŒ๋œ ์‚ฌ์ดํŠธ์˜ ์ „์ฒด์ ์ธ ํ๋ฆ„์ด๋‚˜ ๊ธฐ๋Šฅ์„ ์ •๋ฆฌํ•ด์„œ ํ”„๋ก ํŠธ/๋ฐฑ ๊ฐ๊ฐ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ์„ ์ •๋ฆฌํ•˜๊ณ  ๋งŒ๋‚˜๊ธฐ๋กœ ํ–ˆ๋‹ค.
ํ•˜๊ธฐ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ๋…ธ์…˜์— ์ •๋ฆฌ ํ›„ ๋งŒ๋‚˜๋‹ˆ ํ”„๋ก ํŠธ๋Š” ๋ฐฑํ•œํ…Œ ๋ฐฑ์—”๋“œ๋Š” ํ”„๋ก ํŠธํ•œํ…Œ ์„œ๋กœ ๊ตฌํ˜„์ด ๊ฐ€๋Šฅํ•œ๊ฒƒ์ธ์ง€ ๊ตฌํ˜„์ด ์•ˆ๋˜๋Š” ๋ถ€๋ถ„์ธ์ง€ ๋ฌผ์–ด๋ณด๋ฉด์„œ ํ•„์ˆ˜์ ์œผ๋กœ ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ์„ ์ •๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค.

1-2. ๋‘๋ฒˆ์งธ Planning meeting

์—ด์‹ฌํžˆ ๋‹ฌ๋ ค์˜จ ํ•œ ์ฃผ๋™์•ˆ ์–ผ๋งŒํผ ์ง„ํ–‰์ด ๋˜์—ˆ๋Š”์ง€ ํ™•์ธํ•˜๋ฉด์„œ ํ•„์ˆ˜ ๊ตฌํ˜„์ด ๋งˆ๋ฌด๋ฆฌ ๋œ๊ฒƒ์„ ํ™•์ธํ•˜๋ฉด์„œ ์—ด์‹ฌํžˆ ๋‹ฌ๋ ค์˜จ ํŒ€์›๋“ค๊ณผ ๋„ˆ๋ฌด ์ข‹์•„ํ–ˆ๋˜๊ฑฐ ๊ฐ™๋‹ค. ์ด๋ฒˆ์ฃผ์— ๊ตฌํ˜„ ์™„๋ฃŒํ•˜๊ธฐ๋กœํ•œ ๋ถ€๋ถ„์„ ์™„๋ฃŒํ•˜๊ณ  ๋ชฉ์š”์ผ์ „๊นŒ์ง€ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ํ•˜๊ณ  ๋ชฉ์š”์ผ์—๋Š” ์„œ๋กœ์—๊ฒŒ ๊ฐ์ž์˜ ์ฝ”๋“œ๋ฅผ ๋ณด์—ฌ์ฃผ๋ฉด์„œ ์ฝ”๋“œ๋ฅผ ์„ค๋ช…ํ•ด์ฃผ๋Š” ์‹œ๊ฐ„์„ ๊ฐ–๊ธฐ๋กœํ–ˆ๋‹ค!!

2. Daily Stand-Up meeting

๋งค์ผ ํŒ€์› ๋ถ„๋“ค๊ณผ Stand-Up meeting์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํ”„๋ก ํŠธ/๋ฐฑ๋ผ๋ฆฌ์˜ ์ง„ํ–‰ ์ƒํ™ฉ์„ ๊ณต์œ ํ–ˆ๋‹ค. ํŠนํžˆ ๋ฐฑ์—”๋“œ์™€๋Š” Planning meeting ์ดํ›„ ์†Œํ†ตํ•  ์ผ์ด ์ ์–ด์ง€๋Š” ๋ฐ ์„œ๋กœ๊ฐ€ ํ˜„์žฌํ•˜๋Š” ์ผ๊ณผ ๋งˆ๋ฌด๋ฆฌ๋œ ์ผ์„ ๊ณต์œ ํ•˜๋ฉด์„œ ๊ฒฐ๊ณผ๋ฌผ์„ ๋ณด๊ณ  ์„œ๋กœ ์นญ์ฐฌํ•ด์ฃผ์–ด์„œ ๋„ˆ๋ฌด ๊ธฐ๋ถ„ ์ข‹์€ ์‹œ๊ฐ„์ด์—ˆ๋‹ค.

3. Trello

Trello๋ฅผ ํ†ตํ•ด ๊ฐ์ž์˜ ํ• ์ผ์„ ํ‹ฐ์ผ“์œผ๋กœ ์ž‘์„ฑํ•˜์—ฌ process์— ๋”ฐ๋ผ Backlog / This Week / In Progress / Done๋กœ ๋‚˜๋ˆ ์„œ ์ผ์ •๊ณผ ํ• ์ผ๋ฅผ ๊ด€๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.

4. Notion

Notion์„ ํ†ตํ•ด ํ”„๋ก ํŠธ๊ฐ€ ํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ์„ ํ•˜๋ฉด์„œ ๋‚˜์˜จ mockdata๋ฅผ ๊ณต์œ ํ•˜๋ฉด ๋ฐฑ์—”๋“œ๊ฐ€ mockdata๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ์—ˆ๋‹ค. ๋ฐ์ดํ„ฐ์˜ ํ˜•ํƒœ๋“ฑ์„ Notion์„ ํ†ตํ•ด ๋ช…ํ™•ํ•˜๊ฒŒ ์†Œํ†ต์ด ๊ฐ€๋Šฅํ•ด์„œ ๋ฐฑ์—”๋“œ์™€ ํ†ต์‹ ์‹œ ์„œ๋กœ ์ˆ˜์ •ํ•  ์ผ์ด ์ ์–ด์„œ ์‹œ๊ฐ„์„ ์•„๋‚„ ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฑฐ ๊ฐ™๋‹ค!


III. ํ”„๋กœ์ ํŠธ ๊ฒฐ๊ณผ

๐ŸŽˆ: ๋‚ด๊ฐ€ ๋งก์€ ๋ถ€๋ถ„

1. ๋ฉ”์ธ ํŽ˜์ด์ง€(+ Nav)๐ŸŽˆ

  • ๋ฉ”์ธ ํŽ˜์ด์ง€๋Š” ๋ฐฑ์—”๋“œ์™€ ํ†ต์‹ ํ•˜๋Š” ๋ถ€๋ถ„์ด ์—†์–ด์„œ Nav์— ๋งŽ์€ ๋น„์ค‘์„ ๋‘๊ฒŒ ๋˜์—ˆ๋‹ค.
  • Nav ๋ฐ”๋Š” scroll์œ„์น˜๊ฐ€ ์ œ์ผ ์œ„์— ์žˆ์„๋•Œ background color๋ฅผ ํˆฌ๋ช…์œผ๋กœ ๋ฐ”๊พธ๋„๋ก ์ง„ํ–‰ ํ•˜์˜€๋‹ค.

2. ํšŒ์›๊ฐ€์ž…

  • ํœด๋Œ€ํฐ ์ธ์ฆ์ด ํ•„์š”ํ•˜์—ฌ ํœด๋Œ€๋ฒˆํ˜ธ ์ž‘์„ฑ ํ›„ ๋ฌธ์ž๋กœ ์ธ์ฆ ๋ฒˆํ˜ธ ์ „์†กํ•˜๋Š” POST
  • ๋ฌธ์ž๋กœ ๋ฐ›์€ ์ธ์ฆ ๋ฒˆํ˜ธ๊ฐ€ ๋งž๋Š” ์ง€ ํ™•์ธํ•˜์—ฌ ์ธ์ฆ์ด ์™„๋ฃŒํ•˜์˜€๋Š”์ง€ ํ™•์ธ
  • checkbox๋กœ ALL AGREE๋ฅผ ์„ ํƒ ์‹œ ๋ฐ‘์— ์ฒดํฌ ๋ฐ•์Šค๊ฐ€ ์ „๋ถ€ ์„ ํƒ ๋˜๊ณ  ๋ฐ‘์— ์žˆ๋Š” ์ฒดํฌ ๋ฐ•์Šค ์ค‘ ํ•˜๋‚˜๋ผ๋„ ํ•ด์ œ๋  ์‹œ, ALL AGREE์ฒดํฌ ๋ฐ•์Šค๊ฐ€ ํ•ด์ œ๋˜๋„๋ก ๋กœ์ง ๊ตฌํ˜„.

3. ๋กœ๊ทธ์ธ

  • ์ด๋ฉ”์ผ์€ @ ์—ฌ๋ถ€๋กœ ๋น„๋ฐ€๋ฒˆํ˜ธ๋Š” 8์ž๋ฆฌ ์ด์ƒ ์ž…๋ ฅ๋˜์žˆ๋Š”์ง€ ํ™•์ธ ํ›„ ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™” ๋˜๋„๋ก ๊ตฌํ˜„.

4. ํ€ด์ฆˆ๐ŸŽˆ

  • 11๊ฐ€์ง€์˜ ์งˆ๋ฌธ์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์— ๋งž๋Š” ์˜์–‘์ œ ์ œํ’ˆ์„ ์ถ”์ฒœํ•ด์ฃผ๋Š” ํ€ด์ฆˆ
  • ์ปดํฌ๋„ŒํŠธ ์žฌ์‚ฌ์šฉ์„ ํ†ตํ•ด ์งˆ๋ฌธ์„ ์ƒ์„ฑํ•˜๊ณ  11๊ฐ€์ง€ ์งˆ๋ฌธ์„ ๋ฐฑ์—”๋“œ์— ์ œ์ถœ ์‹œ, ์ถ”์ฒœ ์ƒํ’ˆ์„ ๋ณด์—ฌ์ฃผ๋Š” ํŽ˜์ด์ง€

5. ์ƒํ’ˆ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€

  • Query String์„ ํ†ตํ•ด ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„ List๋ฅผ ๋ณด์—ฌ์คŒ.

6. ์ƒํ’ˆ ์ƒ์„ธํŽ˜์ด์ง€๐ŸŽˆ

  • Sass๋ฅผ ํ†ตํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„
  • react-accessible-accordion ์‚ฌ์šฉํ•˜์—ฌ ์•Œ๋Ÿฌ์ง€ ์ •๋ณด์™€ ๋ณต์šฉ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด UI ์ ์šฉ
  • ์‚ฌ์ด์ฆˆ๋ณ„ ๋‹ฌ๋ผ์ง€๋Š” ๊ธˆ์•ก์œผ๋กœ ์žฅ๋ฐ”๊ตฌ๋‹ˆ์— ์ „๋‹ฌ
  • ๊ด€๋ จ ์ œํ’ˆ์„ ์ถ”์ฒœํ•˜์—ฌ ํ•ด๋‹น ์ƒ์„ธํŽ˜์ด์ง€๋กœ ์ด๋™ ๊ฐ€๋Šฅ

7. ์žฅ๋ฐ”๊ตฌ๋‹ˆ

  • ์ˆ˜๋Ÿ‰ ๋ณ€๊ฒฝ์— ๋”ฐ๋ฅธ ๊ธˆ์•ก ๋ณ€๊ฒฝ
  • ์ƒํ’ˆ ์ˆ˜๋Ÿ‰ ์ˆ˜์ •์ด๋‚˜ ์ƒํ’ˆ ์‚ญ์ œ ์‹œ ๋ฐ”๋กœ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•˜์—ฌ DB์—๋„ ๊ฐ™์ด ์ˆ˜์ •๋˜๋„๋ก ์ ์šฉ

8. ๊ฒฐ์ œ

  • ๊ฒฐ์ œ ์ •๋ณด ์ž…๋ ฅ ํ›„ ๊ฒฐ์ œ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ, ์ฃผ๋ฌธ ๋ฒˆํ˜ธ๊ฐ€ ๋ชจ๋‹ฌ์ฐฝ์œผ๋กœ ์ƒ์„ฑ ํ›„ ๋ฉ”์ธํŽ˜์ด์ง€ ์ด๋™

9. ๋ฆฌ๋ทฐ

  • ์ƒํ’ˆ์˜ ๋ชจ๋“  ๋ฆฌ๋ทฐ๋ฅผ ํ•œ ํŽ˜์ด์ง€์—์„œ ํ™•์ธ ๊ฐ€๋Šฅ

IV. ๊ธฐ์–ต์— ๋‚จ์€ ์ฝ”๋“œ

Component ์žฌ์‚ฌ์šฉ

ํ€ด์ฆˆ ํŽ˜์ด์ง€๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ 11๊ฐ€์ง€์˜ ์งˆ๋ฌธ์— ๋Œ€ํ•ด์„œ ์งˆ๋ฌธ๋ณ„๋กœ Component๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์ด 11๊ฐœ์˜ ์งˆ๋ฌธ ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์˜€๋‹ค.


๋„ˆ๋ฌด ๋ฐ˜๋ณต์ ์ธ ์ฝ”๋“œ์ด๊ณ  ํ•œ๊ฐœ์˜ ์ฝ”๋“œ๋ฅผ ๋ฐ”๊พธ๊ธฐ์œ„ํ•ด์„œ๋Š” 11๊ฐœ์˜ ํŒŒ์ผ์—์„œ ์ฝ”๋“œ๋ฅผ ๋ฐ”๊ฟ”์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์œ ์ง€๋ณด์ˆ˜์—๋„ ์ข‹์ง€ ์•Š๊ณ  ์งˆ๋ฌธ์ด ๋Š˜์–ด๋‚ ์ˆ˜๋ก ๊ด€๋ฆฌ๊ฐ€ ํž˜๋“ค๋‹ค๋Š”๊ฒƒ์„ ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.
์งˆ๋ฌธ์— ๋Œ€ํ•œ Form์„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑ ํ›„ ์งˆ๋ฌธ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์—ฌ ํ•˜๊ธฐ์™€ ๊ฐ™์ด ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค


๊ฐœ๋ฐœ์ž๋กœ์„œ DRY(Don't Repeat Yourself)!๋ฅผ ์ƒ๊ฐํ•˜๋ฉด์„œ ๋ฐ˜๋ณต์ ์ธ ์ฝ”๋“œ๋ฅผ ์—†์• ๋Š” ๊ฒƒ์— ์„ฑ๊ณตํ•˜์˜€๋‹ค๋Š” ๊ฒƒ์— ๋„ˆ๋ฌด ๊ธฐ๋ปค์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ.. ์น˜๋ช…์ ์œผ๋กœ input์— checkbox ์†์„ฑ์„ ๊ฐ€์ง„ ํƒœ๊ทธ๋ฅผ ๋‹ค์Œ ์งˆ๋ฌธ์œผ๋กœ ๋„˜์–ด๊ฐ€๋ฉด ๋‹ค์Œ ํŽ˜์ด์ง€์—์„œ๋„ ์ฒดํฌ๊ฐ€ ๋˜๋Š” ์—๋Ÿฌ๋กœ ์‹œ๊ฐ„๊ด€๊ณ„๋กœ ์ตœ์ข…์ฝ”๋“œ๊ฐ€ ๋˜์ง€๋Š” ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค.

์ตœ์ข… merge๊ฐ€ ๋˜์ง€๋Š” ๋ชปํ–ˆ์ง€๋งŒ ์ด๋Ÿฐ ๊ฒฝํ—˜์„ ํ†ตํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ ์žฌ์‚ฌ์šฉํ•˜๋Š” ๋ฒ•์„ ์ œ๋Œ€๋กœ ์ตํž ์ˆ˜ ์žˆ์—ˆ๊ณ  ์˜ค๋ฅ˜๋ฅผ ์ˆ˜์ •ํ•˜์ง€๋Š” ๋ชปํ–ˆ์ง€๋งŒ ์˜ค๋ฅ˜๋ฅผ ๊ณ ์น˜๊ธฐ์œ„ํ•ด ๊ตฌ๊ธ€๋ง์„ ํ•˜๋Š” ๊ณผ์ •์—์„œ ๋งŽ์€ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ๋˜ ์‹œ๊ฐ„์ด ๋˜์—ˆ๋˜๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค. (2์ฐจ ํ”„๋กœ์ ํŠธ ๋๋‚˜๊ณ  ๋‹ค์‹œ ๋ฆฌํŒฉํ† ๋ง ํ•  ์˜ˆ์ •)

V. ํ”„๋กœ์ ํŠธ ํšŒ๊ณ 

1. ์•„์‰ฌ์› ๋˜ ์ 

2. ์ž˜ํ•œ ์ 

3. ์ฒซ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์น˜๋ฉฐ..

profile
์—ด์‹ฌํžˆ ๊ณต๋ถ€์ค‘์ธ ์ดˆ๋ณด ๊ฐœ๋ฐœ์ž

3๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 3์›” 7์ผ

์ง€์—ฐ๋‹˜!! 1์ฐจ ํ”Œ์  ๋„ˆ๋ฌด ์ˆ˜๊ณ  ๋งŽ์œผ์…จ์–ด์š” ๐Ÿ‘๐Ÿป๐Ÿ‘๐Ÿป๐Ÿ‘๐Ÿป

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2021๋…„ 3์›” 14์ผ

์ง€์—ฐ๋‹˜,,, ์ง€์—ฐ๋‹˜๊ณผ ํ•จ๊ป˜ํ•ด์„œ ๋„˜ ์˜๊ด‘์ด์˜€์–ด์š” ใ…Žใ…Žใ…Ž
์šฐ๋ฆฌ ๋นจ๋ฆฌ ๋‹ค์‹œ ๋งŒ๋‚˜์—ฌ๐Ÿ’™

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2021๋…„ 3์›” 27์ผ

์˜ค์˜ค์•™ ์ง€์—ฐ๋‹˜ ์˜ฌ๋ฆฌ์‹ ๊ฑฐ ์ด์ œ๋ดค๋„ค์š”!!
๋งจ๋‚  ๋ฐค์ƒˆ๋ฉด์„œ ์ฝ”๋“œ ์งœ์‹  ์ง€์—ฐ๋‹˜..
๋„ˆ๋ฌด ๋ฉ‹์ ธ์šฉ..โค๏ธ๐Ÿ’•

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ