# javascript-p1-cashbook 웹풀스택 프로젝트#1 - 가계부 ## 초기 설계 ### 백엔드 - Node Js 14.15.3 - Express Js - Template PUG - neDB - 각 라우트 별로 pug탬플릿을 이용해서 서버사이드에서 페이지를 만들어서 랜더링한다. 기본적으로는 탬플릿기반으로 페이지를 랜더링하고, dom api, addeventlistener를 이용해서 이벤트를 등록할 예정 - 라우트 (화면) - main: 파라미터로 2020-06 이런식으로 년도와 월을 받아서 각 페이지를 랜더링 - 넘어오는 파라미터는 정규표현식을 활용해서 유효성 검사를 진행 - 넘어오는 파라미터로 db에서 해당 정보를 조회 - 불러온 db정보로 메인에서 내역들을 그린후 페이지를 반환 - calendar: main처럼 파라미터로 년도,월정보를 받아서 페이지 랜더링 - statistic: 다른 페이지처럼 년도,월정보를 파라미터로 받고, 추가로 선택한 카테고리도 파라미터로 받아서 페이지 렌더링 - 내용 입력, 수정 api - 일자,분류,내용,결제수단,금액을 받아서 입력하는 요청 구현 - 위와 동일하게 수정하는 요청 구현 - 결제 수단 추가 및 삭제 api - 결제 수단 관리 api 구현 ### 프론트 pug template을 이용해서 구현 pug 탬플릿은 상속(Inheritance)을 이용하면 html 요소들을 컴포넌트 단위로 재사용할 수 있어보인다. 피그마 디자인내에서 주어진 컴포넌트 디자인을 활용해서 pug를 컴포넌트 단위로 분리해볼 계획이다. 캘린더, 원 그래프, 소비 추이 그래프 등은 구현에 리소스가 많이들 것으로 예상해서 구현과 애니메이션구현도 분리할 예정이다. ## 가계부 서비스 ## 일 단위 계획 메인, 달력, 통계 페이지 ### Day 1 백엔드 - 프로젝트 설계 및 미션 분석 - 사용 스택 선정 및 공부 - 프로젝트 init ### Day 2 백엔드 - DB 설계 - 각 페이지 라우트 설정 - main - calendar - statistic - api 구현 - 내용 입력 api - 결제 수단 관리 api ### Day 3 프론트 기본 레이아웃(메인 페이지) - 전체 레이아웃 구현 - header 구현 - 내역 컴포넌트 구현 - 내역 컴포넌트로 전체 내역 구현 - 수입, 지출 필터 적용 ### Day 4 프론트 레이아웃 2(메인 페이지) - 입력 창 구현 - 입력 창 드롭다운 구현 - 결제수단 모달창 구현 - 내역 수정 구현 ### Day 5 피어세션 - 코드 리펙토링 및 미완성 부분 마무리 ### Day 6 프론트(달력 페이지)(calendar) - 달력 레이아웃 구현 - 달력 레이아웃에 일자별 수입/지출 기입 구현 - 총 수입/지출 및 총계 출력 ### Day 7 프론트(차트 페이지)(statistic) - 통계 차트 구현(원그래프) ### Day 8 프론트(차트 페이지)(statistic) - 카테고리 소비추이 그래프 구현 ### Day 9 - 배포 및 구현 마무리 및 테스트 ### Day 10 피어세션 - 최종 테스트 ### DB 설계 cashBook table id date category comment payment (foreign key) price priceFlag (지출인지 수입인지) payment table router → validate → controller → db select → pug component → layout → rendering ### CSR과 SSR고민 - template(Pug)을 이용한 SSR - JS의 Dom API를 이용한 클라이언트 사이드에서의 동적 랜더링 주어진 미션에서 어느부분에서 어떤 방식을 사용해야 할지 고민입니다.