## ๐Ÿ“Œ Brief Summary Clean Code์™€ SOLID ์›์น™์€ ์œ ์ง€๋ณด์ˆ˜์„ฑ, ๊ฐ€๋…์„ฑ, ํ™•์žฅ์„ฑ์„ ํ™•๋ณดํ•˜๊ธฐ ์œ„ํ•œ ์†Œํ”„ํŠธ์›จ์–ด ๊ณตํ•™์˜ ํ•ต์‹ฌ ์„ค๊ณ„ ์ง€์นจ์ด๋‹ค. ํ˜„๋Œ€์˜ React ์ƒํƒœ๊ณ„์—์„œ ์ด๋Ÿฌํ•œ ์›์น™๋“ค์€ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง๊ณผ UI์˜ ๊ฒฐํ•ฉ๋„๋ฅผ ๋‚ฎ์ถ”๊ณ , ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ ์•„ํ‚คํ…์ฒ˜๋ฅผ ๊ตฌ์ถ•ํ•˜๋ฉฐ, ๊ธฐ์ˆ  ๋ถ€์ฑ„ ๋ˆ„์ ์„ ๋ฐฉ์ง€ํ•˜๋Š” ๊ธฐ๋ฐ˜ ์—ญํ• ์„ ํ•œ๋‹ค. ## ๐Ÿ“– Core Content 1. **SOLID Principles in React** - **SRP (๋‹จ์ผ ์ฑ…์ž„)**: ์ปดํฌ๋„ŒํŠธ๋‚˜ ํ›…์€ ํ•˜๋‚˜์˜ ๋ช…ํ™•ํ•œ ๋ชฉ์ ๋งŒ ๊ฐ€์ ธ์•ผ ํ•œ๋‹ค (300์ค„ ๊ธฐ์ค€). - **OCP (๊ฐœ๋ฐฉ-ํ์‡„)**: ์ฝ”๋“œ ์ˆ˜์ • ๋Œ€์‹  ์ปดํฌ๋„ŒํŠธ ํ•ฉ์„ฑ(Composition)์„ ํ†ตํ•ด ๊ธฐ๋Šฅ์„ ํ™•์žฅํ•œ๋‹ค. - **ISP (์ธํ„ฐํŽ˜์ด์Šค ๋ถ„๋ฆฌ)**: ํ•„์š”ํ•œ Props๋งŒ ์ „๋‹ฌํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ๋ถˆํ•„์š”ํ•œ ๊ฒฐํ•ฉ์„ ์ฐจ๋‹จํ•œ๋‹ค. - **DIP (์˜์กด์„ฑ ์—ญ์ „)**: ๊ตฌ์ฒด์  ๊ตฌํ˜„์ด ์•„๋‹Œ ์ถ”์ƒํ™”(Context, Props)์— ์˜์กดํ•˜์—ฌ ์ฃผ์ž…๋ฐ›๋Š”๋‹ค. 2. **Clean Code & ํ•ต์‹ฌ ์›์น™** - **DRY (์ค‘๋ณต ์ œ๊ฑฐ)**: ์ปค์Šคํ…€ ํ›…์œผ๋กœ ๊ณตํ†ต ๋กœ์ง์„ ์ถ”์ถœํ•˜๋˜, ๊ณผ๋„ํ•œ ์ถ”์ƒํ™”๋Š” ๊ฒฝ๊ณ„ํ•œ๋‹ค. - **KISS (๋‹จ์ˆœ์„ฑ ์œ ์ง€)**: ๋ณต์žกํ•œ ๋กœ์ง๋ณด๋‹ค ์ง๊ด€์ ์ด๊ณ  ๋‹จ์ˆœํ•œ ์ฝ”๋“œ๋ฅผ ์šฐ์„ ์‹œํ•œ๋‹ค. - **YAGNI (๋ถˆํ•„์š” ๊ธฐ๋Šฅ ๋ฐฐ์ œ)**: ๋‹น์žฅ ํ•„์š”ํ•˜์ง€ ์•Š์€ ๋ฏธ๋ž˜์˜ ํ™•์žฅ์„ฑ์„ ๋ฏธ๋ฆฌ ๊ตฌํ˜„ํ•˜์ง€ ์•Š๋Š”๋‹ค. 3. **์‹ค๋ฌด์  ๊ฐ€์ด๋“œ๋ผ์ธ** - ๋ช…ํ™•ํ•œ ๋„ค์ด๋ฐ(PascalCase, camelCase)๊ณผ ๋‚ฎ์€ ์ค‘์ฒฉ ๊ตฌ์กฐ๋ฅผ ์œ ์ง€ํ•œ๋‹ค. - ๋™์ผ ํŒจํ„ด์ด 3๋ฒˆ ์ด์ƒ ๋ฐ˜๋ณต๋  ๋•Œ(`Rule of Three`) ๋น„๋กœ์†Œ ์ถ”์ƒํ™”๋ฅผ ์ง„ํ–‰ํ•˜์—ฌ ์„ฃ๋ถ€๋ฅธ ์ตœ์ ํ™”๋ฅผ ๋ฐฉ์ง€ํ•œ๋‹ค. ## โš–๏ธ Trade-offs & Caveats - **์ถ”์ƒํ™” vs ๋‹จ์ˆœํ•จ**: DRY ์›์น™์„ ์ง€ํ‚ค๋ ค๋‹ค ๋งŒ๋“  ๊ณ ์ฐจ์›์ ์ธ ์ถ”์ƒํ™”๊ฐ€ ์˜คํžˆ๋ ค ์ฝ”๋“œ์˜ ํ๋ฆ„์„ ํŒŒ์•…ํ•˜๊ธฐ ์–ด๋ ต๊ฒŒ ๋งŒ๋“ค์–ด KISS ์›์น™์„ ์œ„๋ฐ˜ํ•  ์ˆ˜ ์žˆ๋‹ค. - **์ดˆ๊ธฐ ๊ฐœ๋ฐœ ์†๋„**: ์—„๊ฒฉํ•œ ์›์น™ ์ค€์ˆ˜๋Š” ์ดˆ๊ธฐ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ์™€ ์„ค๊ณ„ ์‹œ๊ฐ„์„ ์ฆ๊ฐ€์‹œํ‚ค๋‚˜, ์žฅ๊ธฐ์ ์ธ ์œ ์ง€๋ณด์ˆ˜ ๋น„์šฉ์„ ํš๊ธฐ์ ์œผ๋กœ ์ค„์—ฌ์ค€๋‹ค. - **์˜ค๋ฒ„์—”์ง€๋‹ˆ์–ด๋ง์˜ ์œ„ํ—˜**: YAGNI๋ฅผ ๋ฌด์‹œํ•˜๊ณ  ์„ค๊ณ„ํ•œ '๋ฏธ๋ž˜ ๋Œ€๋น„์šฉ' ์ฝ”๋“œ๋Š” ๊ฒฐ๊ตญ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” 'Dead Code'๊ฐ€ ๋˜์–ด ์‹œ์Šคํ…œ์˜ ์ง์ด ๋  ๊ฐ€๋Šฅ์„ฑ์ด ๋†’๋‹ค. ## ๐Ÿ”— Knowledge Connections ### Related Concepts (Auto-Linked) * [[Custom_Hooks]] * [[ESLint]] * [[Engineering_Principles]] * [[Feature-Sliced_Design]] * [[Inversion]] * [[Principles]] * [[React]] * [[Refactoring]] * [[Refactoring Techniques]] * [[Research]] * [[Rule of Three]] * [[SOLID_Principles]] * [[Software Engineering Principles]] * [[SonarQube]] ### Related Concepts - **Component Composition**: OCP ์‹คํ˜„์˜ ํ•ต์‹ฌ (๊ด€๊ณ„: ๊ตฌํ˜„ ํŒจํ„ด) - **Custom Hooks**: DRY ๋ฐ SRP๋ฅผ ์œ„ํ•œ ๋ฌผ๋ฆฌ์  ๋‹จ์œ„ (๊ด€๊ณ„: ์‹ค์ฒœ ๋„๊ตฌ) - **Feature-Sliced Design (FSD)**: ์›์น™์˜ ๊ตฌ์กฐ์  ๊ฐ•์ œ (๊ด€๊ณ„: ์•„ํ‚คํ…์ฒ˜ ํ”„๋ ˆ์ž„์›Œํฌ) ### Deeper Research Questions 1. ํ•จ์ˆ˜ํ˜• React ํ™˜๊ฒฝ์—์„œ ์ƒ์† ์—†์ด ๋ฆฌ์Šค์ฝ”ํ”„ ์น˜ํ™˜ ์›์น™(LSP)์„ ์ค€์ˆ˜ํ•˜๋Š” ์ธํ„ฐํŽ˜์ด์Šค ์„ค๊ณ„ ์ „๋žต์€? 2. ์„ฃ๋ถ€๋ฅธ ์ถ”์ƒํ™”(Premature Abstraction)๊ฐ€ ์ „์ฒด ํ”„๋กœ์ ํŠธ์˜ ์ธ์ง€ ๋ถ€ํ•˜์™€ ์œ ์ง€๋ณด์ˆ˜ ๋น„์šฉ์— ๋ฏธ์น˜๋Š” ์ •๋Ÿ‰์  ์˜ํ–ฅ์€? 3. DIP(์˜์กด์„ฑ ์—ญ์ „)๋ฅผ ์œ„ํ•ด Context๋ฅผ ๋‚จ๋ฐœํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ์„ฑ๋Šฅ ์ €ํ•˜์™€ ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•œ 'Inversion of Control' ํŒจํ„ด์˜ ์กฐํ™”๋Š”? 4. Clean Code๋ฅผ ๊ฐ•์ œํ•˜๊ธฐ ์œ„ํ•œ ์ •์  ๋ถ„์„ ๋„๊ตฌ(ESLint, SonarQube)์˜ ๊ทœ์น™์„ ํŒ€์˜ ๊ธฐ์ˆ ์  ์„ฑ์ˆ™๋„์— ๋”ฐ๋ผ ์–ด๋–ป๊ฒŒ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•ํ•˜๋Š”๊ฐ€? 5. YAGNI ์›์น™ ํ•˜์—์„œ '๋‚˜์ค‘์— ๊ณ ์น˜๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ'๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•œ ์•„ํ‚คํ…์ฒ˜์  ์œ ์—ฐ์„ฑ(Flexibility)์˜ ์ตœ์†Œ ๋‹จ์œ„๋Š”? ### Practical Application Contexts - **์ฝ”๋“œ ๋ฆฌ๋ทฐ ๊ธฐ์ค€ ์ˆ˜๋ฆฝ**: ํŒ€ ์ „์ฒด์˜ ์ฝ”๋“œ ํ’ˆ์งˆ ์ƒํ–ฅ ํ‰์ค€ํ™”๋ฅผ ์œ„ํ•œ ๋ช…ํ™•ํ•œ ์ฒดํฌ๋ฆฌ์ŠคํŠธ ์ œ๊ณต. - **๋Œ€๊ทœ๋ชจ ๋ฆฌํŒฉํ† ๋ง ๊ฐ€์ด๋“œ**: ๋ณต์žกํ•˜๊ฒŒ ์–ฝํžŒ ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ๋ฅผ ๋‹จ์ผ ์ฑ…์ž„ ์›์น™์— ๋”ฐ๋ผ ๋ถ„ํ•ดํ•˜๊ณ  ์ •๋ˆ. ### Adjacent Topics - **Software Engineering Principles** - **Refactoring Techniques** - **Test Driven Development (TDD)**