Todoit

프로젝트 소개

• Todoit은 할 일을 등록하고 관리할 수 있는 서비스입니다.

• 진행 기간 : 2023.05 ~ 2023.06

• 배포 링크 : https://todoit-35f1e.web.app/

개발 환경

Developement

Styling

실행 방법

• 이 프로젝트는 Firebase에서 프로젝트 생성 시 발급받은 SDK key 값들을 .env 파일에서 관리하고 있습니다. 이로 인해 로컬에서의 구동은 어려울 수 있습니다.

$ git clone git@github.com:kimdonggu42/Todoit.git

$ npm install

$ npm start

디렉토리 구조

📦 src
 ┣ 📂 assets
 ┃ ┣ 📂 images
 ┃ ┗ 📂 style
 ┣ 📂 components
 ┣ 📂 context
 ┣ 📂 firebase
 ┣ 📂 hooks
 ┣ 📂 pages
 ┃ ┗ 📂 main
 ┣ 📂 recoil
 ┣ 📂 util
 ┣ 📜 App.tsx
 ┗ 📜 index.tsx

개발 내용

1. Firebase를 사용하여 프로젝트 리팩토링

• 기존 json server로 개발한 프로젝트를 Firebase의 Authentication과 Firestore를 사용하여 Serverless 서비스로 리팩토링을 진행 했습니다.

• onSnapshot() 메서드를 활용하여 데이터가 변경될 때마다 document snapshot을 업데이트하여 실시간으로 DB를 불러오도록 했습니다.

2. 사용자 행동에 따른 알림 처리

• react-toastify 라이브러리를 통해 사용자 행동에 따른 분기 처리를 통해 상황에 맞는 사용자 피드백을 줄 수 있도록 했습니다.

3. 서버 통신 로직 분리

• 서버와 통신하는 로직을 custom hook으로 만들어 UI 컴포넌트로부터 분리 및 반복되는 로직 최소화 했습니다.

시연 영상

회원가입	로그인/로그아웃
할 일 등록/수정/삭제	중요한 할 일 등록
할 일 완료 처리	반응형