[TIL] 2025-12-19

🎯 오늘 한 일

• DailyLog 프론트엔드 CRUD 기능 완성

  • 목록 조회(GET)
  • 추가(POST)
  • 수정(PUT)
  • 삭제(DELETE)

• MUI DataGrid 기반 테이블 UI 안정화

  • content 컬럼 말줄임 처리
  • createdAt 기준 최신순 정렬 로직 적용

• 추가/수정 폼을 Dialog(팝업) 형태로 리팩토링

  • Add / Edit 모드 분리
  • row 클릭 시 수정 모달 오픈
  • Before
  • After
    

• FullCalendar 도입 결정 및 프론트엔드 패키지 설치

  • @fullcalendar/react
  • @fullcalendar/daygrid
  • @fullcalendar/interaction

💡 배운 점

• 단순 CRUD를 넘어 UI 흐름(테이블 → 모달 → 반영) 이 완성되면 프로젝트가 “제품처럼” 보이기 시작함
• createdAt은 “등록 시간”이고, 캘린더 UX를 위해서는 기록 날짜(logDate) 가 별도로 필요함
• DataGrid + Dialog 패턴은 실무에서 자주 쓰이는 구조이며, 상태 관리 포인트(editingId)가 핵심
• 캘린더 UI는 직접 구현보다 검증된 라이브러리(FullCalendar) 를 쓰는 것이 생산성·완성도 모두에서 유리함

🚀 내일 할 일

• 백엔드에 logDate(LocalDate) 필드 추가

• POST / PUT 시 logDate를 함께 저장하도록 API 수정

• 월 단위 조회를 위한 API 설계 (from / to 기반)

• FullCalendar에 기본 month view 렌더링

  • 날짜 클릭 이벤트 연결 준비

🧩 느낀 점

• 단순 기능 추가보다 구조를 바꾸는 작업(모달화, 캘린더 전환) 이 훨씬 사고력을 요구함
• 지금 단계는 “코딩 연습”이 아니라 제품 설계 단계에 들어왔다는 느낌
• 방향을 잘 잡으면 DailyLog는 포트폴리오로 충분히 설득력이 있음