🌱 디렉토리 설계 기준 고민

🔍 시작: 구조를 정해야 하는데... 아무것도 모르겠을 때

처음에는 너무 막막했다.

• 어떤 기준으로 디렉토리를 나눠야 하는지도 몰랐고,
• 어떤 아키텍처를 써야 할지도 감이 없었다.
• 무작정 따라하고 싶지 않았고, 내 기준으로 설계하고 싶었다.

이 과정은 단순한 기술 선택이 아니라
"나만의 사고 기준을 세우는 과정"이었고, 시행착오를 거치며 조금씩 생각이 정리되었다.

---

🧠 기준을 찾기 위한 5가지 질문과 나의 답

디렉토리 구조에는 정답이 없지만, "나만의 기준"은 있어야 한다.

1. 내가 관리하고 싶은 단위는 무엇인가?

✅ 컴포넌트 단위로 관리하고 싶다.

• 모든 컴포넌트는 UI만, 또는 로직만, 또는 둘 다 가질 수 있다.
• 하나의 컴포넌트 = 하나의 폴더로 두고,
  index.jsx, UI.jsx, logic.js, style.js처럼 내부 분리.

2. 상태는 어디에서 관리하고 싶은가?

✅ 최대한 순수한 컴포넌트를 유지하고, 상태는 상위에서 prop으로만 전달.

• 어떤 컴포넌트든 독립적으로 동작해야 한다.
• 마치 레고 조각처럼, 연결만 해주면 잘 동작하는 구조를 지향한다.

3. 얼마나 재사용할 것 같은가?

✅ 지금은 자주 재사용되지 않을 수 있지만,
순수하게 설계하면 나중에 언제든 조립할 수 있다.

• 그래서 무조건 처음엔 core 폴더에 넣고 시작한다.

4. 다른 사람이 봤을 때 구조를 어떻게 이해하길 원하는가?

✅ 전체 구조는 조립 순서대로 보여야 한다.

• core: 진짜 레고 부품
• units: 조립된 기능 단위
• views: 사용자에게 보이는 완성 화면
• 구조 흐름은 views → units → core로 내려간다.

5. 내가 나중에 봐도 이해할 수 있는가?

✅ YES.

• 명확한 계층, 명확한 책임 분리
• 상위 구조만 보면 흐름이 보이고, 하위 구조는 그 기능의 세부로만 집중되어 있음

---

⚙️ 아키텍처 철학: 순수한 레고를 조립하는 방식

핵심 원칙

| 항목 | 철학 |
|------|------|
| 🎯 기본 단위 | **모든 컴포넌트는 core에서 시작** |
| 🧼 상태 분리 | 상태는 core에서 다루지 않음 |
| 🧩 조립 원칙 | `units`에서 `core`를 조합해서 기능 부여 |
| 🔌 연결 방법 | 상위에서 prop으로 로직 전달 (composition) |
| 📐 확장 구조 | 필요할 경우 core → units → views 단계별 조립 |

---

📁 구조 스케치

src/
├── core/         # 순수한 레고 부품들 (UI만 담당)
├── units/        # 레고 조합한 중간 기능들
├── views/        # 페이지 단위 컴포넌트
├── hooks/        # 로직용 커스텀 훅
├── utils/        # format, 계산 등 유틸
├── constants/    # 카테고리, 색상 상수 등
└── main.jsx

---

📌 피그마 기준으로 판단한 core 컴포넌트 후보

• DateInput, AmountInput, CategorySelect, PaymentSelect
• SwitchButton, Button, Modal, Dropdown
• TransactionItemDisplay, AmountText, CategoryTag
• CalendarCell, StatsRow, MiniBarGraph

→ 이들은 로직 없이 UI만 담당하므로 core에 위치

---

✨ 이 기록을 왜 남기는가?

이 문서는 내가 겪은 시행착오와 해결 과정의 결과물이다.

• 처음엔 아무것도 몰랐지만,
• 질문하고, 정리하고, 조합하며
• 나만의 기준과 방향성을 가진 개발자로 성장하고 있다.

언제든 이 기준을 다시 확인하며,
더 나은 방향으로 내 설계를 발전시켜 나갈 수 있도록 이 문서를 남긴다.