React 복습하기
4차 (캘린더 추가로 월간 플래너 제작)
- useCalendar 훅 생성
- 훅을 통한 월별 캘린더 레이아웃 생성
- 월간 task 조회 후 날짜 별로 추가
- 선택한 날짜 task 조회
- 전체 삭제는 선택한 날짜에 한하여 적용
- useCalendar 훅을 통해 생성한 날짜 데이터 구성은 다음 같이 중첩 배열로 구성하였다 (2024.06월 기준 6개의 주)
- 캘린더를 만들면 전체 레이아웃 뿐만 아닌 날짜 선택 같은 기능에도 월별 날짜 계산이 반복적으로 필요할 듯 하여 재사용성을 위해 훅을 생성하였음
- 생각이 좀 더 필요했던 부분은 월마다 양쪽 끝에 이전/다음 달이 며칠 껴있어서 범위 조절이 필요했던 점
- 월별 조회한 task를 훅 내 함수를 통해 날짜 별로 추가할 수 있었음
- 로컬에서 정상이었는데 배포환경에서 19일을 조회했는데 20일 데이터가 나오는 문제가 있었음 (코드 수정 및 vercel 설정을 통해 해결)
3차 (Next.js 변경 및 서버 연동)
- Next.js 15로 마이그레이션
- DB(PostgreSQL) 사용: 데이터베이스로 PostgreSQL을 도입하여 지속적인 데이터 저장
- Prisma 사용: Prisma를 ORM으로 도입하여 데이터베이스와의 상호작용을 더욱 효율적이고 안전하게 관리
- React Query 적용: 서버 데이터 요청 및 캐싱 관리를 위해 React Query 적용
- Server Actions 사용: 서버 로직 클라이언트 코드와 분리
- UX 개선: hover 시 색상 및 삭제 버튼 노출
- 이번에 선택한 기술들은 이전에 처음 사용해보며 어려움을 겪었던 기술을 다시 한번 사용해보기 위해 선택함
- React Query 사용으로 Jotai 상태 관리 코드가 많이 줄었음
- React Query 오랜만에 사용해서 기억이 잘 안 남
- TanStack Query로 버전업된 부분 살펴보기
2차 (기능 개선 및 UI/UX 향상)
- TypeScript 적용
- 상태 관리 라이브러리 사용: Jotai 도입. 불필요한 렌더링을 최소화
- UX 개선: 편집 기능 변경 (버튼 방식 -> 항목 선택 시 편집모드)
- 상태관리 라이브러리 사용 전 TypeScript로 type 적용해보기
- 이전에 사용해봤던 Recoil과 동작 방식이 비슷한 Jotai로 선택
- 상태관리 라이브러리 도입으로 코드가 간결해졌음