# 5주차 공부 할 목록

## 개발해야 할 기능
- [ ] 회원가입/로그인 구현
- [ ] 전체적인 DB 및 API 구상
- [ ] 월에 해당하는 화면으로 이동
- [ ] 내역/달력/통계 탭 구현
- [ ] 거래 내용 입력
- [ ] 수입/지출 필터링
- [ ] 거래 내역 리스트 수정, 삭제
- [ ] 통계 -> 카테고리별 지출 그래프화
- [ ] [선택] 달력화면 구현 + 수입/지출 필터링
- [ ] [선택] 결제 수단 관리 팝업
- [ ] [선택] 일별 지출 그래프화

---

## 개발 순서

### 1단계
- Node Express 구조 구상
- DB ERD 구상
- Web API 구상

### 2단계
- Node express 프로젝트 만들기
- 서버 자동배포
- DB Table 만들기 및 DB 연결

### 3단계
- JWT 인증 구현
- **Web API 구현**

### 4단계
- FE 구조 구상
- FE 레이아웃 구상
- 테스트 구조 구상

### 5단계
- **FE 만들기**
- 테스트 코드 작성

---

## FE
- **데이터 시각화**
- SVG
- https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart

- **Observer Pattern**
- https://pjh3749.tistory.com/266

- **캐시**

- **테스트**

- **SPA Routing**
- https://poiemaweb.com/js-spa
- History
- https://lucas.codesquad.kr/boostcamp-2020/course/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-JS/6%EC%A3%BC%EC%B0%A8-%EA%B0%80%EA%B3%84%EB%B6%80%EC%84%9C%EB%B9%84%EC%8A%A4(2-2)/FE-%EB%9D%BC%EC%9A%B0%ED%8C%85

## BE

- Mysql
- **ERD**
- https://lucas.codesquad.kr/boostcamp-2020/course/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-JS/5%EC%A3%BC%EC%B0%A8-%EA%B0%80%EA%B3%84%EB%B6%80%EC%84%9C%EB%B9%84%EC%8A%A4/BE---ERD
- 조인, 정규화 ,인덱스
- https://lucas.codesquad.kr/boostcamp-2020/course/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-JS/5%EC%A3%BC%EC%B0%A8-%EA%B0%80%EA%B3%84%EB%B6%80%EC%84%9C%EB%B9%84%EC%8A%A4/%EC%A1%B0%EC%9D%B8,-%EC%A0%95%EA%B7%9C%ED%99%94,-%EC%9D%B8%EB%8D%B1%EC%8A%A4

- **서버 자동배포**
- https://github.com/boostcamp-2020/javascript-w3-todo/blob/J035/deploy.sh
- 유저 인증
- Passport
- https://www.opentutorials.org/course/3402/21864
- Oauth
- **JWT**
- https://youtu.be/7Q17ubqLfaM

- 서버 구조
- https://velog.io/@hopsprings2/%EA%B2%AC%EA%B3%A0%ED%95%9C-node.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90-%EC%84%A4%EA%B3%84%ED%95%98%EA%B8%B0
- https://lucas.codesquad.kr/boostcamp-2020/course/%EC%8A%A4%ED%94%84%EB%A6%B0%ED%8A%B8-JS/5%EC%A3%BC%EC%B0%A8-%EA%B0%80%EA%B3%84%EB%B6%80%EC%84%9C%EB%B9%84%EC%8A%A4/BE-Express-%EB%AA%A8%EB%93%88-%EB%B6%84%EB%A6%AC%ED%95%98%EA%B8%B0

## 프로젝트

- Git
- **issue 등록시 담당자/milestone/작업의 크기 등 포함**
- https://uang.tistory.com/12
- git tag 활용

- git commit 컨벤션 활용

    - feat: 새로운 기능을 추가할 경우
    - fix: 버그를 고친 경우
    - docs: 문서 수정한 경우
    - style: 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
    - refactor: 프로덕션 코드 리팩터링
    - test: 테스트 추가, 테스트 리팩터링 (프로덕션 코드 변경 없음)
    - chore: 빌드 테스크 업데이트, 패키지 매니저 설정할 경우 (프로덕션 코드 변경 없음)

## 옵저버 패턴 개인 정리

- View = Observer = Handler
- Model = Observerable = EventSource

`Model.observers = [view1, view2, view3]`

model.addEventlistener(e => {

})