From adf4b3292abc3bfb93b2af042c1f1ecebd32afb9 Mon Sep 17 00:00:00 2001 From: Antigravity Agent Date: Sun, 26 Apr 2026 21:35:17 +0900 Subject: [PATCH] chore: Delete processed raw file (Layered Arch) --- 00_Raw/Layered Architecture.md | 25 ---------------- .../AI/Layered-Architecture-in-Frontend.md | 30 +++++++++++++++++++ 2 files changed, 30 insertions(+), 25 deletions(-) delete mode 100644 00_Raw/Layered Architecture.md create mode 100644 10_Wiki/Topics/AI/Layered-Architecture-in-Frontend.md diff --git a/00_Raw/Layered Architecture.md b/00_Raw/Layered Architecture.md deleted file mode 100644 index 4b2005a0..00000000 --- a/00_Raw/Layered Architecture.md +++ /dev/null @@ -1,25 +0,0 @@ -# [[Layered Architecture]] - -## πŸ“Œ Brief Summary -Layered Architecture(κ³„μΈ΅ν˜• μ•„ν‚€ν…μ²˜)λŠ” 데이터, 둜직, ν”„λ ˆμ  ν…Œμ΄μ…˜κ³Ό 같은 기술적인 μ—­ν• (Technical Role)에 따라 관심사λ₯Ό λΆ„λ¦¬ν•˜λŠ” 전톡적인 μ†Œν”„νŠΈμ›¨μ–΄ μ•„ν‚€ν…μ²˜ λ°©μ‹μž…λ‹ˆλ‹€ [1]. React ν”„λ‘œμ νŠΈμ—μ„œλŠ” 주둜 `components`, `hooks`, `services`, `store`와 같이 파일 μœ ν˜•λ³„λ‘œ 폴더λ₯Ό κ΅¬μ„±ν•˜λŠ” ν˜•νƒœλ‘œ μ μš©λ©λ‹ˆλ‹€ [1, 2]. 이 κ΅¬μ‘°λŠ” 초기 ν”„λ‘œμ νŠΈ 섀정이 직관적이고 μ†Œκ·œλͺ¨ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—λŠ” μ ν•©ν•˜μ§€λ§Œ, μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ 컀질수둝 단일 κΈ°λŠ₯(Feature)이 μ—¬λŸ¬ 계측에 ν©μ–΄μ§€κ²Œ λ˜μ–΄ μ½”λ“œ μœ μ§€λ³΄μˆ˜ 및 ν™•μž₯성이 크게 λ–¨μ–΄μ§€λŠ” 단점이 μžˆμŠ΅λ‹ˆλ‹€ [1-3]. - -## πŸ“– Core Content -* **기술적 역할에 κΈ°λ°˜ν•œ 뢄리 (Separation by Technical Role):** - Layered ArchitectureλŠ” MVC(Model-View-Controller), MVP(Model-View-Presenter), MVVM λ“±μ˜ νŒ¨ν„΄μ²˜λŸΌ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ 데이터, λΉ„μ¦ˆλ‹ˆμŠ€ 둜직, ν”„λ ˆμ  ν…Œμ΄μ…˜ κ³„μΈ΅μœΌλ‘œ λ‚˜λˆ•λ‹ˆλ‹€ [1, 4]. ν”„λ‘ νŠΈμ—”λ“œ ν”„λ‘œμ νŠΈμ—μ„œλŠ” 주둜 λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈλ₯Ό ν•˜λ‚˜μ˜ 폴더에, λͺ¨λ“  ν›…(Hooks)을 λ‹€λ₯Έ 폴더에, μŠ€νƒ€μΌμ„ 또 λ‹€λ₯Έ 폴더에 λͺ¨μ•„λ‘λŠ” 방식(Type-Based Organization)으둜 λ‚˜νƒ€λ‚©λ‹ˆλ‹€ [1, 2]. -* **초기 직관성과 μ†Œκ·œλͺ¨ 앱에 λŒ€ν•œ 적합성:** - 이 κ΅¬μ‘°λŠ” 기술적인 λͺ…확성을 μ΅œμ ν™”ν•˜λ―€λ‘œ, 개발 초기의 μž‘μ€ ν”„λ‘œν† νƒ€μž…μ΄λ‚˜ μ€‘μ†Œκ·œλͺ¨ μ• ν”Œλ¦¬μΌ€μ΄μ…˜(Small to medium applications)μ—μ„œλŠ” μ‹œμž‘ν•˜κΈ° 쉽고 직관적인 μž₯점이 μžˆμŠ΅λ‹ˆλ‹€ [1-3]. -* **ν™•μž₯μ„± 및 μœ μ§€λ³΄μˆ˜μ˜ ν•œκ³„:** - ν”„λ‘œμ νŠΈμ˜ 규λͺ¨κ°€ ν™•μž₯됨에 따라 μ—¬λŸ¬ 가지 ꡬ쑰적 결함이 λ°œμƒν•©λ‹ˆλ‹€. - * 단일 κΈ°λŠ₯(Logical feature)에 κ΄€λ ¨λœ νŒŒμΌλ“€μ΄ ν”„λ‘œμ νŠΈ 디렉토리 전체에 νŒŒνŽΈν™”λ˜μ–΄ λΆ„μ‚°λ©λ‹ˆλ‹€ [1, 2]. - * λΉ„μ¦ˆλ‹ˆμŠ€ 둜직이 μͺΌκ°œμ Έ μžˆμ–΄, ν•˜λ‚˜μ˜ κΈ°λŠ₯을 λ¦¬νŒ©ν„°λ§ν•˜κ±°λ‚˜ μˆ˜μ •ν•  λ•Œ 관련이 μ—†λŠ” μˆ˜λ§Žμ€ 폴더와 νŒŒμΌλ“€μ„ νƒμƒ‰ν•˜κ³  μˆ˜μ •ν•΄μ•Ό ν•˜λ―€λ‘œ 개발자의 인지 λΆ€ν•˜(Cognitive load)κ°€ μ¦κ°€ν•©λ‹ˆλ‹€ [1, 2]. - * κΈ°μ‘΄ λ°±μ—”λ“œ 쀑심적인 ꡬ쑰λ₯Ό ν”„λ‘ νŠΈμ—”λ“œμ— κ°•μ œν•˜λŠ” κ²½ν–₯이 μžˆμ–΄, React와 같이 λͺ¨λ˜ν•œ μ»΄ν¬λ„ŒνŠΈ 기반 라이브러리의 본질과 μ™„λ²½ν•˜κ²Œ λΆ€ν•©ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€ [4]. -* **ν˜„λŒ€μ  λŒ€μ•ˆμœΌλ‘œμ˜ μ „ν™˜:** - μ΄λŸ¬ν•œ ν™•μž₯μ„±(Scalability) 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄, 2025λ…„ ν”„λ‘ νŠΈμ—”λ“œ μƒνƒœκ³„μ—μ„œλŠ” 기술적 파일 μœ ν˜•μ΄ μ•„λ‹Œ λΉ„μ¦ˆλ‹ˆμŠ€ κΈ°λŠ₯ 자체λ₯Ό μ€‘μ‹¬μœΌλ‘œ μ½”λ“œλ₯Ό κ·Έλ£Ήν™”ν•˜λŠ” κΈ°λŠ₯ 기반 폴더 ꡬ쑰(Feature-Based Organization) λ˜λŠ” Feature-Sliced Design(FSD) νŒ¨λŸ¬λ‹€μž„μœΌλ‘œ μ „ν™˜ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€ [5, 6]. - -## πŸ”— Knowledge Connections -- **Related Topics:** [[MVC/MVP/MVVM]], [[Feature-Sliced Design]], [[Feature-Based Organization]], [[React Folder Structure]] -- **Projects/Contexts:** [[λŒ€κ·œλͺ¨ React μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μ•„ν‚€ν…μ²˜ 섀계]], [[ν”„λ‘ νŠΈμ—”λ“œ 폴더 ꡬ쑰 λ¦¬νŒ©ν„°λ§ 및 ν™•μž₯μ„± 확보]] -- **Contradictions/Notes:** Layered ArchitectureλŠ” 초기 λ„μž… μ‹œ 기술적인 λͺ…확성을 μ œκ³΅ν•˜μ—¬ μœ μš©ν•΄ 보일 수 μžˆμ§€λ§Œ, React와 같은 μ»΄ν¬λ„ŒνŠΈ 기반 UI κ°œλ°œμ—μ„œλŠ” μž₯기적인 κΈ°λŠ₯ ν™•μž₯μ„±(Feature scalability)을 μ €ν•΄ν•˜λ―€λ‘œ Feature-Sliced Design 같은 ν˜„λŒ€μ μΈ κΈ°λŠ₯ 쀑심 μ•„ν‚€ν…μ²˜κ°€ 더 λ‚˜μ€ λŒ€μ•ˆμœΌλ‘œ 평가받고 μžˆμŠ΅λ‹ˆλ‹€ [4, 7]. - ---- -*Last updated: 2026-04-26* \ No newline at end of file diff --git a/10_Wiki/Topics/AI/Layered-Architecture-in-Frontend.md b/10_Wiki/Topics/AI/Layered-Architecture-in-Frontend.md new file mode 100644 index 00000000..7a4735fe --- /dev/null +++ b/10_Wiki/Topics/AI/Layered-Architecture-in-Frontend.md @@ -0,0 +1,30 @@ +--- +id: ARCH-LAYERED-001 +category: "[[10_Wiki/πŸ’‘ Topics/AI]]" +confidence_score: 1.0 +tags: [architecture, layered-architecture, mvc, mvvm, separation-of-concerns, react, scalability] +last_reinforced: 2026-04-26 +--- + +# [[Layered Architecture in Frontend (ν”„λŸ°νŠΈμ—”λ“œ κ³„μΈ΅ν˜• μ•„ν‚€ν…μ²˜)]] + +## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) +> "기술적 μ—­ν• (Components, Hooks, Services)에 따라 μ˜ν† λ₯Ό λ‚˜λˆ„λŠ” 방식은 μ΄ˆκΈ°μ— μ§κ΄€μ μ΄λ‚˜, ν”„λ‘œμ νŠΈκ°€ λΉ„λŒ€ν•΄μ§ˆμˆ˜λ‘ ν•˜λ‚˜μ˜ κΈ°λŠ₯을 μˆ˜μ •ν•˜κΈ° μœ„ν•΄ μ „ λŒ€λ₯™μ„ νš‘λ‹¨ν•΄μ•Ό ν•˜λŠ” λΉ„νš¨μœ¨μ„ μ΄ˆλž˜ν•œλ‹€" β€” μ†Œκ·œλͺ¨ μ•±μ˜ μ •μ„μ΄μž λŒ€κ·œλͺ¨ μ•±μ˜ 병λͺ©μ΄ λ˜λŠ” 전톡적 μ•„ν‚€ν…μ²˜. + +## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) +- **μΆ”μΆœλœ νŒ¨ν„΄:** "Technical Role-Based Partitioning" β€” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ 데이터(Model), λΉ„μ¦ˆλ‹ˆμŠ€ 둜직(Controller/Services), ν”„λ ˆμ  ν…Œμ΄μ…˜(View)κ³Ό 같은 기술적 관심사에 따라 μˆ˜ν‰μ μœΌλ‘œ κ³„μΈ΅ν™”ν•˜λŠ” νŒ¨ν„΄. +- **ꡬ쑰적 νŠΉμ§•:** + - **Type-Based Folder Structure:** `components/`, `hooks/`, `services/`, `store/`와 같이 파일의 μœ ν˜•λ³„λ‘œ 폴더λ₯Ό ꡬ성. + - **Top-Down Dependency:** μƒμœ„ 계측(UI)이 ν•˜μœ„ 계측(Services/Data)에 μ˜μ‘΄ν•˜λŠ” ꡬ쑰. +- **μž₯단점:** + - **μž₯점:** 초기 섀정이 맀우 직관적이며, μ†Œκ·œλͺ¨ ν”„λ‘œν† νƒ€μž… 개발 μ‹œ λΉ λ₯Έ 속도 보μž₯. + - **단점:** κΈ°λŠ₯(Feature)이 λΉ„λŒ€ν•΄μ§ˆμˆ˜λ‘ κ΄€λ ¨ μ½”λ“œλ“€μ΄ ν”„λ‘œμ νŠΈ 전체에 νŒŒνŽΈν™”λ˜μ–΄ 인지적 λΆ€ν•˜(Cognitive Load)κ°€ κΈ‰κ²©νžˆ μƒμŠΉν•¨. +- **의의:** 전톡적인 λ°±μ—”λ“œ 섀계 철학을 ν”„λŸ°νŠΈμ—”λ“œμ— μ΄μ‹ν•œ ν˜•νƒœλ‘œ, ν˜„λŒ€μ˜ κΈ°λŠ₯ 쀑심(Feature-Based) μ•„ν‚€ν…μ²˜λ‘œ μ§„ν™”ν•˜κΈ° μœ„ν•œ 징검닀리 역할을 함. + +## ⚠️ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & RL Update) +- **κ³Όκ±° λ°μ΄ν„°μ™€μ˜ 좩돌:** κ³Όκ±°μ—λŠ” MVC/MVVM 기반의 계측 뢄리가 μ΅œμ„ μ±…μ΄μ—ˆμœΌλ‚˜, ν˜„λŒ€ 정책은 μ»΄ν¬λ„ŒνŠΈ μ€‘μ‹¬μ˜ 'κΈ°λŠ₯ 기반 섀계(FSD) μ •μ±…'을 λŒ€κ·œλͺ¨ μ•±μ˜ ν‘œμ€€μœΌλ‘œ μ„ ν˜Έν•¨. +- **μ •μ±… λ³€ν™”:** Antigravity ν”„λ‘œμ νŠΈλŠ” λ‹¨μˆœ CRUD μ€‘μ‹¬μ˜ μ†Œκ·œλͺ¨ νŽ˜μ΄μ§€μ—λ§Œ κ³„μΈ΅ν˜• ꡬ쑰λ₯Ό ν—ˆμš©ν•˜λ©°, λ³΅μž‘ν•œ λΉ„μ¦ˆλ‹ˆμŠ€ 둜직이 ν¬ν•¨λœ 도메인은 λ°˜λ“œμ‹œ κΈ°λŠ₯별 λͺ¨λ“ˆν™”(Feature-Sliced Design) 정책을 λ”°λ₯΄λ„둝 함. + +## πŸ”— 지식 μ—°κ²° (Graph) +- [[Feature-Sliced-Design-FSD]], [[Modern-React-Application-Architecture-Patterns]], [[Frontend-Architecture-and-Folder-Structure]], [[Clean-Architecture-Implementation]] +- **Raw Source:** [[00_Raw/Layered Architecture.md]]