공부 시간을 기록할 수 있는 바닐라 자바스크립트 토이 프로젝트입니다.
- 개요
- 공부할 때 시간을 기록할 수 있는 타이머 서비스를 애용하여 원하는 기능들을 추가하여 개발
- 일일 공부 시간 기록 및 주간, 월간 기록 확인 기능, 오디오 스트리밍 서비스 추가
- JavaScript로 개발하며 공부하기 위해 라이브러리 없이 바닐라 자바스크립트로 개발
- React + TypeScript로 리팩토링 및 업데이트중
- 담당 구현 파트
- 공부 과목 추가 및 삭제
- 과목별 스톱 워치 사용 및 시간에 따른 실시간 파이형 차트 생성
- 일일, 주간, 월간 총 공부 시간 및 과목별 시간 조회
- 오디오 스트리밍 구현 (음량조절, 재생, 멈춤, 넘기기)
- Firebase Authentication 활용 google 계정으로 로그인, 로그아웃
- Firebase Hosting 활용 프로젝트 배포
- 기간 및 사용 기술
- 22.02.15 ~ 22.03.05 (약 19일) / HTML, CSS, JavaScript, Firebase
- 프로젝트 둘러보기
- 라이브러리 없이 CSS와 JavaScript로 스톱 워치 시간에 따른 실시간 파이 차트를 구현하는 방법
- 고민 : 어떤 방식으로 스톱 워치 시작시 시간에 따른 파이 차트를 생성하고 시간의 흐름에 따라 차트를 실시간으로 보여줄 수 있을까?
- 해결 : 차트 요소 CSS에 conic-gradient, mask를 활용해 파이 차트를 생성하였고 radial-gradient를 이용해 차트의 모서리를 둥글게 만들었습니다.
그리고 스톱 워치 버튼 클릭시 해당 과목의 공부 시간을 percent라는 CSS 변수값으로 설정하여 시간에 따른 그래프를 나타내었고 setInterval 함수의 콜백 함수로 1분마다 증가하는 공부시간을 percent 값으로 업데이트하는 changeChart() 함수를 전달하여 실시간 파이 차트를 구현하였습니다.
conic-gradient, mask, radial-gradient를 활용한 파이 차트 CSS
스톱 워치 시작 버튼 클릭시 실행하는 startTimer 함수와 함수 내부에는 파이 차트에 사용되는 CSS 변수인 percent(--c-p)를 업데이트하는 changeChart 함수를 1분간격으로 실행하기 위해 setInterval 함수를 이용
- Lighthouse로 프로젝트 성능 개선하는 방법
- 고민 : Lighthouse로 웹앱 품질 측정시 수치가 낮은 편인데 각 항목마다 어떻게 성능을 개선할 수 있을까?
- 해결 : Performance 항목에선 사용하는 구글 폰트, 아이콘을 비동기적으로 요청 후 로드 완료시 CSS 처리, Accessibility 항목에선 배경색과 요소 색의 명암비를 재설정, SEO 항목에선 적절한 타이틀 선정, 사이트 정보 요약, 시멘틱 태그 사용으로 성능을 개선하였습니다.
웹사이트에 적절한 타이틀, 정보 요약을 하는 meta description 태그를 추가하였습니다.
- 기간별로 기록 조회시 로딩 화면 보여주기
- 선택한 날짜에 따른 기간별 설정
- 공부 기록 그래프로 수치화