- 🚀배포사이트 : DELIMOOD
- 🎥시연영상 : DELIMOOD 시연영상
DELIMOOD는 나의 감정을 기록하고 글귀를 공유함으로써 위로를 받을 수 있는 서비스입니다.
오늘의 하루를 기록해보는건 어떨까요?
오늘의 감정을 다른 사람들과 공유해보세요.
프로젝트 기간 : 2024.07.25 ~ 2024.08.29
 |
 |
 |
|---|---|---|
| FE_6기 오채연 | FE_6기 최소영 | FE_6기 최수형 |
- 로그인,회원가입,유저정보API,Schema,Query
- 로그인/회원가입페이지
- 메인페이지
- 마이페이지
- 검색페이지
- 404페이지
- 프로젝트 팀장
- 해시태그,모달,페이지하단fixed버튼
- 에피그램API,Schema,Query
- 에피그램작성페이지
- 에피그램수정페이지
- tailwind기초세팅
- 헤더,에피그램카드,에피그램리스트,댓글리스트,감정리스트
- 에피그램상세페이지
- 에피그램피드페이지
- 랜딩페이지애니메이션
- 시연영상 제작
| 라이브러리 | 사용이유 |
|---|---|
| TanStack Query | 서버 상태를 효율적으로 관리하여 데이터 페칭과 캐싱 최적화에 사용 |
| Axios | API 호출을 간소화하고, 인스턴스를 활용하여 일관된 HTTP 요청 관리에 사용 |
| React-Router-Dom | 애플리케이션 내 라우팅을 구현하여 페이지 전환을 관리하는 데 사용 |
| React-hook-form | 폼 상태 관리와 유효성 검사를 간편하게 처리하는 데 사용 |
| Zod | 데이터 구조와 입력값의 타입 검증을 강화하는 데 사용 |
| Mantine UI | 미리 정의된 컴포넌트를 활용하여 UI를 빠르고 일관되게 구현하는 데 사용 |
📁Delimood
├─ .gitignore
├─ .husky
├─ .prettierrc.cjs
├─ 📄 global.css
├─ 📄 index.html
├─ src
│ ├─ 📄 App.tsx
│ ├─ 📄 index.css
│ ├─ 📄 main.tsx
│ ├─ 📁 apis
│ ├─ 📁 assets
│ ├─ 📁 components
│ ├─ 📁 constants
│ ├─ 📁 context
│ ├─ 📁 hooks
│ ├─ 📁 layout
│ ├─ 📁 pages
│ ├─ 📁 schema
│ ├─ 📁 types
│ └─ 📁 utils
├─ 📄 tailwind.config.js
├─ 📄 vercel.json
└─ 📄 vite.config.ts
백로그에 적어놓은 작업들을 이슈로 옮기면서 브랜치 생성하고 개발시작하는 순서로 진행했습니다.
Github에서 새브랜치 생성시 merge브랜치 생성해서 최신화 후 작업 진행해서 코드리뷰시 각자의 작업코드만 확인할수 있게 진행하고,
Gitmoji와 PR 및 commit 양식을 사용해서 깔끔하고 알아보기 쉽게 규칙을 정해서 진행했습니다.
기능 구현 : epic티켓 생성 → 하위 브랜치 feat생성 후 작업 → epic에 merge → 해당 epic에 관한 모든 작업 완료시 → main에 merge
오류 수정 및 리펙토링 : 해당 티켓 생성 -> main에 merge
zod 라이브러리를 사용해 schema를 작성(데이터 구조와 형식 정의)
API를 작성해 서버에 요청후 서버가 Schema에 맞는 데이터를 클라이언트에 반환
useQueryhook을 사용해 React컴포넌트에서 API호출을 간편하게 수행
suspense와 lazy, ErrorBoundary를 사용해 로딩 상태 관리와 에러 처리 등 최적화 작업을 진행.