수입과 지출을 관리하는 웹용 가계부
Notion Docs
Deployments

금교영	표석훈

Built With

Back-End 개발

• NodeJS 기반의 Express 사용
• 데이터 베이스로 MySQL 사용
• Public 폴더를 통해 Front-End 파일 제공 (index.html)

Front-End 개발

• Babel을 통해 호환성 높은 코드 제공
• Webpack을 통해 일관성 있는 개발 시도
• webpack dev, webpack prod 환경을 나누어 개발 시도

Prerequisites

nodeJS, npm 사용 가능한 상태에서 의존 라이브러리들을 받습니다.

npm install

Run & Deploy

1. Express 서버에서 해당 환경 변수를 사용하며, dotenv를 통해 제공하고 있습니다. rootDirectory에 .env 파일을 생성하여 아래의 내용을 기입합니다.

   PORT = {Express 구동 Port}
   
   DB_HOST = {MySQL Host}
   DB_USER = {Database User}
   DB_PASSWORD = {MySQL User Password}
   DB_PORT = {MySQL Port}
   DB_NAME = {Database Name}
   
   NODE_ENV = {"production" || "development"}
   

2. 개발을 진행할 때는 dev server를 실행합니다.

   # server dev모드 시작
   npm run server:dev
   
   # client dev모드 시작
   npm run client:dev
   
   # 동시에 시작
   npm run dev

3. 서버에서 DataBase 연결 Log 들이 모두 완료되었다는 뜨면 성공입니다.

   PAYMENT_METHOD TABLE CHECK...
   PAYMENT_METHOD TABLE CHECKED!
   CATEGORY TABLE CHECK...
   CATEGORY TABLE CHECKED!
   HISTORY TABLE CHECK...
   HISTORY TABLE CHECKED!
   ALL TABLE CHECKED!
   

4. production모드를 진행할 때는 Express 서버에서 Front-End 화면의 index.html을 Public으로 제공해야합니다. webpack으로 ./server/public 위치에 번들링을 먼저 해야합니다.

   # webpack production모드로 번들링
   npm run build
   
   # 서버 실행
   npm run server:start

5. 클라우드 환경에서 배포를 진행할 때는 다음과 같은 명령어를 사용합니다. (pm2설치 필요)

   npm run deploy

UIs (현재까지 구현 된)

메인 화면

현재 DB에 저장되어 있는 목록들이 전부 불러와집니다.

• 모든 값이 입력되면 지출 수입 내역을 추가할 수 있습니다.
• 내역들을 클릭하면 수정할 수 있습니다.
• 상단의 체크박스로 지출, 수입을 필터링할 수 있습니다.

캘린더

• 날짜에 해당하는 가계부 내역의 날짜별 지출,수입 계산 및 전체 총액을 볼 수 있습니다.

분석 페이지

• 가계부 지출 내역을 카테고리별로 볼 수 있습니다.
• 카테고리 별로 전체 지출 내역에 해당하는 비율을 볼 수 있습니다.
• 카테고리를 클릭하면 해당하는 최근 1년동안의 지출 내역을 보여주는 그래프와 각 상세정보를 볼 수 있습니다.

ETC

• 프로젝트 위키 (스크럼, 기능 분석)