---
# System prepended metadata

title: README

---

# README

# 내가 쓴 돈을 💸  내가 쓴다 ✍! 

<br>
<br>

<p align="center"><img  width="640" alt="스크린샷 2020-12-12 오후 8 17 55" src="https://user-images.githubusercontent.com/49441876/101984209-42af3500-3cc3-11eb-9cf6-b7317170f523.png"></p>


## 📌 서비스 소개 

`내돈내쓴` 개인의 입출금 및 가계재정을 시각화 및 분석할 수 있는 `인터랙티브`한  웹 서비스입니다.

#### 자세한 사항은 [wiki](https://github.com/boostcamp-2020/Project16-C-Account-Book/wiki) 참고


<br>
<br>

## 🔗 배포URL

[배포URL](http://118.67.135.19:8080/)

### 테스터 계정<br>

```
GitHub ID : account-book-c

GitHub Password: boostcamp16c!
```

<br>
<br>


## 🧑🏻‍💻 팀원소개
| **J034** 김민섭 | **J084** 박재윤 | **J129** 윤영우 | **J210** 최홍일 |
| -------- | -------- | -------- |-------- |
| ![](https://i.imgur.com/ytSC8lm.png)     | ![](https://i.imgur.com/JmlXqG4.png) | ![](https://i.imgur.com/86MMg8O.jpg)| ![](https://i.imgur.com/YgGqQvQ.png) |
|[**@msmk530**](https://github.com/msmk530) |[**@j03y14**](https://github.com/j03y14)  |  [**@yoonwoo123**](https://github.com/yoonwoo123)  | [**@hi0826**](https://github.com/hi0826)|
|*'근본' 과 '이유'가 있는<br> 개발이 하고 싶습니다.* | *이것도 만들고 싶고<br> 저것도 만들고 싶다...*| *한마디 "주장"보다 <br>한마디 "경청"하자.*| *"아무거나"와 <br>"다 좋습니다"는 없습니다.* | 


<br>
<br>

## 💻 사용방법

### Git Clone

- 프로젝트 clone

  ```
  git clone https://github.com/boostcamp-2020/Project16-C-Account-Book.git
  ```


### FrontEnd

- FE module Install
  ```
  npm i
  ```
- FE `dotenv` template
  ```
  GITHUB_CLIENT_ID=[Gihub OAuth Client ID]
  NAVER_CLIENT_ID=[Naver Client ID]
  SERVER_URL=[서버 URL]
  ```

### BackEnd

- BE module Install
  ```
  npm i
  ```
- BE `dotenv` template
  ```
  PORT=[백엔드 서버 PORT]
  DATABASE_URL=[몽고DB URL]
  GITHUB_CLIENT_ID=[Gihub OAuth Client ID]
  GITHUB_CLIENT_SECRET=[Github OAuth Client Secret]
  NAVER_CLIENT_ID=[Naver Client ID]
  NAVER_CLIENT_SECRET=[Naver Client Secret]
  JWT_KEY=[JWT 토큰 생성 시 Key 값]
  ```
 
### 실행

- FrontEnd 실행 스크립트
  
  ```
  npm run start
  ```
  
- BackEnd 실행 스크립트
  ```
  npm run start
  ```


<br>
<br>

## 📚 기술스택

<div align="center">

![Javascript](https://img.shields.io/badge/JavaScript-ES6+-yellow?logo=javascript)
![TypeScript](https://img.shields.io/badge/TypeScript-v4.0.5-blue?logo=TypeScript)
![react](https://img.shields.io/badge/React-v17.0.1-1cf?logo=react)
![MobX-react](https://img.shields.io/badge/MobX-^7.0.5-orange?logo=MobX)
![sass](https://img.shields.io/badge/sass-v1.29.0-pink?logo=sass)

![Babel](https://img.shields.io/badge/@babel/core-v7.12.3-yellow?logo=babel) 
![Webpack](https://img.shields.io/badge/Webpack-^4.44.2-blue?logo=Webpack) 

![NodeJS](https://img.shields.io/badge/node.js-v14.5.0-green?logo=node.js)
![Koa](https://img.shields.io/badge/koa-v2.13.0-white?logo=koa)
![MongoDB](https://img.shields.io/badge/MongoDB-^3.6.3-blue?logo=MongoDB)
![Mongoose](https://img.shields.io/badge/Mongoose-v5.10.15-blue?logo=Mongoose)

</div>


<br>
<br>

## ！Issues

<div align="center">
  
[![GitHub Open Issues](https://img.shields.io/github/issues-raw/boostcamp-2020/Project16-C-Account-Book?color=green)](https://github.com/boostcamp-2020/Project16-C-Account-Book/issues)
[![GitHub Closed Issues](https://img.shields.io/github/issues-closed-raw/boostcamp-2020/Project16-C-Account-Book?color=red)](https://github.com/boostcamp-2020/Project16-C-Account-Book/issues)

</div>