Coder Social home page Coder Social logo

health's Introduction

전제

concurrently 가 global 로 설치 되어 있어야 합니다.

yarn global add concurrently

목적

  1. vue, node, es 등등 개발 스터디
  • 하고 싶은것들 다 해보자.
  • front 단은 vue 로 개발하고
  • back 단은 node로 개발하고
  • 통계 등등의 작업은 es 해보고
  • 타 조직에서 무언가 하고 있는것들 나도 적용해
  1. 그날그날 운동하는것을 쉽게 기록 하도록 한다.
  • 전에 운동했던 포맷을 그대로 가져와서 그날 운동한 데이터만 입력할 수 있다.
  • 새롭게 운동한 기록을 등록할 수 있다.
  • 운동한것을 수정할 수 있다.
  1. 내가 운동을 잘 하고 있는지 체크를 쉽도록 한다.
  • 전에 했던 운동기록과 비교하여 증감 상태를 쉽게 파악 할 수 있다.
  • 기간을 비교하여 증감 상태를 쉽게 파악할 수 있다.

먼 훗날....

  • xxx 프로그램도 붙이고
  • xxx도 조회 가능하게 하고..
  • xxx도 조회 할 수잇게 하고..
  • 헬스 엔터테인먼트로 발전시키자!!!
  • 아자아자 할 수 있다!!!!

♣ client

PORT: 1530

화면을 담당합니다.

  • Local
    • local-health.lhs.com:1530
    • 127.0.0.1 local-health.lhs.com
  • DEV
    • dev-health.lhs.com:1530
    • 10.106.148.169 dev-health.lhs.com
  • Real
    • health.lhs.com

구현스펙!?

nuxt, vue, rxjs, es6

♣ server

PORT: 1702

API 및 BACK단 비즈니스 로직을 담당합니다.

PC

  • Client : NUXT
  • Server : NODE
  • DB : MongoDB

Mobile

  • Client : Native Vue
  • Server : Apolo !?

health's People

Contributors

dlgustn555 avatar

Watchers

James Cloos avatar avatar

health's Issues

[Client] 랜덤 색상 생성 

  handleChangeColor = () => {
    const color = '#' + Math.floor(Math.random() * 16777215).toString(16);
    this.setState({ color })
  }

[Server] 템플릿 API

1. 스키마 정의 : #8

2. 참고 문서 : https://poiemaweb.com/mongoose

진행상황 설명 예시 비고
완료 O [GET] ALL 템플릿 리스트 조회 /exercise/template/[[user ID]]
완료 O [GET] 특정 템플릿 조회 /exercise/template/[[user ID]]/[[template ID]]
완료 O [POST] 템플릿 등록 /exercise/template/[[user ID]]
완료 X [DELETE] 템플릿 삭제
완료 O [PETCH] 템플릿 수정 /exercise/template/[[template ID]] 보안체크 아무나 수정가능

[학습] vue + typescript 온라인 워크샵

  1. 발표자료
    https://www.notion.so/Vue-ts-Cookbook-8de3197fa15b40b39297f66e08e62c4a

4/17

4/24

5/1

5/8

TypeScript: TS를 TS답게
https://programmers.co.kr/learn/courses/9940

데코레이터 관련 소개 영상
https://youtu.be/favycnvMY1Q

[Client] prerender-spa-plugin 적용하기

SPA 애플리케이션에서 vue-router가 일어나기 전에 사전에 라우팅될 페이지를 미리 랜더링해 놓는것 같다.

그런가?!
SPA 라면 라우팅 될때 craated life cycle 에서 ajax 호출해서 필요한 데이터를 셋팅한 다음 mounted를 할텐데... 그럼 그런것도 하는걸까?

간단한건...
A 페이지에서 a API 호출
B 페이지에서 b API 호출

A, B 라우팅 경로를 prerender-sap-plugin에 적용
A 페이지에 들어갔을때 B페이지의 b API도 호출 하는지 테스트!!

일단 prerneder-spa-plugin이 무엇인지 정확히 개념부터 파악하기!!

[Client] 스케줄 쓰기 UI

달력 클릭시 쓰기 UI레이어 팝업

SCHEDULE: {
    userId: '',
    templateId: '',
    order: 0,
    part: '',
    year: 2019,
    month: 0,
    date: 1,
    cellIndex: 0,
    aCourse: []
  },

SCHEDULE_SET: { weigth: '', repeat: 0 },

SCHEDULE_COURSE: {
    name: '',
    aSet: [],
    condition: ''
  },

[Server] 스캐줄 API

1. 스키마 정의 : #8

2. 참고 문서 : https://poiemaweb.com/mongoose

진행상황 설명 예시 비고
완료 X [GET] 스캐줄 리스트 조회 /exercise/schedule/[[user ID]]
완료 X [GET] ALL 템플릿 조회 /exercise/schedule/
완료 X [POST] 템플릿 등록 /exercise/schedule/
완료 X [DELETE] 템플릿 삭제
완료 X [PETCH] 템플릿 수정

[Cleint] 캘린더 컨포넌트 구현

작업 목록

진행상황 작업 이슈 참고
완료 O 캘린더 UI 구현 #12 ScheduleCalenar.vue 참고해서 달력 랜더링 UI까지 구현
진행 중 스캐줄 쓰기 UI #23 날짜 선택시 스캐줄 등록 UI 구현
완료 X 스캐줄 수정UI 날짜 선택시 스캐줄 수정 UI 구현
완료 X 스캐줄 삭제UI 스캐줄 삭제 구현

[Client] 캘린더 리스트 - 버그 수정

  1. "웨이트" 템플릿 생성
  2. 가슴 프로그램 생성
  3. "웨이트" 템플릿 저장
  4. "웨이트" 템플릿 수정
  5. 등 프로그램 추가
  6. "웨이트" 템플릿 수정 완료
    image

[Client] mutation 정리

AS-IS
하나의 commit에 의해 같이 셋팅해 주어야하는것들이
개별 commit으로 나뉘어져있어 일일이 해주어야함

TO-BE
하나의 commit 안으로 state 설정해주는것 모아주기

[Client] 일정 조회화면을 목록형으로.. (ex) 인스타그램

느낌점

  • 와.. 시원시원 하다.
  • 딱 타임라인 느낌으로 하면 좋겠다.

과거

  • 운동한 기록이 있으면 보여준다.

현재

  • 운동한게 있으면 태그 활성화
  • 없으면 태그 비활성화 === 오늘 운동해야할 프로그램

미래

  • 운동해야할 프로그램 태그 비활성화

예시 : 인스타그램PC

벤치마킹_인스타그램

[DB] DB 스키마 정의

● 스캐줄 : schedule

{
  _id:  스캐줄 ID,
  userID: 사용자ID,
  templateId: 템플릿 ID,
  order: 프로그램 일차,
  part: 운동명,
  program: [
  {
      name: '벤치프레스',
      course: [
        { set: 1, value: 10, unit: 'kg', repeat: 10},
        { set: 2, value: 10, unit: 'kg', repeat: 10},
        { set: 3, value: 10, unit: 'kg', repeat: 10}
      ]
  },
  {
      name: '벤치프레스',
      course: [
        { set: 1, value: 10, unit: 'kg', repeat: 10},
        { set: 2, value: 10, unit: 'kg', repeat: 10},
        { set: 3, value: 10, unit: 'kg', repeat: 10}
      ]
    }
],
  modDate: 운동날짜 (기록날짜)
}

● 운동 템플릿 : template

http://local-health.lhs.com:1702/exercise

[GET] : /template/[[userID]]/[[templateID]]
[POST] : /template
[PUT] : /template/[[userID]]/[[templateID]]

이름 name 타입 example
운동타입 tag String ex) 웨이트, 요가, 복싱 ...
운동요일 days String[] ex) 월화수목금토일
운동회차 dayCount Number ex) 1회차
운동부위 part String[] ex) 가슴 / 등 / 어깨 / 하체
운동명 name String[] ex) 벤치 프레스
세트 set Number ex) 3
단위 unit String ex) Set / Km / Hour / Min 
{
    _id: 'aaaaaaaasdf',
    userId: 'dlgustn555',
    tag: '웨이트',
    days: ['월','화','수'],
    programs: [
        {
            part: '가슴',
            order: 1,
            course: [
                { name: '벤치프레스', set: 3, unit: 'Set' },
                { name: '디클라인 벤치프레스', set: 3, unit: 'Set' },
                { name: '인클라인 벤치프레스', set: 3, unit: 'Set' }
            ]
        },
        {
            part: '등',
            order: 2,
            template: [
                { name: '벤치프레스', set: 3, unit: 'Set' },
                { name: '디클라인 벤치프레스', set: 3, unit: 'Set' },
                { name: '인클라인 벤치프레스', set: 3, unit: 'Set' }
            ]
        },
        {
            part: '데드리프트',
            order: 3,
            course: [
                { name: '벤치프레스', set: 3, unit: 'Set' },
                { name: '디클라인 벤치프레스', set: 3, unit: 'Set' },
                { name: '인클라인 벤치프레스', set: 3, unit: 'Set' }
            ]
        },
    ]
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.