## πŸ“Œ Brief Summary 'Bulletproof React'λŠ” ν”„λ‘œλ•μ…˜ μˆ˜μ€€μ˜ React μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ΅¬μΆ•ν•˜κΈ° μœ„ν•œ ν™•μž₯ κ°€λŠ₯ν•˜κ³  κ°•λ ₯ν•œ μ•„ν‚€ν…μ²˜ κ°€μ΄λ“œλΌμΈμ΄λ‹€. React의 μžμœ λ„λ‘œ 인해 λ°œμƒν•˜λŠ” 일관성 μ—†λŠ” ꡬ쑰 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄ κΈ°λŠ₯(Feature) 기반의 λͺ¨λ“ˆν™”와 λͺ…ν™•ν•œ 계측 λΆ„λ¦¬λΌλŠ” 주관적인(Opinionated) 베슀트 ν”„λž™ν‹°μŠ€λ₯Ό μ œμ‹œν•œλ‹€. ## πŸ“– Core Content 1. **μ•„ν‚€ν…μ²˜ μ² ν•™ (Scalability & Predictability)** - ReactλŠ” ν”„λ ˆμž„μ›Œν¬κ°€ μ•„λ‹Œ λΌμ΄λΈŒλŸ¬λ¦¬μ΄λ―€λ‘œ ꡬ쑰적 μ„ νƒμ˜ μ±…μž„μ΄ κ°œλ°œμžμ—κ²Œ μžˆλ‹€. - Bulletproof ReactλŠ” νŒ€ 규λͺ¨μ™€ μ½”λ“œλ² μ΄μŠ€κ°€ 컀져도 μœ μ§€λ³΄μˆ˜κ°€ κ°€λŠ₯ν•˜λ„λ‘ λͺ…ν™•ν•œ 경계(Boundaries)와 μΌκ΄€λœ μž‘μ—… 방식을 μ œκ³΅ν•œλ‹€. 2. **κΈ°λŠ₯ 기반 ꡬ쑰 (Feature-Based Structure)** - 기술적 μ—­ν• (Components, Hooks, Styles)이 μ•„λ‹Œ λΉ„μ¦ˆλ‹ˆμŠ€ κΈ°λŠ₯(Feature) λ‹¨μœ„λ‘œ μ½”λ“œλ₯Ό κ·Έλ£Ήν™”ν•œλ‹€. - 각 κΈ°λŠ₯ 폴더 내에 ν•΄λ‹Ή κΈ°λŠ₯에 ν•„μš”ν•œ μ»΄ν¬λ„ŒνŠΈ, API, μƒνƒœ, νƒ€μž…, μœ ν‹Έλ¦¬ν‹°λ₯Ό λ…λ¦½μ μœΌλ‘œ λ°°μΉ˜ν•˜μ—¬ 응집도λ₯Ό 높인닀. 3. **κ³„μΈ΅ν™”λœ μ•„ν‚€ν…μ²˜ (Layered Architecture)** - ν”„λ‘œμ νŠΈ ν‘œμ€€, ν”„λ‘œμ νŠΈ ꡬ쑰, μ»΄ν¬λ„ŒνŠΈ/μŠ€νƒ€μΌλ§, API 계측, μƒνƒœ 관리, ν…ŒμŠ€νŠΈ, λ³΄μ•ˆ λ“± ν”„λ‘ νŠΈμ—”λ“œ μ „λ°˜μ˜ λ ˆμ΄μ–΄λ₯Ό κ·œκ²©ν™”ν•œλ‹€. - νŠΉμ • κΈ°μˆ μ— 얽맀이지 μ•Šκ³  원칙(Principles)에 μ§‘μ€‘ν•˜μ—¬ 라이브러리 ꡐ체가 μš©μ΄ν•œ ꡬ쑰λ₯Ό μ§€ν–₯ν•œλ‹€. 4. **μœ μ—°ν•œ 적용 (Guideline, Not Template)** - κ°•μ œμ μΈ λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈκ°€ μ•„λ‹ˆλ©°, νŒ€μ˜ μš”κ΅¬μ‚¬ν•­κ³Ό ν”„λ‘œμ νŠΈ 규λͺ¨μ— 맞게 μ„ νƒμ μœΌλ‘œ μ μš©ν•  수 μžˆλŠ” κ°€μ΄λ“œλΌμΈ 역할을 μˆ˜ν–‰ν•œλ‹€. ## βš–οΈ Trade-offs & Caveats - **κ·œμΉ™μ˜ νŒŒνŽΈν™” μœ„ν—˜**: ν”„λ ˆμž„μ›Œν¬κ°€ μ•„λ‹Œ κ°€μ΄λ“œλΌμΈμ΄λ―€λ‘œ, νŒ€ λ‚΄μ—μ„œ ν•©μ˜λœ μˆ˜μ€€μ„ λ„˜μ–΄μ„œλŠ” 자의적인 해석이 λ°œμƒν•  경우 ꡬ쑰적 일관성이 깨질 수 μžˆλ‹€. - **초기 ν•™μŠ΅ 곑선**: 폴더 ꡬ쑰가 κΉŠμ–΄μ§€κ³  관심사 뢄리가 엄격해짐에 따라, 기쑴의 ν”Œλž«ν•œ ꡬ쑰에 μ΅μˆ™ν•œ κ°œλ°œμžλ“€μ—κ²ŒλŠ” 초기 적응 μ‹œκ°„μ΄ ν•„μš”ν•˜λ‹€. - **μ˜€λ²„ν—€λ“œ**: 맀우 μž‘μ€ 규λͺ¨μ˜ ν”„λ‘œμ νŠΈλ‚˜ λ‹¨μˆœν•œ MVP λ‹¨κ³„μ—μ„œλŠ” μ΄λŸ¬ν•œ μ—„κ²©ν•œ 뢄리가 였히렀 κ³Όλ„ν•œ λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈλ‘œ 느껴질 수 μžˆλ‹€. ## πŸ”— Knowledge Connections ### Related Concepts (Auto-Linked) * [[Architecture]] * [[Boundaries]] * [[Clean_Architecture]] * [[Domain-Driven_Design]] * [[ESLint]] * [[Feature-Sliced_Design]] * [[Frontend]] * [[Layered_Architecture]] * [[Management]] * [[Monorepo]] * [[Principles]] * [[React]] * [[React_Architecture]] * [[Research]] * [[Scalability]] ### Related Concepts - **Feature-Based Structure**: λΉ„μ¦ˆλ‹ˆμŠ€ 도메인 λ‹¨μœ„μ˜ μ½”λ“œ 응집도 ν–₯상 기법 (관계: 핡심 κ΅¬ν˜„ νŒ¨ν„΄) - **Feature-Sliced Design (FSD)**: κΈ°λŠ₯ 기반 ꡬ쑰λ₯Ό 더 μ²΄κ³„ν™”ν•œ κ³ κΈ‰ μ•„ν‚€ν…μ²˜ 방법둠 (관계: ν™•μž₯ λ°œμ „ ν˜•νƒœ) - **Scalable React Architecture**: λŒ€κ·œλͺ¨ μ‹œμŠ€ν…œμ„ μœ„ν•œ 섀계 μ² ν•™ (관계: μƒμœ„ λͺ©ν‘œ) ### Deeper Research Questions 1. κΈ°λŠ₯ 기반 κ΅¬μ‘°μ—μ„œ μ—¬λŸ¬ κΈ°λŠ₯ 간에 κ³΅ν†΅μœΌλ‘œ μ‚¬μš©λ˜λŠ” 둜직(Shared)의 μ˜μ‘΄μ„± 역전은 μ–΄λ–»κ²Œ κ΄€λ¦¬ν•˜λŠ”κ°€? 2. API 계측과 μƒνƒœ 관리 λ ˆμ΄μ–΄μ˜ 물리적 뢄리가 λ‹¨μœ„ ν…ŒμŠ€νŠΈμ˜ 고립성 확보에 μ–΄λ–€ 영ν–₯을 λ―ΈμΉ˜λŠ”κ°€? 3. λŒ€κ·œλͺ¨ λ¦¬νŒ©ν† λ§ μ‹œ, κΈ°λŠ₯ λ‹¨μœ„λ‘œ μͺΌκ°œμ§„ λͺ¨λ“ˆμ΄ 파일 μœ ν˜• 기반 ꡬ쑰보닀 μ•ˆμ „ν•œ μ΄μœ λŠ” 무엇인가? 4. μ•„ν‚€ν…μ²˜κ°€ μ œμ‹œν•˜λŠ” 'λͺ…ν™•ν•œ 경계'λ₯Ό κ°•μ œν•˜κΈ° μœ„ν•΄ ESLint λ“±μ˜ 도ꡬλ₯Ό μ–΄λ–»κ²Œ ν™œμš©ν•  수 μžˆλŠ”κ°€? 5. μ„œλ²„ μ»΄ν¬λ„ŒνŠΈ(RSC) ν™˜κ²½μ—μ„œ Bulletproof React의 폴더 ꡬ쑰 μ „λž΅μ€ μ–΄λ–»κ²Œ μ§„ν™”ν•΄μ•Ό ν•˜λŠ”κ°€? ### Practical Application Contexts - **μ‹ κ·œ ν”„λ‘œμ νŠΈ μ…‹μ—…**: 초기 폴더 ꡬ쑰 및 λ ˆμ΄μ–΄λ§ ν‘œμ€€μ•ˆμœΌλ‘œ 채택. - **λ ˆκ±°μ‹œ λ¦¬νŒ©ν† λ§**: λ³΅μž‘ν•΄μ§„ μ½”λ“œλ² μ΄μŠ€λ₯Ό κΈ°λŠ₯ λ‹¨μœ„λ‘œ μ μ§„μ μœΌλ‘œ 격리 및 ꡬ쑰화. ### Adjacent Topics - **Clean Architecture in Frontend** - **Domain-Driven Design (DDD)** - **Monorepo Management Strategies**