[TIL] 2025-12-18

🎯 오늘 한 일

• Vite + React + MUI 기반으로 DailyLog 프론트엔드 화면 구성

• MUI DataGrid를 사용해 백엔드(/api/logs) 데이터 조회 및 테이블 렌더링

• content 컬럼 길이로 인한 가로 무한 확장 문제 해결 (flex + 말줄임 처리)

• POST 요청으로 로그 추가 기능 구현 및 그리드 즉시 반영
  

• CORS 이슈로 인한 POST 403 문제 해결 (allowedOrigins/OPTIONS 설정 이해)

• useEffect + 비동기 fetch 패턴 정리 및 fetchLogs 재사용 구조로 리팩토링

• 입력 폼을 DataGrid와 동일한 박스(Paper) UI로 정렬해 화면 일관성 확보

💡 배운 점

• 추가(Create)는 POST, 수정(Update)는 PUT이 명확한 REST 원칙
• DataGrid에서 컬럼 폭 문제는 대부분 flex/width 설정 미흡이 원인
• POST만 403이 뜨는 경우, Spring Security가 없어도 CORS 프리플라이트(OPTIONS) 를 의심해야 함
• useEffect 내부에서 setState를 쓰는 것은 일반적이며, ESLint 경고는 구조 정리로 해소 가능
• 프론트엔드에서 CRUD 흐름을 직접 연결해보니, 백엔드 API 설계의 중요성이 더 명확해짐

🚀 내일 할 일

• PUT까지 연결된 흐름을 기준으로 UI/UX 정리(버튼 문구, 편집 상태 표시 등)
• 필요 시 DELETE 기능 추가 여부 검토
• 오전에는 정보처리기사 필기 PDF 1과목 훑기

🧩 느낀 점

• 단순히 “화면이 뜬다”를 넘어서, 실제 데이터 흐름이 왕복되는 지점까지 와서 성취감이 큼
• 문제 대부분이 개념 부족이 아니라 세부 설정(CORS, flex, hook 구조) 에서 발생했다는 점이 인상적
• 이제 DailyLog는 단순 연습이 아니라 실무형 CRUD 미니 프로젝트로 충분히 의미가 생김