프로젝트 개요
React 강의를 마친 뒤 실제 프로젝트를 통해 배운 내용을 적용하고자 GoalMemo라는 목표 관리 웹 애플리케이션을 제작했습니다. GoalMemo는 사용자가 목표를 생성하고 진행 상황을 관리하며, 마감일과 남은 기간을 확인할 수 있는 웹 기반 목표 관리 도구입니다.
주요 기능
목표 관리
- 목표 생성: 제목, 카테고리, 시작일, 마감일, 메모 입력
- 카테고리별 분류: 사용자 정의 색상 지정
- 진행률 추적: 드래그 앤 드롭 및 직접 입력 지원
- D-Day 계산: 마감일까지 남은 일수 자동 계산
캘린더 통합
- 월별 달력 뷰에서 목표 일정 표시
- 특정 날짜 클릭으로 목표 생성
- 월별 목표 필터링
인증
-
Supabase Auth 활용
- 이메일/비밀번호 로그인
- Google, GitHub 소셜 로그인
- 데모 모드: 가입 없이 체험 가능 (sessionStorage 사용)
UI/UX
- 진행률 바 드래그 인터랙션
- 마우스 호버 시 실시간 미리보기
- 키보드 접근성: ESC로 모달 닫기, 탭 이동
- 참고 디자인: Todomate의 단순하고 직관적인 UI를 일부 반영
PWA 지원
- 설치형 앱처럼 홈 화면에 추가 가능
- 오프라인 모드 지원
- 푸시 알림 기능 활용 가능
기술 스택
- Frontend: React , Vite, CSS
- Backend/DB: Supabase (PostgreSQL, Auth, Real-time)
- 배포: Vercel
개발 과정에서 배운 점
- React Hooks (
useState,useEffect)와 Context API를 활용한 상태 관리 - Supabase API 연동 및 비동기 로직 처리 (
loading,error상태 관리) - 컴포넌트 단위 설계 (
GoalItem,GoalModal,Calendar) - CSS Grid/Flexbox를 활용한 반응형 UI 및 CSS 변수 기반 테마 시스템 구축
- PWA 적용 과정에서 Service Worker와 Manifest 설정 경험
어려웠던 점과 해결 방법
- Props drilling 문제 → Context API와 커스텀 훅 도입
- 비동기 타이밍 이슈 → 로딩 상태 및 에러 핸들링 추가
- 스타일 일관성 유지 → CSS 변수와 네이밍 규칙 정의
개선 계획
- TypeScript 도입으로 타입 안정성 확보
- Jest, React Testing Library 기반 테스트 코드 작성
- React.memo, useMemo를 통한 성능 최적화
- 접근성(ARIA 속성, 스크린 리더 지원) 강화