---
# System prepended metadata

title: javascript-p1-cashbook

---

# 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를 이용한 클라이언트 사이드에서의 동적 랜더링
주어진 미션에서 어느부분에서 어떤 방식을 사용해야 할지 고민입니다.