boostcamp-2020 / Project16-D-Account-Book

:books: 공동 가계부 관리 서비스, M.O.A

공동 가계부 관리 서비스, M.O.A

프로젝트 소개 💸

Manage Our Accountbook!

개인의 입출금 및 가계 재정을 시각화하고 분석할 수 있을 뿐만 아니라 공동 가계부까지 관리할 수 있는 웹 서비스입니다.

데모 영상 🎥

배포 Link ❗

http://moa.r-e.kr/ 1월 1일부로 부스트캠프 서버 비용 지원을 받지 못하게 되어 잠시 중단합니다.

• Chrome을 사용해주세요.

• 카카오 로그인을 권장드립니다. 카카오 계정으로 회원가입 시, 모든 정보 제공에 동의해주셔야 정상적으로 회원가입이 이루어집니다.

• 모든 정보 제공에 동의하지 않아 {"message":"Cannot read property 'match' of undefined"}와 같은 에러 메세지가 뜨시는 경우, 여기를 참고해주세요.

• 현재 네이버 로그인은 서비스 검수 요청 중에 있습니다. 네이버 로그인을 하시고 싶은 분들은 테스터 아이디를 신청해주시기 바랍니다. 테스터 아이디 신청 방법은 여기를 참고해주세요.

팀원 소개 👨🏻‍💻

J004 강민수	J009 고병화	J045 김영근	J131_윤현우
@mu1616	@bbbyung2	@lacomaco	@Mong-Gu

기술 스택 🛠

선정 이유가 궁금하다면 여기로!

사용 방법 💻

1. 레포지토리를 클론하고자 하는 디렉토리에서 아래 명령어를 수행

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

2. 클론한 디렉토리에서 server 디렉토리로 들어가 아래 명령어를 통해 server에서 필요한 module 설치

   npm i
   

3. server에서 필요한 dotenv 설정

• server/.env.example을 open

• 아래 설명에 따라 환경변수 설정

  # SERVER/CLIENT HOST&PORT
  SERVER_HOST=[백엔드 서버 HOST]
  SERVER_PORT=[백엔드 서버 PORT]
  CLIENT_HOST=[클라이언트 서버 HOST]
  CLIENT_PORT=[클라이언트 서버 PORT]
  
  # DB
  DB_HOST=[데이터베이스 서버 HOST]
  DB_PORT=[데이터베이스 서버 PORT]
  DB_USERNAME=[MySQL 로그인 시 이용하는 유저명]
  DB_PASSWORD=[MySQL 로그인 시 이용하는 비밀번호]
  DB_DATABASE=[사용하고자 하는 데이터베이스명]
  
  # OAUTH
  NAVER_CLIENT_ID=[네이버 Application Client ID]
  NAVER_CLIENT_SECRET=[네이버 Applicaiotn Client Secret]
  KAKAO_CLIENT_ID=[카카오 Application Client ID]
  KAKAO_CLIENT_SECRET=[카카오 Applicaiotn Client Secret]
  
  # JWT
  JWT_SECRET_KEY=[JWT 발급 시 사용할 Secret Key]
  JWT_EXPIRES_IN=[JWT 만료시간]
  
  # COOKIE
  COOKIE_EXPIRES_IN=[Cookie 만료시간]
  

  NAVER 혹은 Kakao Application이 존재하지 않을 경우 로그인을 할 수 없습니다.
  Application을 등록하려면 아래 사이트를 참고바랍니다.
  
  - NAVER Developers
  - Kakao Developers

4. 클론한 디렉토리에서 client 디렉토리로 들어가 아래 명령어를 통해 client에서 필요한 module 설치

   npm i
   

5. client에서 필요한 dotenv 설정

• client/.env.example을 open

• 아래 설명에 따라 환경변수 설정

  # SERVER
  REACT_APP_BASE_URL=[API를 호출할 백엔드 서버 URL]
  
  # OAUTH
  REACT_APP_NAVER_CLIENT_ID=[네이버 Application Client ID]
  REACT_APP_NAVER_CLIENT_SECRET=[네이버 Applicaiotn Client Secret]
  REACT_APP_NAVER_CALLBACK_URL=[네이버 로그인을 위한 Callback URL]
  REACT_APP_KAKAO_CLIENT_ID=[카카오 Application Client ID]
  REACT_APP_KAKAO_CLIENT_SECRET=[카카오 Applicaiotn Client Secret]
  REACT_APP_KAKAO_CALLBACK_URL=[카카오 로그인을 위한 Callback URL]
  

6. (데이터베이스 서버가 켜져있다고 가정하고) 두 개의 터미널을 가동한 후, 각 터미널에서 다음의 절차 수행

• [터미널1] server 디렉토리로 이동 후 아래 명령어 수행

  npm run start
  

• [터미널2] client 디렉토리로 이동 후 아래 명령어 수행

  npm run start