AI 요약관련 정보

• useState의 핵심 원리: 데이터(상태)가 변경되면 컴포넌트가 자동으로 다시 렌더링(그리기)되어 UI가 업데이트됩니다. 🔄
• 디데이 계산기 기능 요구사항: 일반/편집 모드 전환, 날짜/내용 수정, 라이트/다크 모드 지원, 데이터 영속성(새로고침/재시작 후에도 유지)을 포함합니다. 🗓️
• 개발 접근 방식: 기존 완성된 프로젝트를 보면서 클론 코딩 방식으로 진행하며, 필요한 기능은 구글링이나 AI의 도움을 받아 구현합니다. 🧑‍💻
• 초기 프로젝트 설정: Vite를 사용하여 React + TypeScript 프로젝트를 생성하고, 기본 CSS 및 App 컴포넌트 내용을 정리하여 시작합니다. 🚀
• 날짜 정보 표시 및 포맷팅: JavaScript Date 객체를 활용하여 현재 날짜(연, 월, 일, 요일)를 가져오고, padStart 및 요일 배열 매핑을 통해 가독성 있는 문자열로 포맷팅합니다. 📅
• 재사용 가능한 유틸리티 함수: 날짜를 읽기 쉬운 문자열로 변환하는 getReadableDateString과 두 날짜 간의 디데이 차이를 계산하는 calculateDDay와 같은 함수를 만들어 코드의 재사용성과 유지보수성을 높입니다. 🛠️
• 컴포넌트 기반 UI 관리: App.tsx를 최상위 컴포넌트로 하여 isEditing 상태에 따라 DisplayComponent와 EditComponent를 조건부 렌더링하여 모드를 전환합니다. 🧩
• 상태 관리의 중요성: useState를 사용하여 title, dDayDate, isEditing, isMouseHover 등 UI 변경에 필요한 데이터를 관리하며, 최상위 컴포넌트에서 주요 상태를 관리하여 하위 컴포넌트로 전달합니다. 💡
• 마우스 호버 이벤트 처리: onMouseEnter와 onMouseLeave 이벤트를 활용하여 마우스 오버 상태(isMouseHover)를 관리하고, 이 상태에 따라 디데이 정보(전체 날짜 vs. D-Day 카운트)를 조건부로 표시합니다. 🖱️
• 디데이 계산 로직: calculateDDay 함수를 통해 오늘 날짜와 목표 날짜의 차이를 계산하고, 결과값(0, 양수, 음수)에 따라 "디데입니다", "D-N", "D+N"과 같은 문구를 동적으로 생성합니다. ➕➖