프로젝트 기획_20210503_Day8

프로젝트 기획 프로세스

1. 프로젝트 아이디어 선정 [O] -> 화원 이커머스 웹사이트

2. 팀장, 팀 이름, 프로젝트 이름 정하기 [O] -> 프로젝트 이름 Flower Shop SeolimHwa

3. 팀원별 역할 설정 [O] -> 프론트엔드 2명

4. 프로젝트 기획 및 범위 설정 [O] -> 기능, 페이지 베이직/어드밴스드 로 구분

5. 시스템 아키텍처 설계[O]

6. 스키마 작성[O] -> 파이어스토어 JSON 트리 구조

7. API 문서 작성

8. 프로젝트 태스크 카드 작성 및 분배

9. 마일스톤 작성

10. 팀 규칙 작성 [O] -> 스택, 개발환경 설정

---

진행사항

1. Clinet 요청, UI 수정

1) 클래스 섹션 추가

데모 이미지로 추후 실제 서림화 꽃 이미지 적용 예정

2) 카테고리 추가 사항 반영

추후 디자인 예정

3) 상품 디테일 페이지

주문타입, 포장지/꽃 색상, 편지추가->메세지카드, 추가옵션(투명/종이 백) 반영

---

2. *Atomic Design 진행

Atomic Design은 원자가 결합해 분자가 되고, 분자가 결합하여 유기체가 되는 것처럼, UI 컴포넌트를 가장 작은 단위로 쪼개고 합치며 UI를 마치 레고 블럭 쌓듯이 만들어나가는 방법

Advantage of using Atomic Design

- You can mix and match components

- Creating a style guide is simple

- Easy to understand layout

- Code is more consistent

- No focus on pixel-perfect designs

- Quicker prototyping

- Easier to update and remove parts of the site

- More modular file structure

- Fewer components overall

- Explore Pattern Lab

 

 

*Atomic Design 이란? (for more detail)

- github.com/danilowoz/react-atomic-design

- atomicdesign.bradfrost.com/chapter-2/

- Atomic Design을 응용해 React 프로젝트 구조를 설계하고 기술 스택을 결정한 경험

- Reason you need to use Atomic Design

---

3. 프로젝트 사용 스택 1차 결정

- React

- Redux(Thunk or Saga)

- Typescript

- Styled Component

- Story Book

- Firebase(Database/Authentication/Hosting)

---

오늘의 생각

Atomic Design 이라는 것을 처음 해본다.

개념은 이해가 되나, 적용이 익숙치 않아 초반에는 시간이 오래걸리고 조금 어려운 느낌이 들지만

나중에 유지 보수 관리할 때에는 훨씬 효율적일 것 같다.

무엇보다 스타일드 컴포넌트를 사용하여 컴포넌트 단위(더 작게는 원자나 분자 단위)로 스타일링을 할 수 있기 때문에 Atomic Design 과 그 맥(아토)을 같이 한다고 생각한다. 시너지 효과가 있을 것 같다.

추가적으로 블로깅으로 개념 정리가 필요하다.

추가 진행할 사항

블로깅 할 개념

• Story book (팀원)
• Typescript (나)
• Redux Thunk or Saga? → concept / how to use (팀원)
• Atomic design (팀원)
• Styled Component Advanced Concept (나)
• Firebase efficient database composition and usage (나)