[PROJ] 버젯버디

1st Meet

23.02.08 Wed

📌 Github: BudgetBuddy 깃허브
📌 Figma : 공유가계부 기획 및 디자인
📌 Drawio : BudgetBuddy 스키마 및 플로우차트

Essential ( 최소 단위 )

• 리액트 프로젝트 구조(아키텍처)

  • 웹 기반(리엑트)으로 만들기
  • Budget Buddy(프로젝트 이름)

I. 수입/지출 관리(개인/공용)

• 캘린더
• 가계부(카테고리)
• 카테고리 기반 분석 기능
• 그래프
• 설정(카테고리, 태그 설정)

II. 사용자 인증

• 로그인/회원가입
• 마이페이지
• 회원정보/수정/탈퇴

III. 가계부 공유 권한 관리

• 접근/읽기/쓰기 기능

IV. 커뮤니티 기능

• 게시판/블로그 형식

Advanced

• typescript
• 표(유사 Trello, Tasksboard ...)
• [Account-Type-Category-Tag]
• 계획/목표치
  • 예산안 짜기
• 푸쉬 메시지
  • 리마인더: 정해진 시간에 가계부 작성하라는 메세지
  • 목표치 도달 정도 알림 메시지
  • 고정비용 및 고정수입
• 커뮤니티/컨설팅 서비스
• 비로그인
• 리팩토링
  • Next.js
  • 크로스 플랫폼(리팩토링)
• 공유가계부 접근 리스트 관리(공유)

---

2nd Meet

23.02.13 MON

Assignment🔥🔥

1. 기본 카테고리, 문구 생각하기

• 메뉴 이름
  • 가계부 페이지 : 버젯관리, 위드버젯
  • 커뮤니티 : 버젯커뮤니티, 버젯게시판, 버젯토픽
• 가계부에 들어갈 만한 분류 및 카테고리
  • 분류: 지출 & 수입 (저축: 따로 분류를 해야하는지)
    • 지출
      • 결제수단 : 현금, 체크카드, 신용카드
      • 카테고리 : 식사, 생활, 주거, 교통, 통신, 의류, 생필품, 문화생활, 의료/건강, 교육, 경조사, 빚, 투자, 저축, 기타
    • 수입
      • 결제수단 : 현찰(동전 & 지폐), 계좌
      • 카테고리 : 이월, 급여, 용돈, 상여, 금융수입, 보험, 적금, 기타

2. 상태 관리 선택하기(Context API, Redux, React Query, Mobx...)

• Redux → React Query + Recoil

  • Redux Toolkit + saga
    리덕스는 전역 상태관리(front), 비동기 로직을 사용하기 위해서는 리덕스 미들웨어를 사용해야한다.
    주로 많이 알려진 미들웨어는 Redux Thunk, Redux Saga가 있다.
    - Thunk는 Saga에 비해 보일러플레이트 코드가 적고 이해하기 쉬워 서비스에 빠르게 적용할 수 있지만, 초보자의 경우 비동기 로직이 복잡해지거나 소스가 더러워 질 수 있다.
    - Saga는 Thunk에 비해 초기 구현이 힘들고(boilerplate양이 많다), 제네레이터 등의 개념을 알아야 돼 러닝커브도 높지만 썽크에 비해 프로젝트 규모를 키우기 쉽고 깔끔한 로직을 구현할 수 있다.
  • 참고:
    - Context API vs Redux 😇
    - Redux 시작하기
    - 왜 리덕스 사가(Redux-saga) 인가?
    - Redux Thunk & Saga

3. UI Framework 및 Library 선택하기

• Tailwind CSS + PostCSS
  참고: CSS Frameworks

Conclusion✨

1. 기본 카테고리, 문구 생각하기

• 메뉴 이름 및 문구는 추후 작업
• 가계부에 들어갈 만한 분류 및 카테고리
  • category: 수입(+) & 지출(-) & 이동(=)
    추가적인 카테고리 추가는 advanced
  • tag: template으로 주고 custom화
  • 결제 수단: 현금, 체크카드, 신용카드 등 template은 주지만 custom화

2. 상태 관리 선택하기(Context API, Redux, React Query, Mobx...)

• React Query + Recoil
  리덕스를 거쳐 리팩토링으로 리액트 쿼리 + 리코일로 가고 싶었으나 시간 및 해야 할 것들이 많아 바로 리액트 쿼리 + 리코일로 꼬우!!

3. UI Framework 및 Library 선택하기

• tailwindcss + PostCss

---

3rd Meet

23.02.24 Fri

Assignment🔥🔥

1. 리액트 클린 아키텍쳐

디자인 패턴

• Presentational and Container Component Pattern
  • Presentational(보여지는것)과 Container(동작하는것)을 분리하는 패턴이다.
  • 장점:
    • 관심사 분리: 기능과 UI가 분리되어 구조 이해도가 올라간다.
    • 재사용성을 높인다: presentational 컴포넌트가 의존성을 갖고있지 않기 때문에
    • 마크업이 편하다: 이 패턴을 사용하면 레이아웃 컴포넌트가 추출될 수 밖에 없는데, 레이아웃 컴포넌트를 통해 똑같은 마크업을 작성하는 것을 방지한다.
  • Dan Abramov가 처음 소개했지만 현재 추천하지는 않는다.
    • 필요하지도 않는데 너무 맹목적으로 이 패턴을 강제하는 현상이 있다.
    • 로직을 분리하는 작업을 이제는 Hooks를 통해 할 수 있다.
• Atomic Design Pattern
  • 2013년 Brad Frost에 의해 처음 제시된 디자인 패턴
  • 화확적 관점에서 영감을 얻은 디자인 시스템이다.
  • 컴포넌트를 atom, molecule, organism, template, page의 5가지 레벨로 나눈다. → 단계별로 추상적인 것에서 구체화하는 단계를 가진다.
  • 장점은 5단계로 컴포넌트를 나누면서, 자연스럽게 컴포넌트 재활용성을 높이는 구조로 컴포넌트를 설계하게 된다는 점
  • 단점은 틀에 맞추다보니, Props가 많아지게 되고 재활용성은 높지만 실질적인 역할에 충실하지 못할 수 있다.
• State reducer pattern
  • 유저에게 컴포넌트를 내부적으로 제어할 수 있는 더 발전된 방법을 제시
  • 제어역전이 가장 심화된 패턴
  • 사용자에게 컴포넌트 동작을 어떻게 변화시킬지 가장 진보된 방법을 제공한다.
  • 구현이 어렵고, 가독성이 안좋다.
• VAC
  React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개

디렉토리 구조

project
├── 📁public
└── 📁src
    ├── 📁assets
    │   ├── 📁Images
    │   ├── 📁 …
    │   └── 📁Icons
    ├── 📁components (여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더)
    ├── 📁pages (해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리)
    ├── 📁layouts/parts (Navbar, Footer, Sidebar 같은 레이아웃 파일)
    ├── 📁hooks
    ├── 📁services (api)
    ├── 📁store (If using Redux)
    └── 📁utils (상수나 공통 함수, 유틸리티를 담는 폴더.)

• 참고
  • [React] React 디자인 패턴
  • 아토믹 디자인을 활용한 디자인 시스템 도입기
  • [UI] 아토믹 디자인이란 무엇인가?
  • 유용한 리액트 패턴 5가지
  • React 아키텍쳐, 디자인 시스템, 파일 구조에 대한 고찰

Conclusion✨

사정에 의해 다들 못하셔서 정할 수 가 없었다.
그래서 각자 쓰고 싶은 디자인 패턴을 사용해 작은 사이드 프로젝트를 하기로 진행.

나는 open api를 사용해서 간단하게 만드는 걸로 말했다.
명언 api를 받아 보여주는 페이지 QuotesMark를 만들기로 함

---

4th Meet

23.03.11 Sat

Assignment🔥🔥

사이드 프로젝트: QuotesMark

• 피그마(디자인)

• 마일스톤으로 원래 만나기로 했던 일정인 3월 4일 due date 지정.

• 제일 필요한 기능 및 필요한 페이지 등 설정을 이슈로 만들어 마일스톤 및 프로젝트에 연결.

• 커밋에 해당 내용 디테일하게 작성.

• 아토믹패턴은 시간적 여유가 부족할거같아 패스 했고, 유용한 리액트 패턴 5가지를 사용해 디자인 패턴을 만들고 싶었으나 QuotesMark 사이드 프로젝트가 복잡하게 구성된 프로젝트가 아니다 보니 시도는 했으나 제대로 적용하지 못했다.

Conclusion✨

일단은 Presentational and Container Component Pattern형식으로 진행하기로 정했다.

폴더 구조는 아래와 같이 구성했다(변경될 경우가 있을 수 있음)

project
├── 📁public
└── 📁src
    ├── 📁assets
    │   ├── 📁Images
    │   ├── 📁 …
    │   └── 📁Icons
    ├── 📁components
    ├── 📁pages
    ├── 📁layouts
    ├── 📁hooks
    ├── 📁api
    └── 📁utils

store 부분은 recoil로 작업해야되서 더 알아보고 하기로 정했다.

---

Recent Meet

23.03.17 Fri

그동안 사이드 프로젝트를 진행하고, 나는 추가적으로 버젯버디 디자인을 하기로 했어서 페이지 디자인을 하고 있는중에 만났다.

Conclusion✨

미팅을 가진 결과, 현재 버젯 버디가 생각보다 큰 프로젝트(자잘하게 구성해야되는 부분-디테일-이 많다)이기도 하고, 다들 욕심이 생겨서 일단 사이드 프로젝트를 끝내고 좀더 시간을 갖고 기획적인 부분과 프로젝트명(chatGPT 이자식은 프젝명 좀 추천해달라닌깐 있는거 추천해주더라..!😡😡)도 바꾸기로 결정했다.

이제 일단 QuotesMark에 집중해야한다!