1. 프로젝트 개요
프로젝트 목적
공부의 숲은 사용자가 학습 목표를 설정하고 집중할 수 있도록 돕는 학습 관리 서비스로 타이머 기능, 습관 형성, 포인트 시스템 등을 활용하여 사용자가 자신의 학습 습관을 개선하고 동기 부여를 받으며 효율적으로 학습할 수 있도록 한다.
핵심 기능
- 스터디 관리
- 사용자가 스터디를 생성하고, 스터디 목록을 조회하며, 스터디의 세부 정보를 관리할 수 있다.
- 스터디 상세 페이지에서 응원 이모지 추가, 스터디 수정/삭제, 습관 기록 등을 처리할 수 있다.
- 집중 타이머
- 사용자가 설정한 집중 시간을 관리하고, 타이머 기능을 통해 집중을 유도한다.
- 공부 시간이 종료되면 포인트가 지급되어 학습에 대한 동기 부여를 유도한다.
- 포인트 시스템
- 사용자가 집중 시간에 따라 포인트를 얻을 수 있다. 포인트는 학습의 성과를 측정하고, 사용자가 학습을 지속할 수 있도록 도와준다.
- 습관 형성 지원
- 사용자가 매일 반복되는 습관을 설정하고, 이를 체크할 수 있는 기능을 제공한다.
- 습관을 체크할 때마다 기록이 남고, 습관 유지 여부를 추적할 수 있다. 또한, 습관을 수정하거나 종료하는 기능도 제공된다.
2. 담당한 작업
BE
| 기능 | 작업 |
|---|---|
| 습관 | 습관 생성 API |
| 습관 조회 API | |
| 습관 수정 API | |
| 습관 삭제 API | |
| 오늘의 습관 체크 API | |
| 오늘의 습관 해제 API | |
| 오늘의 습관 기능 테스트 |
FE
| 기능 | 작업 |
|---|---|
| 습관 | 오늘의 습관 페이지 |
| 습관 모달창 | |
| 오늘의 습관 및 모달창 반응형 | |
| habitAPI.js | |
| 집중 | 반응형 수정 |
| 상세 스터디 | 이모지 기능 디자인 개선 |
| 공통 | Header 반응형 |
| 모든 페이지 디자인 틀 통일 및 개선 |
Chores
| 기능 |
|---|
| 중간, 최종 발표자료(PPT) 제작 |
| 팀 노션 제작 및 관리 |
3. 기술적 성과
기술 스택
| 기술 스택 | |
|---|---|
| 언어 및 런타임 | JavaScript |
| BE 프레임워크 | Express |
| DB & ORM | PostgreSQL |
| Prisma | |
| FE 프레임워크 | React |
| Vite | |
| React Router | |
| 스타일링 | CSS Modules |
| SCSS | |
| 상태 관리 | useState |
| useEffect | |
| 라이브러리 | axios |
| dayjs | |
| 배포 | render |
| netlify | |
| 협업 | Discord |
| Notion | |
| zep | |
| github |
4. 문제점 및 해결과정
트러블 슈팅 1: 습관 체크 상태 오류 및 404 에러 발생
- 문제상황
→ 습관을 생성한 후, 다른 페이지로 이동했다가 다시 습관 페이지로 돌아오면 생성했던 습관이 자동으로 체크된 상태로 렌더링이 되었다. 사용자가 해당 습관을 uncheck 하려고 할 경우, 체크된 습관이 아니라는 메세지와 함께 404 에러가 발생하는 문제가 있었다.
- 원인분석
→ 프론트엔드에서는 오늘 날짜를 기준으로 체크 여부를 판단해야 하지만, 백엔드에서는 일주일 전체의 체크 기록을 내려주고 있었다. 이로 인해 오늘 체크하지 않은 습관도 다른 요일의 체크 기록으로 인해 체크된 것처럼 UI에 표시되어 오류가 발생한 것이다.
- 해결방안
→ getCheckedHabit() 함수에서 체크 기록을 매핑하기 전에, 오늘 요일(dayInNumber)을 기준으로 필터링하여 오늘 날짜의 체크 여부만 반영하도록 로직을 수정했다. 이를 통해 실제로 오늘 체크한 습관만 체크된 상태로 정확하게 렌더링되도록 개선하였고, 404 에러 문제도 해결되었다.
트러블 슈팅 2: 삭제된 습관의 기록 처리 문제
-
문제 상황
→ 사용자가 오늘의 습관을 삭제하더라도 이전 주차의 기록에는 영향을 주지 않아야 한다. 즉, 체크된 이력이 없다면 습관기록표에 나타나지 않지만, 삭제 전 하루라도 체크된 이력이 있으면 습관 기록표에는 계속 나타나야 하는 로직이 필요했다. 또한 이 로직은 일주일 단위로 동작해야 했다. -
원인 분석
→ 기존 로직은 체크 이력 관리가 복잡하게 얽혀 있어 삭제와 관련된 조건을 명확히 처리하기 어려웠다. 습관을 삭제했을 때 관련된 기록의 유무에 따라 UI에 반영되도록 하는 로직이 명확히 정리되지 않았다. -
해결 방안
→ 습관의 주간 체크 이력을 isActive(Boolean) 값으로 관리하여, 일주일 단위 배열로 저장하였다. 이후 습관을 삭제할 때, 해당 주간 배열의 값이 모두 false일 경우 습관기록표에서 완전히 사라지도록 하고, true가 한 번이라도 존재할 경우 기록표에 유지되도록 로직을 단순화 및 정비하였다. 이를 통해 복잡했던 삭제 이후 로직을 명확하게 정리하고 유지보수성을 높일 수 있었다.
5. 협업 및 피드백
이번 초급 프로젝트로 혼자서 개발할 때는 알지 못했던 점들을 많이 알게되었다. 생각보다 사람들의 코드 구조와 사고방식이 서로 많이 다르다는 것과 협업할 시 컨벤션과 merge, 코드 리뷰, 소통 등의 중요성을 뼈저리게 느끼게 되었다. 제대로된 개발 프로젝트가 처음이다보니 나중에 맞추면 되겠지라는 생각으로 대충 정했던 것들이 나중에 큰 장애물이 되었었다. 물론 문제들을 해결하는 과정에서 많은 것도 배울 수 있었지만, 앞으로 진행될 프로젝트에서는 하나하나 다 맞추고 시작해야겠다는 다짐을 했다.
6. 코드 품질 및 최적화
-
중복 코드 제거
→ 반복되는 로직은 공통 컴포넌트로 분리하여 재사용성을 높임 -
유사 기능 컴포넌트 통합 및 정리
→ 같은 역할을 하는 컴포넌트들을 통일하여 코드 일관성 유지함(PointDisplay로 통합) -
가독성을 위한 코드 정리
→ 주석을 꼼꼼하게 작성하고 코드 스타일을 일정하게 유지함 -
기능 단위로 폴더 구조 설계
→ study, focus, habit 등으로 나눠 기능별로 폴더 구성함
→ 유지보수와 협업 시 파일 찾기 쉬웠음 -
초기 API 명세 및 백엔드 구조 선제적 설계
→ 프론트 작업 시 필요한 데이터 흐름이 명확해져 개발이 수월하게 진행되었음
7. 향후 개선 사항 및 제안
-
타이머 새로고침 시 데이터 유지 기능 추가
→ 현재는 새로고침 시 데이터가 초기화되는데, 로컬 스토리지나 서버 연동을 통해 상태를 유지할 수 있도록 개선해야함 -
스타일 코드의 일관성 강화
→ SCSS의 mixin, extend 등 기능을 활용하여 코드 재사용성과 유지보수성 향상
성능 최적화 고려
→ 렌더링 최적화, 메모리 관리 등 성능 측면에서의 고민은 부족했던 부분으로, 향후 더 나은 사용자 경험을 위해 고려해야한다고 생각함
협업 시 Git 사용 방식 개선
→ 병합 과정에서 충돌이 자주 발생했으므로, 브랜치 전략 및 커밋 컨벤션 등을 팀 차원에서 명확히 정하고 공유하는 과정이 필요함
