심는대로 거두는 '씨앗 모아'

프로젝트 개요

DND 프로젝트를 마친 후, 산책을 하면서 아이디어가 떠올라 구현해본 프로젝트입니다. 결과적으로 130명의 유저가 초기에 유입되었으며 64개의 피드백을 받아 기능을 수정해본 경험을 했습니다.

• 🔗 깃허브: 깃허브 링크
• 📅 개발 기간: 2024.04 ~ 2024.05

프로젝트 아이디어 도출 포인트

• 목표 달성을 꾸준히 할 수 있으면 좋겠다.
• 목표 달성률을 한 눈에 파악할 수 없을까?
• 무엇 보다 재밌게 달성하면 좋지 않을까?

주요 기능 및 역할

1. 인증 및 인가 관리

2. 씨앗 목록 조회하기

3. 씨앗(목표) 생성하기

4. 씨앗(목표) 키우기 기능

5. 씨앗(목표) 응원하기 기능

6. 처음 사용하는 유저를 위한 온보딩 페이지 기능

어려웠던 점과 해결 방안

1. 사용자 피드백을 통한 메인 페이지 사용자 경험 개선

문제점

• 여러 개의 목표가 존재할 경우, 커러셀 UI 사용자 경험 저하

원인

• 자신이 생성한 목표들을 한 눈에 파악하지 못하는 것이 불편의 원인이라고 파악

해결 방법

• 무한 스크롤 기능을 도입하여 사용자 경험 향상 및 성능 개선, 성능을 고려해 scroll 이벤트를 활용하기보다 IntersectionObserver를 활용

2. 주도적으로 API 공통 오류 처리 방식을 구축

문제점

• 배포 환경에서 예상하지 못하는 에러가 10차례 이상 나타남.

원인

• 기능에 예외가 미흡했기 때문이라고 생각

해결 방법

• ErrorBoundary, QueryErrorResetBoundary, onError 콜백을 활용해 구현
• 예상하지 못한 Query, Mutation, 정상적이지 않은 Query를 공통으로 처리해 개발 효율화

기술 스택

• 프론트엔드: React, TailwindCSS, Typescript, Tanstack-query, axios, Framer-motion
• 코드 품질 관리: ESLint, Prettier