Project Detail

프로젝트 상세내용 화면입니다.뒤로가기

Daeng Daeng Nynang (댕댕냥)

1,300만 반려인을 위한 맞춤 서비스. 다양한 서비스(반려동물과 함께할 산책로 위치, 동물 약국, 동물 병원 등)를 한 곳에서 볼 수 있는 서비스

사이트 링크 바로가기(서비스 종료)

깃허브 바로가기

작업기간 : 2024-04-05 ~ 2024-05-31 (8주)

NextJS

NextJS Page Router

Tailwind CSS

TypeScript

next-auth

zod

react-hook-form

shadCn

axios

프로젝트 주소
https://www.daengdaengnyang.shop/
테스트 계정 : testtest@test.com / 123456
프로젝트 소개 및 설명
https://github.com/tjdsksro90/daeng-daeng-nyang
팀 프로젝트
참여인원 : 프론트엔드 4명 / 백엔드 2명
기술 스택
프론트엔드 - NextJS(page router), TypeSciprt, Zustand, React-Query(tanstack query v5), Next-Auth, zod, react-hook-form, shadCn, axios
백엔드 - node, next, mysql, pm2, amazon ec2, amazon load balancer
담당 파트
스케쥴 Page
등록된 펫들의 스케쥴 관리할 수 있는 페이지
CRUD 작업
ServerSideProps로 데이터 받아오기
react-query의 prefetch, hydration, DeHydreate를 사용하여 서버에 있는 데이터를 클라이언트로 serialize
한화면에서 구현하기 위해서 등록 수정 삭제가 모달에서 이뤄지고 실시간으로 데이터 패칭
프로젝트 공통
재사용 가능한 공통 컴포넌트 구현
폼 관련 컴포넌트 (form-select)
modal
트러블 슈팅
이슈
이슈
react-calendar : 초기에 고려했던 라이브러리였으나, tailwind로 custom하기 좋지 않음
react-big-calednar : 고려했던 react-calendar보다 10배 이상 용량이 큼
datepicker : 용량이 작았지만, datepicker 페이지의 용례에서 데이터 맵핑 코드가 없어서 불가능하다 판단
해결 커스터마이징 캘린더 구현
결과
직접 구현함으로써 불필요한 라이브러리 설치를 안함으로써 6kb로 react-calendar(11.7kb)와 react-big-calendar(51.7kb)와 2~10배 성능 차이가 남
추후 추가될 수 있는 기능을 쉽게 접목시킬 수 있게됨
라이브러리 선택할 때 기술 스택과의 호환성이 중요하다는 것을 체감