pkiop / lifemanager Goto Github PK

구현할 내용

MainPage에서 GET API를 호출해서 DB의 Timerecode를 받아와 렌더링한다.

체크리스트

• FE에서 GET API를 호출해 데이터를 잘 받아 오는지
• 받은 데이터로 컴포넌트 생성을 했는지

구현할 내용

체크리스트

• MongoDB Scheme작성

Koa기반 백엔드 API서버를 구축한다.

Ver 1.0 : 프로그램 켜둔 시간으로 시간 측정
Ver 2.0 : input.txt파일 파싱해서 결과 시각화
Ver 3.0 : 시각화 결과 DB에 저장
Ver 4.0 : Web Frontend구현

시간 기록들을 가져오는 API

query

// accessToken 함께
{
    startDate: xxxx-xx-xx
    endDate: xxxx-xx-xx
    category: 'develop' | null 
}

body

{
    message: 'success'
    data: [ 
        {
            index
            TR
        }
     ]
}

구현할 내용

RecodeList 컴포넌트 CSS 를 기획과 맞게 수정

체크리스트

• RecodeList 컴포넌트가 Recode 컴포넌트를 잘 배치하는지

애플워치로 앉아있었는지
앱시간측정앱연동해서 폰 그시간동안뭐해뭐했는지

목표

체크 리스트

• 지정한 목표시간을 표시 (각 user가 직접 설정한 값)
• 몇시간이나 효율적으로 했는지 표시
• 지정한 취침 시간까지 얼마나 남았는지 표시

• 광고 말고 다른 방법
  • 미결제 -> 데이터 수집 가능
    • 이렇게 하기 위해서 -> 카테고리를 정말 세분화, 자주 사용하는 카테고리 저장
  • 결제 -> 내가 데이터 수집하지 않음. github의 private 모드

• 종료시간 입력 칸 -1말고 미입력 등 다른 값 넣기 -- 200505 난이도가 높음(javascript + html)
• 시간 입력칸을 좀 더 예쁘게 (우선순위 밑)
• naver, 구글 등 소셜 로그인 기능 -> 주말에 빡
• submit 화면 예쁘게
• (입력창이 가장 중요한 부분) grid 사용해서 더 예쁘게
• 아래 퍼센트 디자인
• 주식처럼 차트
• 인바디처럼 종이로 프린트할수있는것처럼 차트 츌력?
• • 시즌제로 랭킹
  • 점수는 시즌참가하는사람들끼리 정한다.
  • 일일데이터 블로그에 개시할 수 있도록 뱃지같은거
  • 프라이빗한데이터는 뺄수 있도록
• 처음에 자기 계획 짜서 입력해두고 그것에 얼마나 맞게 행동했는지 점수화
  • 계획짜는건 구글캘린더에서 가져오기? -> OAuth 를 통해 가능. calander API접근가능
• 돈 기능 추가
• db최근몇개만 가져오는 것으로 최근 1~2주만 보도록
• 자주적는활동 즐겨찾기
• 앱 사용량 보여주는 앱 처럼 이쁘게 선 하나에 24시간이라 치고 각각 뭐했는지 보여주는 것
• 선택화면에서 카테고리나 시간만 수정했을 때, update 누르지 않고 카테고리만 수정하면 바로 업데이트 되도록

목표

체크리스트

• 선택한 RecodeList 날짜 표시
• 게시판 구현
• 카테고리별 파이 그래프 그리기
• 파이 그래프 색 의미하는 것 적는 칸 만들기

목표

체크리스트

• 카테고리별 시간에 따라 파이그래프를 그린다
• 파이그래프 중간에 효율적으로 쓴 시간 퍼센트를 표시한다
• 파이그래프 색이 어떤 카테고리인지 표시하는 것 만들기

구현할 내용

FE에서 TimeRecode 추가(Add Recode 버튼을 눌러 나타나는 입력창을 BE로 보냄)하면 DB에도 데이터가 추가된다.

체크리스트

• 입력을 하고 POST를 하면 BE에서 잘 받는지
• 받은 데이터를 DB에 저장할 수 있는지

일, 주, 월 등 단위와 시작날짜를 body에 넣어 보내면 시각화 해서 image 리턴하는 API 구현

구현할 내용

Recode 컴포넌트 CSS 를 기획과 맞게 수정

체크리스트

• Recode 컴포넌트가 만족스럽게 보이는지

개선 방식

CRA에 적합한 OAuth 방식이 있는 것 같다 (PKCE)
다만 짧게 알아본 바로는 프론트에서 바로 인증을 하기 때문에 앱의 백엔드 API서버에서는 인증이 안될 것 같아서 일단 더 알아보려고 놔뒀다.

callback url에서 Access Token받고 Authorization header에 넣는 방법으로 전송하면 보안상 유리할 것 같지만 잘 되지 않았다. 하는방법을 찾아 적용하는 것도 좋겠다.

암호화

callback url로 Access Token이 오면 Frontend로 보내기 위해 쿠키에 담은 뒤 Frontend로 redirect가 끝나면 쿠키 삭제 후 localstorage에 저장하는 방식을 쓰려고 한다.

이 잠시동안 쿠키가 전달될 때 보안이 취약해서 서버와 Front사이에 암호화를 해서 전달한다면 보안에 유리해진다.

체크리스트

• 백엔드에서 쿠키 암호화
• 프론트에서 쿠키 복호화

손으로쓰고싶은사람도 있음
손으로쓰고 큐알코드있는 종이로 찍으면 글씨인식후 업로드
관련 종이를 다이어리등으로 팔수도

생활코딩 advanced과정으로 배운 것 이용해 더 다양한 기능 만들어보기->예제나 유제 제공

구현할 내용

FE에서 AccessToken을 보내오면 해당하는 user의 TimeRecode만 받아오게 한다.

체크리스트

• AccessToken을 받아 user 누군지 해석
• 해당하는 time recode만 return

구현할 내용

체크리스트

• 위의 그림과 유사하게 보이는지

query

// accessToken 함께
{
    index
}

body

{
    message: 'success'
}

목표

• Recode 하나의 항목을 보여주는 Recode컴포넌트를 만든다.

체크리스트

• 각 항목을 제대로 보여주는지
• onclick method를 만들었는지

메인 페이지 예상 화면

체크 리스트

• 헤더바(위치만)
• Recode 리스트 보여주기
• Add, Finish 버튼
• 해당 날짜 제대로 보여주기

50 이렇게 input에 들어가 있었으면 전부 선택위해 마우스 2번 클릭해야 전체클릭이 된다.
한번 눌러도 되게 하기

시간 기록을 추가하는 API

query

// accessToken 함께
{
    title: string
    startTime: { hour, min }
    endTime: { hour, min }
    category: 'develop' | null 
}

body

{
    message: 'success'
}

.

구현할 내용

체크리스트

• 위 그림과 같은 input을 받을 수 있는지
• submit시 데이터 전달이 잘 되는지

TR을 수정하는 API
query

// accessToken 함께
{
    index
    TR ( 수정하지 않을 것 넣지 않음)
}

body

{
    message: 'success'
}