[TIL] 2025-12-15

📅 2025-12-15

🎯 오늘 한 일

• DailyLog 프론트엔드 환경 구축 시도 (React + Vite + Material UI)
• VS Code에서 React 프로젝트 생성 과정 진행
• Node.js 버전 문제로 인한 실행 오류 디버깅
• nvm-windows 설치 및 Node.js 버전 관리 전환
• Node 20 → Vite 요구사항 불일치 이슈 파악
• Node 22 LTS 설치 결정 및 적용
• npm run dev 실행 오류 원인 분석 (실행 경로, Node 버전, 의존성 문제)

---

💡 배운 점

• npm run dev는 반드시 package.json이 있는 폴더(dailylog-fe) 에서 실행해야 한다.
• 최신 Vite는 Node.js 20.19+ 또는 22.12+ 이상을 요구한다.
• Node.js “최신”과 “안정(LTS)”은 다르며, 프론트엔드 툴체인은 버전 요구사항이 매우 엄격하다.
• Windows 환경에서는 nvm-windows를 통한 Node 버전 관리가 사실상 필수다.
• Node 버전을 변경한 후에는 반드시
  node_modules, package-lock.json을 삭제하고 재설치해야 한다.
• OneDrive/한글 경로는 npm·vite 실행 시 예기치 않은 문제를 유발할 수 있다.
• 이번 에러는 코드 문제가 아니라 환경 설정 문제였고, 디버깅의 핵심은 로그를 정확히 읽는 것이었다.

---

🚀 내일 할 일

• Node.js 22 LTS 환경에서 npm run dev 정상 실행 확인
• Vite 개발 서버(localhost:5173) 정상 구동 확인
• vite.config.ts 프록시 설정 추가
• 백엔드 /api/logs/ping 엔드포인트와 프론트 연결 테스트
• axios 기반 API 클라이언트 분리 시작

---

🧩 느낀 점

• 프론트엔드 개발은 코드보다 환경 세팅이 절반 이상을 차지한다.
• 에러를 “감”으로 해결하려 하면 시간만 날리고,
  버전 요구사항과 실행 위치 같은 기본 조건을 먼저 확인해야 한다.
• 오늘은 생산성이 낮아 보일 수 있지만,
  이 과정을 겪지 않았으면 이후 단계에서 더 크게 막혔을 가능성이 높다.
• DailyLog를 다시 살리는 과정에서,
  “완성보다 실행 가능한 환경을 만드는 것”이 가장 중요한 첫 단계라는 걸 명확히 체감했다.