투두리스트 Chrome Extension (4) - JS to React
시작에 앞서
Firebase 수업까지 듣고나니 React로 프로젝트를 진행해야겠다는 생각을 했다. 따라서 기존의 구현했던 기능들을 전부 React 파일로 옮겨서 진행하기로 결정했다.
페이지 설계
우선 기본적으로 로그인 페이지와 메인 랜딩 페이지 두 개로 구분해서 페이지를 설계했다. 추후에 기능을 추가할 경우 페이지를 추가해서 사용할 예정이다.
로그인 페이지
로그인 페이지의 경우 기존의 수업에서 사용했던 코드를 대부분 가져와서 사용했다. CSS만 조금 변경했다.
메인 페이지
메인 페이지에 크게 4가지 Component를 담기로 결정했다.
개인정보 페이지
간단하게 환영인사와 할 일을 입력할 수 있는 박스를 오른쪽 상단에 위치 시키기로 했다.할 일 목록 페이지
입력한 할 일들의 데이터를 왼쪽 상단에서 확인할 수 있도록 테이블 리스트 형식으로 구현할 예정이다. 추가적으로 할 일 카테고리 기준으로 filtering이 가능한 기능을 구현할 것이다.타이머 페이지
공부를 얼마나 했는지 추후에 data Tracking이 가능하도록 하기 위해 공부 시간 측정용 스톱워치 기능을 오른쪽 하단에 구현할 예정이다.개인 PR 페이지
페이지의 구글 광고를 넣어 사용자 경험을 해치기보다는 프로젝트 제작 타임랩스, 블로그, 그리고 팀원 모집 글을 왼쪽 하단에 구현할 예정이다.
폴더 구성
React의 Router 기능을 활용해서 구현할 예정이다. Router 관련 설명은 Router 관련 포스팅에서 확인할 수 있다.
Routes
- Home.js
- Auth.js
Components
- Profile.js
- TodoAssign.js
- TodoTable.js
- Timer.js
- Notice.js
변화하는 점
Local Storage -> Firebase
Auth 기능을 통해 유저 정보를 토대로 각자 database를 만들어서 사용자들의 할 일 데이터들을 다양한 기기에서 확인할 수 있도록 한다. Local Storage의 경우, 하나의 컴퓨터에서 밖에 사용이 안된다는 점을 보완할 수 있다.
React Component
하나의 Html, Javascript 파일로 구현했던 프로젝트를 React Component를 활용해 2개의 페이지로 구성된 프로젝트로 구현할 예정이다.
추가 예정 사항
개인 시간 관리 히스토리 기능
할 일 완료시 데이터들을 수집해서 전체 소요시간 및 카테고리별 소요시간 등 할 일 관련 데이터 분석한 내용을 보여주는 페이지이다.
스터디/서프 모드
매번 타이머를 키지 못할 사용자들을 위해서 스터디모드일 경우, 타이머가 켜지지 않은 경우 사용자가 페이지를 떠날 경우 알람을 받을 수 있는 기능이다.
마감일 기준 Sorting
마감일이 얼마 남지 않은 순으로 보여주는 기능이다.
