깃허브 readme에 정리해놨었던 것을 옮겨놨다. 둘다 마크다운 언어라 나름의 재미가 있다.
앞으로의 계획은 순서대로이며 프로젝트를 진행하는 과정 / 오류들을 적어나갈 계획이다.
여기에는 자유롭게 작성하고 👉 readme는 정제해서 쓸것!
1. 기획
고등학교때 하루하루 공부시간 측정용으로 사용했던 스톱워치에서 착안하여 프로젝트겸, 코딩 실력도 늘리고, 공부한 시간 기록도 하면서 코딩 텐션 유지에도 도움이 되는 웹앱 코딩 스톱 워치를 기획했다.
1-1. 기술
React.js, redux, styled-components, gh-pages, moment.js, chart.js, mongoDB (+ mongoose), indexedDB
추가할 것들
- ts, apollo, graphql, vite
- 최적화, 클린코드, github-actions
1-2. 기초 디자인
canva로 만든 기초 디자인
상 - 스톱워치 기본 기능
중 - 지난 2주간 공부시간과 contributions을 나타내는 그래프
하 - 월별 공부시간과 contributions을 나타내는 달력
1-3. 목표
- 간단하고 가시성 높은 코딩 시간 기록용 앱
- 움직임은 부드럽게
- 디자인은 단순,깔끔,세련되게
- styled-components로 light/dark 모드 개발
- mement.js, chart.js 라이브러리 경험
- indexedDB 활용 및 특성 파악
1-4. 기능
- 스톱 워치 기능
- 날짜-시간,contributions 그래프에 표시
- 달력에 시간, contributions 표시
- 달력에서 시간 수정 기능
- 일정 시간 초과/충족/미달 시 날짜 색상으로 구분
- 라이트모드/다크모드
- 브라우저 DB 사용
2. 기능 구현
2-1. stopwatch
- 스타트를 누르면 측정이 시작 -> 스타트 버튼은 스톱으로
- 스톱 누르면 측정 중지 -> 스톱 버튼은 스타트로
- 리셋 버튼으로 초기화 가능
- 새로고침 및 브라우져 종료 후 다시 켰을 때 값 유지할 수 있게 cookie or session 사용
- 값이 변화가 없을때 알아서 db에 저장
- 24시 되면 00:00:00 로 초기화
2-2. 웹스토리지 선정 MongoDB
모두가 사용할 수 있게 브라우저로 코딩시간을 저장할 수 있는 웹스토리지를 선택했다. (클라이언트에서 적용되는 웹 db)
여기 를 보면 추천하는 웹스토리지는 두개이다.
-네트워크로 불러온 리소스나 파일을 캐싱해야 한다면 캐시 스토리지 API(Cache Storage API)
-아니라면 IndexedDB
캐싱이나 로컬스토리지는 추천하지 않는다길래 IndexedDB로 선택했다.
(여기 에서 웬만한 브라우저가 로컬 스토리지를 원한다는 것을 확인.)
여기 와 여기
위에 링크로 indexedDB의 사용법을 알아보았다. 의외로 사용에는 어려움이 없어보인다.
indexDB로 저장할 data는 두가지이다.
-깃허브 아이디 -> 나중에 깃허브 아이디를 바꿀수 있게 update를 할 예정이므로 깃허브 아이디 별로 저장공간이 필요
-날짜와 날짜 별 코딩시간 -> 날짜와 날짜별 코딩 시간을 저장하고, 그래프와 달력에 값을 호출
라고 생각을 했으나.
깃허브 아이디는 그냥 내거만 쓰기로 하고, 시간만 저장하는 것이 좋을 것 같아서 MongoDB를 사용하기로 했다. 다른사람들이 이 페이지에 들어와서 시간을 수정할 수도 있으니 나만 수정할 수 있게끔 방법을 찾아보자.
2-3. 깃허브 contributions
github docs, 깃헙 컨트리뷰션 api, 깃헙 컨트리뷰션 api 2
위 주소를 참고, api를 이용해 달력에 표시할 contributions 값을 받아온다.
- 그래프에 최근 2주 간의 contributions 수 표시
- 달력에 월별 contributions 수 표시
apollo-graphql을 이용해 넘어오는 값을 필터링해보자.
2-4. chart.js로 그래프 구현
여기 를 보면 여러가지 react에서 이용할수 있는 라이브러리를 소개하고 있다. 그 중에서 chart.js를 선택했다. 유명하고 가볍고 친절한 설명이 장점이라고 하는데 딱히 큰 이유는 없다.
- 최근 2주간의 코딩시간과 contributions 표기
- 서 코딩시간과 contributions가 독립적으로 배치
- 그래프창 크기는 일정하게 유지하고 그 안에 값이 변하면 비례적으로 변하는 그래프
2-5. moment.js로 달력 구현
- contribution 수 표기
- contribution 수 별 색 변화
- 코딩시간 표기
- 코딩시간 변경 가능
- 월별 달력 이동
2-6. 통합 구현
3. UI/UX
UI/UX는 기획 목표에 맞게 기본만 하자는 생각으로 단순, 깔끔, 명확하면서 부드러운 느낌을 주려고 했다.
3-1. reset css
참고 css를 리셋 해주었다.
3-2. 배치
3-3. light/dark 모드 구현
- 상단 우측에 해와 달 표시
- 누르면 변경
3-4. 부드러운 움직임 구현
4. next level
4-1. typescript
4-2. apollo & graphql
4-3. 최적화
4-4. webpack 대신 vite
