Skip to content

Latest commit

ย 

History

History
97 lines (63 loc) ยท 4.39 KB

File metadata and controls

97 lines (63 loc) ยท 4.39 KB

OSDS-client

Online space for family

Design Requirement - Figma

Period : 22.07.28 ~ 22.08.19

๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ Participants ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ

name ์—ญํ• 
unanchoi Develop / Review / Deploy
euije Develop

์˜์ œ

๏ฟฝ์ฃผ์–ด์ง„ ๊ณผ์ œ

  • ํ•™์Šต ๊ธฐ๊ฐ„์ด ์งง์•„, ์ˆ™๋ จ๋„๊ฐ€ ๋†’์ง€ ์•Š์€ React๋กœ ๋””์ž์ธ ์š”๊ตฌ ์‚ฌํ•ญ์„ ๊ตฌํ˜„ํ•ด์•ผ ํ•จ
  • ๋งค์ฃผ 1ํšŒ ์˜คํ”„๋ผ์ธ ํšŒ์˜ ๋•Œ, ๋ฐ€๋„ ๋†’์€ ์†Œํ†ต์ด ์ด๋ฃจ์–ด์ ธ์•ผ ํ•จ
  • ์œ ์ € ๋””๋ฐ”์ด์Šค์— ๋”ฐ๋ฅธ ๋ฐ˜์‘ํ˜• ์›น์„ ์„ค๊ณ„ํ•ด์•ผ ํ•จ
  • S3 Image hosting, ๊ทธ๋ฃน ์ดˆ๋Œ€ ์ฝ”๋“œ, ๋กœ๊ทธ์ธ/๋กœ๊ทธ์•„์›ƒ, CRUD ๋“ฑ ๊ธฐ๋Šฅ์  ๊ตฌํ˜„์˜ ๊ฒฝํ—˜ ๋ถ€์กฑ

์ง‘์ค‘ํ•œ ๊ฒƒ

  • ๊ธฐ์ˆ 
    • styled-components(CSS-in-JS)๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ†ตํ•ด semanticํ•œ Dom๊ตฌ์กฐ๋ฅผ ์ž‘์„ฑ
    • flex-box๋ฅผ ํ†ตํ•ด ๋ฐ˜์‘ํ˜• ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„
  • ์†Œํ†ต
    • ์ƒ์„ธํ•œ Pull-Request (#5, #6 ๋“ฑ) ์ž‘์„ฑ์„ ํ†ตํ•ด ๊ฐœ๋ฐœ์ด ์–ด๋А ์ •๋„ ์ง„ํ–‰ ๋˜์—ˆ๋Š”์ง€ ๊ณต์œ 

Lesson & Learn

  • '๊ฐœ๋ฐœ' ์ด๋ผ๋Š” ๊ณผ์ •์ด ์ƒ๊ฐ๋ณด๋‹ค ๋ฆฌ์†Œ์Šค๊ฐ€ ํฐ ํ–‰์œ„์ด๋‹ค.
    • '๋ฆฐ ์Šคํƒ€ํŠธ์—…'์˜ ํ•„์š”์„ฑ - ์ž‘์€ ๋‹จ์œ„์˜ Workingํ•œ ๊ฐ€์„ค์„ ๋น ๋ฅด๊ฒŒ ๋“ค๊ณ  ์˜ค๋Š”๊ฒŒ ํŒ€์›๋“ค์˜ ๋ถˆํ™•์‹ค์„ฑ์„ ์ค„์—ฌ, ๊ฐœ๋ฐœ์˜ ์›๋™๋ ฅ์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฆฌ๋”๋Š” ํŒ€์›์„ ์ง€์†์ ์ธ ๋™๊ธฐ๋ถ€์—ฌ๋ฅผ ๋„ฃ์–ด์ค„ ์˜๋ฌด๊ฐ€ ์žˆ๋‹ค.
    • ๊ฐœ๊ฐœ์ธ ๊ทผ๋ณธ '์š•๊ตฌ'์— ๋Œ€ํ•œ ์ดํ•ด ํ•„์š”์„ฑ - ๊ฐ์ž ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด ์–ป๊ณ  ์‹ถ์€ ๊ฒƒ์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์—(์ฐฝ์—…, ๊ฐœ๋ฐœ ๊ฒฝํ—˜, ์ŠคํŽ™, ์นœ๊ตฌ ๋งŒ๋“ค๊ธฐ, ...) ๊ฐœ์ธ์ด ์ด๋ฃจ๊ณ  ์‹ถ์€ ๋ชฉํ‘œ(๋‚ด์  ๋™๊ธฐ)๋ฅผ ๋‹ฌ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ์—ญํ• ์„ ๋ถ€์—ฌํ•ด์•ผ ํ•œ๋‹ค.
    • ๊ฐ€์‹œ์ ์ธ ์„ฑ๊ณผ ๋‹ฌ์„ฑ์˜ ํ•„์š”์„ฑ - ํŒ€์›๋“ค์€ ๋ˆˆ์— ๋ณด์ด๋Š” ์„ฑ๊ณผ๊ฐ€ ์—†์œผ๋ฉด ์—ด์ •๊ณผ ๋™๊ธฐ๋ฅผ ์žƒ์–ด๋ฒ„๋ฆด ์ˆ˜ ์žˆ๋‹ค. ๊ฒฝ์ง„๋Œ€ํšŒ์™€ ์ˆ˜์ƒ ๋“ฑ์„ ํ†ตํ•ด ์šฐ๋ฆฌ๊ฐ€ ํ‹€๋ฆฌ์ง€ ์•Š๋‹ค, ์ž˜ํ•˜๊ณ  ์žˆ๋‹ค๋Š” (์™ธ์ ) ๋™๊ธฐ๋ฅผ ๋ถˆ์–ด ๋„ฃ์–ด์•ผ ํ•œ๋‹ค.
  • ํ˜ผ์ž ํ”„๋กœ๊ทธ๋ž˜๋ฐ ํ•˜๋Š” ๊ณผ์ •์€ ์™ธ๋กญ๋‹ค.
    • ๋‚ด๊ฐ€ ์ž‘์„ฑํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ํšจ๊ณผ์ ์ธ๊ฐ€, ๋†“์น˜๊ณ  ์žˆ๋Š” ๊ฒƒ์€ ์—†๋‚˜ ํ•˜๋Š” ์˜๋ฌธ์ด ๋“ค ์ˆ˜ ์žˆ๋‹ค. ํŽ˜์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ, ์Šคํ„ฐ๋”” ๋“ฑ๊ณผ ์™ธ๋กœ์›€์„ ๋œ์–ด์ค„ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

ํ•œ๊ณ„์ 

  • ๊ธฐ์ˆ 

    • ๋ฐ์ดํ„ฐ ์Šคํ‚ค๋งˆ์— ๋Œ€ํ•œ ๋ถ€์กฑํ•œ ์ดํ•ด๋กœ field(column)๋ช…์„ ํ†ต์ผ ์‹œํ‚ค์ง€ ๋ชปํ•จ.
    • font-size์— ๋Œ€ํ•œ ์ƒ๋Œ€ ๋‹จ์œ„๋ฅผ rem/em์œผ๋กœ ์ž‘์„ฑํ•˜์ง€ ๋ชปํ•จ.
    • ํŽ˜์ด์ง€ ๋ณ„๋กœ Container๊ฐ€ ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์ •์˜ํ•˜์—ฌ, ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋–จ์–ด์ง.
    • CORS, Cookie, Session์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ์ง€์‹์ด ์—†์–ด ๋ฐฐํฌ ๋ฐ ๋ฐฑ์—”๋“œ์™€์˜ ํ†ต์‹ ์— ์–ด๋ ค์›€์„ ๊ฒช์Œ.
    • Props ๋ฐ State ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ์ดํ•ด ์—†์ด ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ํ•จ.
    • Branch ์ „๋žต์„ ๋ณต์žกํ•œ Git-Flow๋กœ ์‚ฌ์šฉํ•˜์—ฌ Branch ์‚ฌ์šฉ์— ํ˜ผ๋™์ด ์žˆ์—ˆ์Œ
  • ์†Œํ†ต

    • ์›ํ™œํ•œ ํ”„๋กœ์ ํŠธ ์ง„ํ–‰์„ ์œ„ํ•ด Kanban Board๋ฅผ ๋„์ž…ํ•˜์˜€์œผ๋‚˜, ์˜จ๋ณด๋”ฉ์ด ๋ถ€์กฑํ•˜์—ฌ ํŒ€์›๋“ค์˜ ํ”„๋กœ์„ธ์Šค ์ดํ•ด๋„๊ฐ€ ๋–จ์–ด์กŒ์Œ
    • ๊ธฐํš - ๋””์ž์ธ - ๊ฐœ๋ฐœ - ๋ฐฐํฌ - ํ”ผ๋“œ๋ฐฑ cycle์˜ ๊ธธ์ด๊ฐ€ ๊ธธ์–ด ์ผ์ •์ด ๋ฏธ๋ค„์ง€๋Š” ๊ฒฝ์šฐ ์กด์žฌ.

๋‹ค์Œ ๋‹จ๊ณ„

  • ํ‚ค์›Œ๋“œ : Typescript, Component, Github-flow, EC2, CI/CD

๐Ÿ–ฅ Implementation

1. Run Server

glt clone https://github.com/NodabFamily/OSDS-client.git

yarn start

or

npm run start

๐Ÿ—’ Commit Convention

์ œ๋ชฉ ๋‚ด์šฉ
feat ๊ธฐ๋Šฅ ์ถ”๊ฐ€
fix ๋ฒ„๊ทธ ์ˆ˜์ •
refactor ๊ธฐ๋Šฅ ๊ฐœ์„  ๋ฐ ์ฝ”๋“œ ์ข‹์€ ๋ฐฉํ–ฅ์œผ๋กœ ๊ฐœ์„ 
docs ๋ฌธ์„œ ๊ด€๋ฆฌ
style ์ฝ”๋“œ ์Šคํƒ€์ผ ๋ณ€๊ฒฝ, ์ฝ”๋“œ ๊น”๋”ํ•˜๊ฒŒ ๊ด€๋ฆฌ
chore ๊ธฐ๋ณธ ์„ธํŒ… ๋ฐ settings.py ๊ด€๋ จ, ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ

Deploy

Site
github-page