gywlsp / web-moneybook-07 Goto Github PK

Moneybook

우아한테크캠프 5기 3~4주차 미션 - 가계부

👀 View Demo
🔗 Project Wiki

2022 우아한테크캠프 5기 3~4주차 미션 - 가계부 입니다.

프로젝트 진행기간 총 10일 중 9일을 pair programming으로 개발했습니다.

• Vanilla JavaScript

  • 옵저버 패턴(Observer Pattern)를 활용한 상태관리

  • History API를 이용해 SPA 구현

  • Canvas API를 이용해 도넛 차트, 라인 차트 구현

  • requestAnimationFrame Web API를 이용한 애니메이션 구현

    

• Webpack
• MySQL
• pm2, crontab을 활용한 무중단 배포

이 프로젝트를 로컬에서 세팅하는 방법을 소개합니다.

• npm

  $ npm install npm@latest -g

1. Clone the repo

   $ git clone [email protected]:woowa-techcamp-2022/web-moneybook-07.git

2. Install NPM packages

   $ npm install

3. .env 파일을 만들고 Database 설정을 입력합니다.

   $ touch .env

   # .env
   DB_HOST=
   DB_USER=
   DB_NAME=
   DB_PASSWORD=
   DB_PORT=
   

4. client build & run project

   $ npm run build
   $ npm run start

• 도넛 차트
• 라인 차트
• 스크롤 탑 버튼
• loading indicator
• 404 Not Found Page