2nd/10_Wiki/Topics/Architecture/MVC (Model-View-Controller).md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-mvc-model-view-controller	MVC (Model-View-Controller)	10_Wiki/Topics	verified	self	MVC Model-View-Controller Pattern	none	A	0.9	applied	architecture-pattern ui-architecture separation-of-concerns		2026-05-10	pending	language framework typescript rails

MVC (Model-View-Controller)

매 한 줄

"매 UI architecture 의 1979 ancestor". Trygve Reenskaug 의 Smalltalk-80 — Model (data/logic), View (presentation), Controller (input mediation) 의 separation of concerns. 2026 에서 pure MVC 는 server-side framework (Rails, Django, Laravel, ASP.NET) 의 mainstay 이지만 frontend 는 매 MVVM (Vue), Flux/Redux (React), Component-driven (Svelte/Solid) 으로 evolve.

매 핵심

매 3 components

• Model: domain data + business logic. Persistence, validation, invariants.
• View: rendering. 매 read-only view 의 model state.
• Controller: user input 의 handler. Model mutation + view selection.

매 information flow (classic Smalltalk)

1. User → Controller (input event).
2. Controller → Model (update).
3. Model → View (notify, observer pattern).
4. View → renders updated state.

매 modern variants

• MVP (Model-View-Presenter): View 의 passivity 강화, presenter 가 view 를 directly drive.
• MVVM (Model-View-ViewModel): ViewModel 의 binding 으로 View 의 declarative connect (Vue, Knockout, WPF).
• Flux/Redux: unidirectional flow — Action → Store → View.
• Component-driven: 매 unit 이 self-contained (React, Svelte) — MVC boundary 의 dissolve.

매 응용

1. Server-side web frameworks (Rails, Django, Laravel, Spring MVC).
2. Native UI (UIKit MVC pattern, Android Activity-based).
3. Game engine UI layer.
4. Form-heavy admin dashboard.

💻 패턴

1. Rails MVC (canonical server-side)

# app/models/article.rb
class Article < ApplicationRecord
  validates :title, presence: true
  scope :published, -> { where(published: true) }
end

# app/controllers/articles_controller.rb
class ArticlesController < ApplicationController
  def index
    @articles = Article.published.order(created_at: :desc)
  end

  def create
    @article = Article.new(article_params)
    if @article.save
      redirect_to @article
    else
      render :new, status: :unprocessable_entity
    end
  end

  private
  def article_params
    params.require(:article).permit(:title, :body)
  end
end

# app/views/articles/index.html.erb
<% @articles.each  do |a| %>
  <h2><%= a.title %></h2>
<% end  %>

2. Express + MVC (Node.js)

// models/User.ts
export class User {
  static async findById(id: string) {
    return db.user.findUnique({ where: { id } });
  }
}

// controllers/userController.ts
export async function showUser(req: Request, res: Response) {
  const user = await User.findById(req.params.id);
  if (!user) return res.status(404).render("404");
  res.render("user/show", { user });
}

// views/user/show.ejs
<h1><%= user.name %></h1>

3. Spring MVC (Java)

@Controller
@RequestMapping("/articles")
public class ArticleController {
  @Autowired ArticleService service;

  @GetMapping("/{id}")
  public String show(@PathVariable Long id, Model model) {
    Article a = service.findById(id);
    model.addAttribute("article", a);
    return "articles/show";  // resolves to articles/show.html
  }
}

4. Smalltalk-style observer (classic)

class Model {
  private observers: Array<() => void> = [];
  private _value = 0;

  get value() { return this._value; }
  set value(v: number) {
    this._value = v;
    this.observers.forEach(fn => fn());
  }

  subscribe(fn: () => void) { this.observers.push(fn); }
}

class View {
  constructor(private model: Model, private el: HTMLElement) {
    model.subscribe(() => this.render());
    this.render();
  }
  render() { this.el.textContent = String(this.model.value); }
}

class Controller {
  constructor(private model: Model, button: HTMLButtonElement) {
    button.addEventListener("click", () => { this.model.value += 1; });
  }
}

5. MVVM (Vue 3, modern equivalent)

<script setup lang="ts">
import { ref, computed } from "vue";

// ViewModel
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
</script>

<template>
  <!-- View: declarative binding -->
  <button @click="increment">{{ count }} (x2 = {{ doubled }})</button>
</template>

6. Anti-MVC: God controller smell

// 매 BAD — controller 가 매 business logic + data access + rendering 다 처리
class ArticleController {
  async create(req, res) {
    // validation, db query, email send, audit log, render — 200 lines
  }
}

// 매 GOOD — service layer 분리
class ArticleController {
  async create(req, res) {
    const article = await this.service.publish(req.body, req.user);
    res.render("article/show", { article });
  }
}

매 결정 기준

상황	Approach
Server-rendered web app, CRUD heavy	Classic MVC (Rails, Django, Laravel).
SPA, complex interactive UI	Component-driven (React, Vue, Svelte).
Two-way binding, form-heavy	MVVM (Vue, WPF).
Strict unidirectional, time-travel debug	Flux / Redux.
Native mobile (iOS/Android)	MVVM 또는 MVI (modern preferred over MVC).
Microservice without UI	매 MVC 부적합 — Hexagonal/Clean.

기본값: server-side full-stack 은 매 MVC framework. SPA 는 매 component model + state library.

🔗 Graph

• 부모: UI Architecture Patterns · Separation of Concerns
• 변형: MVP · MVVM · MVI · Flux Redux
• 응용: Ruby on Rails · Django · Spring MVC · ASP.NET MVC
• Adjacent: Hexagonal Architecture · Clean Architecture · Component Driven Development

🤖 LLM 활용

언제: server-side framework choice, legacy MVC refactor, UI architecture comparison. 언제 X: 매 modern SPA architecture (component-driven 이 dominant), microservice 의 service-internal 구조.

❌ 안티패턴

• Fat Controller: 매 business logic 의 controller dump — service layer 로 분리.
• Anemic Model: 매 model 이 data bag, logic 이 service 에. DDD aggregate 로 보강.
• View 의 logic: 매 template 의 conditional/loop 이 매 business decision — model/presenter 로 push.
• Controller-View tight coupling: 매 controller 가 매 specific view path hardcode — view selection abstraction.
• MVC for SPA: 매 React app 에 backend MVC 강제 적용 — component model 이 fit.

🧪 검증 / 중복

• Verified (Reenskaug 1979 memo, Gamma et al. Design Patterns MVC discussion, Rails Guides).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — classic MVC + modern variant comparison + 2026 positioning