pkiop / lifemanager Goto Github PK
View Code? Open in Web Editor NEW⏱ 한 일을 기록하면 시각화 해서 보여주는 웹 앱⏱
Home Page: https://lifemanager.pkiop.me
⏱ 한 일을 기록하면 시각화 해서 보여주는 웹 앱⏱
Home Page: https://lifemanager.pkiop.me
손으로쓰고싶은사람도 있음
손으로쓰고 큐알코드있는 종이로 찍으면 글씨인식후 업로드
관련 종이를 다이어리등으로 팔수도
50 이렇게 input에 들어가 있었으면 전부 선택위해 마우스 2번 클릭해야 전체클릭이 된다.
한번 눌러도 되게 하기
RecodeList 컴포넌트 CSS 를 기획과 맞게 수정
시간 기록을 추가하는 API
query
// accessToken 함께
{
title: string
startTime: { hour, min }
endTime: { hour, min }
category: 'develop' | null
}
body
{
message: 'success'
}
시간 기록들을 가져오는 API
query
// accessToken 함께
{
startDate: xxxx-xx-xx
endDate: xxxx-xx-xx
category: 'develop' | null
}
body
{
message: 'success'
data: [
{
index
TR
}
]
}
FE에서 AccessToken을 보내오면 해당하는 user의 TimeRecode만 받아오게 한다.
CRA에 적합한 OAuth 방식이 있는 것 같다 (PKCE)
다만 짧게 알아본 바로는 프론트에서 바로 인증을 하기 때문에 앱의 백엔드 API서버에서는 인증이 안될 것 같아서 일단 더 알아보려고 놔뒀다.
callback url에서 Access Token받고 Authorization header에 넣는 방법으로 전송하면 보안상 유리할 것 같지만 잘 되지 않았다. 하는방법을 찾아 적용하는 것도 좋겠다.
callback url로 Access Token이 오면 Frontend로 보내기 위해 쿠키에 담은 뒤 Frontend로 redirect가 끝나면 쿠키 삭제 후 localstorage에 저장하는 방식을 쓰려고 한다.
이 잠시동안 쿠키가 전달될 때 보안이 취약해서 서버와 Front사이에 암호화를 해서 전달한다면 보안에 유리해진다.
일, 주, 월 등 단위와 시작날짜를 body에 넣어 보내면 시각화 해서 image 리턴하는 API 구현
query
// accessToken 함께
{
index
}
body
{
message: 'success'
}
MainPage에서 GET API를 호출해서 DB의 Timerecode를 받아와 렌더링한다.
Recode 컴포넌트 CSS 를 기획과 맞게 수정
생활코딩 advanced과정으로 배운 것 이용해 더 다양한 기능 만들어보기->예제나 유제 제공
FE에서 TimeRecode 추가(Add Recode 버튼을 눌러 나타나는 입력창을 BE로 보냄)하면 DB에도 데이터가 추가된다.
애플워치로 앉아있었는지
앱시간측정앱연동해서 폰 그시간동안뭐해뭐했는지
TR을 수정하는 API
query
// accessToken 함께
{
index
TR ( 수정하지 않을 것 넣지 않음)
}
body
{
message: 'success'
}
Ver 1.0 : 프로그램 켜둔 시간으로 시간 측정
Ver 2.0 : input.txt파일 파싱해서 결과 시각화
Ver 3.0 : 시각화 결과 DB에 저장
Ver 4.0 : Web Frontend구현
Koa기반 백엔드 API서버를 구축한다.
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.