11 16.기능명세

📌 필수

로그인: local 인증, OAuth인증(passport)

• OAuth : GitHub, Naver

수입/지출 입력, 편집

• 스프린트 기간에 진행한 것 처럼 날짜별, 월별 수입/지출 항목을 지정하여 입력
• 수입/지출, 태그(Category), 결제수단 등의 정보가 필요

통계 시각화 및 통계

• 그래프 형태의 지표 관리
• 기간별 소비 패턴
  • 일 주 월 년 등 ...

각 수입/지출 별 소분류 및 태그 관리 기능

태그 추가 삭제 수정

태그별 필터링

텍스트로 파싱하여 내역 추가

문자 내용을 복사하여 붙여넣은 것을 가정

문자내용을 기반으로 함.

규식이 하..

📌 선택

소셜 기능 강화

• 가계부를 일종의 레포지토리처럼 만들어서 사용자를 등록하는 형식으로 개발
• 메인 페이지에 가계부 목록을 보여줘서 해당하는 가계부 내용을 보여줄 수 있도록 개발

1. 화면 공유하기

2. 가계부 함께 쓰기

화면을 구성하는데 필요한 데이터 외의 정보를 재진입시에도 유지(쿠키, 세션 등)

N-screen 디바이스 지원

반응형 css

@media

시간 관련 기능 강화

캘린더 UI

한 주 시작 요일 고르기(월요일이나 일요일 등)

윤년 고려

GMT

csv 파일 등을 이용한 import / export 구현

백업 용도?

벌크insert?

DB형식 그대로 하면 괜찮을 것 같습니다

• 찜찜하면 컬럼값만 좀 바꿔서..?

request, response에 대한 표준화

get, post, put, delete (Restfull하게)

return res.status(200).json({

success: true,

data: 'hello wolrd'

});

보안 취약 검토

인증 토큰 관리 ?

미들웨어 처리 ?

→ 유저 권한 확인

성능 최적화

React.Memo , useCallback, useMemo ...

캐시 ? 인데싱?

MobX..?

로딩컴포넌트 만드는것 괜찮을듯! (스켈레톤 UI)

optimistic update

• 글을 있는 것을 수정 → update를 누름 → 리렌더링 → 1 . 프론트 state 수정 2. 디비에서 새로 불러와서 → 먼저보여주고 get 요청 보내서 비교
• 글쓰기 하면 front 값을 이용해서 렌더링 하고 동시에 백엔드에 보내고
• 리렌더링 하면서 프론트에서 get으로 올린 것 확인하면서 상태 200이고 값 같으면 렌더링 결과 놔두기
• 아니면 삭제

자동화 도입(CI/배포)

깃 액션 + shell

브라우저 저장소 보조 활용 (쿠키, 스토리지 등)

로그인 정보

한 주 시작 요일 등 개인 설정 정보.

회의하고싶은거

베이스 디자인 - 실제 서비스를 고려하여 모바일버전(뱅셀)으로 우선 디자인을 정하고 시작

api설계(나중에)

백엔드 부터? 기능단위로? 개발 순서 (기능 단위로?)

MongoDB✅ vs Mysql

• NoSQL을 공부해서 사용해보고 싶다.

• 합당한 이유 ?

• 조인이 없어 읽기 빠름

• 비동기 드라이버를 사용할 수 있음

• 별도의 캐시 솔루션이 필요하지 않을 만큼 성능 문제에서 우월함.

• 스키마 구조를 고민할 필요 없이 개념적으로 데이터베이스를 설계하기 용이함.

• 데이터 import/export시 용이하다.

• 입력, 읽기 성능 (mongo > mysql) ⇒ 대부분 연산은 읽기 쓰기 ⇒ monogo ✅

• MobX ✅

• Atomic Design

• Story Book

• sass vs styled-component

  • 일단 styled-component로 하고 필요에 따라서 sass 를 사용 후 나중에 refactoring

학습사항

React, Typescript, MobX, Koa, Story Book, Atomic Design

화면 구성

로그인, 가계부 선택 페이지, 조회페이지, 통계페이지, 카테고리 설정 페이지, 달력 페이지, csv import

채팅방 형식의 텍스트 파싱 입력 / CSV 파일 import/export

• 카카오톡 라인 채팅방처럼 구성
• 채팅 입력창에 mms등 입력 값 넣으면 파싱
  • 파싱 잘 되었으면 메세지 답장 으로 결과 메세지 받음
• csv import / export
  • +버튼을 통해 csv Import
  • export를 카카오톡 파일 답장 받듯이 구현
• 파일 드래그엔드랍으로 카카오톡 데스크탑 파일 드래그해서 전송하는 것 처럼 csv 전송