💸 http://3.36.99.206:3000/ 💸

4-5주차 14팀 - 이정민 && 신어진

데모영상 Wiki

Typescript Webpack Babel Node.js Express SCSS OAuth2 MySQL TypeORM EC2 Canvas jsx

Characteristic

• github oauth를 활용한 회원가입 & 로그인
• 라이트모드 / 다크모드 전환 및 유지
• canvas를 활용한 데이터 시각화
• PC 화면 / Mobile 화면
• crontab을 활용한 CD

Install & Execute

• development 환경 - .env
• production 환경 - dev.env

client/.env

API_URL = 서버 endpoint

server/.env

DB_NAME = 데이터베이스 이름
DB_USER = 데이터베이스 유저
DB_PW = 떼이터베이스 비밀번호
DB_HOST = 데이터베이스 호스트
DB_PORT = 데이터베이스 포트
GITHUB_CLIENT_ID = Github OAuth client id
GITHUB_CLIENT_SECRETS = Github OAuth client secret
COOKIE_SECRET = 쿠키 생성키
SERVER_URL = 서버 주소

Structure

client
├── assets                          # 필요한 리소스들
└── src
    ├── api                         # api 관련 함수들
    ├── Components                  # 컴포넌트들
    │   ├── atom
    │   ├── molecule
    │   └── organism
    ├── Controller     
    ├── core                        
    ├── Model                
    ├── Pages                   
    ├── scss
    ├── shared
    └── utils

server
├── controllers
├── middlewares                  
├── queries
├── routes
├── services
├── app.ts
├── custom.d.ts
├── envConfig.ts
└── database.ts

ERD

Screenshots