## πŸ“Œ Brief Summary React 폴더 κ΅¬μ‘°λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 디렉터리와 νŒŒμΌμ„ μ²΄κ³„μ μœΌλ‘œ κ΄€λ¦¬ν•˜μ—¬ μœ μ§€λ³΄μˆ˜μ„±, ν™•μž₯μ„±, ν˜‘μ—… νš¨μœ¨μ„±μ„ 높이기 μœ„ν•œ 쑰직화 ν”„λ ˆμž„μ›Œν¬λ‹€. ν˜„λŒ€ React μƒνƒœκ³„μ—μ„œλŠ” 파일 μœ ν˜• μ€‘μ‹¬μ˜ λ‹¨μˆœ 뢄리λ₯Ό λ„˜μ–΄, λΉ„μ¦ˆλ‹ˆμŠ€ 도메인과 κΈ°λŠ₯을 μ€‘μ‹¬μœΌλ‘œ 둜직과 UIλ₯Ό μ‘μ§‘μ‹œν‚€λŠ” **Feature-based** λ˜λŠ” **Feature-Sliced Design (FSD)** ꡬ쑰가 ꢌμž₯λœλ‹€. ## πŸ“– Core Content 1. **일반적인 폴더 ꡬ쑰 μ ‘κ·Ό 방식** - **File-Type Based**: μ»΄ν¬λ„ŒνŠΈ, ν›…, μœ ν‹Έλ¦¬ν‹° λ“± 기술적 역할에 따라 λΆ„λ₯˜ (μ†Œκ·œλͺ¨μ— 적합). - **Feature-Based**: 인증, λŒ€μ‹œλ³΄λ“œ λ“± λΉ„μ¦ˆλ‹ˆμŠ€ κΈ°λŠ₯λ³„λ‘œ 폴더λ₯Ό κ΅¬μ„±ν•˜μ—¬ μΊ‘μŠν™”μ™€ 독립적 κ°œλ°œμ„ κ°€λŠ₯ν•˜κ²Œ 함. 2. **2025 ꢌμž₯ ν•˜μ΄λΈŒλ¦¬λ“œ ꡬ쑰** - `assets/`: 정적 μžμ› 쀑앙 관리. - `components/`: μ „μ—­ 곡유 곡톡 UI μ»΄ν¬λ„ŒνŠΈ. - `features/`: 도메인 기반 κΈ°λŠ₯ μ½”λ“œ (API, 고유 μ»΄ν¬λ„ŒνŠΈ, ν›… 포함). - `services/` (λ˜λŠ” `api/`): μ™ΈλΆ€ 톡신 둜직 격리. - `store/` λ˜λŠ” `context/`: μ „μ—­ μƒνƒœ 관리 둜직. 3. **Feature-Sliced Design (FSD) μ•„ν‚€ν…μ²˜** - μ±…μž„κ³Ό λ²”μœ„μ— 따라 `app`, `pages`, `widgets`, `features`, `entities`, `shared` κ³„μΈ΅μœΌλ‘œ 뢄리. - **단방ν–₯ μ˜μ‘΄μ„±**κ³Ό **Public API(`index.ts`)** κ·œμΉ™μ„ 톡해 λͺ¨λ“ˆ 독립성을 κ·ΉλŒ€ν™”ν•œλ‹€. 4. **넀이밍 μ»¨λ²€μ…˜κ³Όμ˜ 연계** - μ»΄ν¬λ„ŒνŠΈλŠ” `PascalCase`, 파일 및 폴더 이름은 운영체제 ν˜Έν™˜μ„±μ„ μœ„ν•΄ `kebab-case`λ₯Ό μ μš©ν•˜λŠ” 것이 ν‘œμ€€μ΄λ‹€. ## βš–οΈ Trade-offs & Caveats - **ꡬ쑰적 λ³΅μž‘λ„**: FSD와 같은 μ—„κ²©ν•œ μ•„ν‚€ν…μ²˜λŠ” μ½”λ“œμ˜ 예츑 κ°€λŠ₯성을 λ†’μ΄μ§€λ§Œ, 초기 섀계 λΉ„μš©μ΄ 크고 파일 이동 μ‹œ 인지적 λΆ€ν•˜κ°€ λ°œμƒν•  수 μžˆλ‹€. - **곡톡 μžμ› λΉ„λŒ€ν™”**: κΈ°λŠ₯λ³„λ‘œ λ‚˜λˆ„λ‹€ 보면 `shared` 폴더가 μ“°λ ˆκΈ°ν†΅μ²˜λŸΌ λΉ„λŒ€ν•΄μ§ˆ μœ„ν—˜μ΄ μžˆμœΌλ―€λ‘œ 정기적인 κ±°λ²„λ„ŒμŠ€κ°€ ν•„μš”ν•˜λ‹€. - **ν•™μŠ΅ 곑선**: μƒˆλ‘œμš΄ νŒ€μ›μ΄ λ³΅μž‘ν•œ 계측 ꡬ쑰λ₯Ό μ΄ν•΄ν•˜κ³  μ˜¬λ°”λ₯Έ μœ„μΉ˜μ— μ½”λ“œλ₯Ό μž‘μ„±ν•˜κΈ°κΉŒμ§€ μ˜¨λ³΄λ”© μ‹œκ°„μ΄ μ†Œμš”λœλ‹€. ## πŸ”— Knowledge Connections ### Related Concepts - **Feature-Sliced Design (FSD)**: λŒ€κ·œλͺ¨ μ‹œμŠ€ν…œ κ΅¬μ‘°ν™”μ˜ ν‘œμ€€ (관계: μƒμœ„ μ•„ν‚€ν…μ²˜) - **Separation of Concerns**: 폴더 λΆ„λ¦¬μ˜ 근본적 μ² ν•™ (관계: 섀계 원리) - **Single Responsibility Principle (SRP)**: 파일 λ‹¨μœ„ λͺ¨λ“ˆν™”μ˜ κΈ°μ€€ (관계: κ°œλ³„ μ»΄ν¬λ„ŒνŠΈ 섀계 원칙) ### Deeper Research Questions 1. ν”„λ‘œμ νŠΈμ˜ λ³΅μž‘λ„κ°€ μ–΄λŠ μž„κ³„μ μ— λ„λ‹¬ν–ˆμ„ λ•Œ File-type κΈ°λ°˜μ—μ„œ Feature-based ꡬ쑰둜 μ „ν™˜ν•˜λŠ” 것이 κ°€μž₯ λΉ„μš© νš¨μœ¨μ μΈκ°€? 2. FSD ꡬ쑰 λ‚΄μ—μ„œ 볡수의 'Features'κ°€ 데이터λ₯Ό κ³΅μœ ν•΄μ•Ό ν•  λ•Œ, μ˜μ‘΄μ„± μˆœν™˜μ„ λ°©μ§€ν•˜κΈ° μœ„ν•œ 'Entities' λ ˆμ΄μ–΄ ν™œμš©λ²•μ€? 3. Next.js의 App Router 파일 κ·œμ•½(`page.tsx`, `layout.tsx`)κ³Ό μ»€μŠ€ν…€ 폴더 ꡬ쑰λ₯Ό 좩돌 없이 ν†΅ν•©ν•˜λŠ” μ „λž΅μ€? 4. `index.ts`λ₯Ό ν†΅ν•œ μΊ‘μŠν™”κ°€ 트리 쉐이킹(Tree Shaking) μ„±λŠ₯에 λ―ΈμΉ˜λŠ” ꡬ체적인 영ν–₯은 무엇인가? 5. λŒ€κ·œλͺ¨ νŒ€μ—μ„œ 린트 κ·œμΉ™(ESLint)을 톡해 폴더 계측 κ°„μ˜ 잘λͺ»λœ μ°Έμ‘°λ₯Ό μžλ™μœΌλ‘œ κ°μ§€ν•˜κ³  μ°¨λ‹¨ν•˜λŠ” μ„€μ • λ°©μ•ˆμ€? ### Practical Application Contexts - **μ‹ κ·œ λŒ€κ·œλͺ¨ ν”„λ‘œμ νŠΈ μ…‹μ—…**: ν™•μž₯성을 κ³ λ €ν•œ FSD 기반 폴더 ꡬ쑰 섀계 및 ν…œν”Œλ¦Ών™”. - **λ ˆκ±°μ‹œ ꡬ쑰 κ°œμ„ **: μ—‰λ§μœΌλ‘œ μ„žμΈ `components` 폴더λ₯Ό 도메인 μ€‘μ‹¬μ˜ `features` ν΄λ”λ‘œ 점진적 재배치. ### Adjacent Topics - **State Management Architectures** - **Frontend Naming Conventions** - **Micro-Frontends Project Structure**