---
id: [[P-Reinforce]]-AUTO-F36267
category: "10_Wiki/💡 Topics/Design & Experience"
confidence_score: 0.90
tags: [auto-reinforced]
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Continuous Worker - 컴포넌트 기반 웹 프레임워크 아키텍처 설계"
---

# [[컴포넌트 기반 웹 프레임워크 아키텍처 설계]]

## 📌 한 줄 통찰 (The Karpathy Summary)
> 컴포넌트 기반 웹 프레임워크 아키텍처는 특정 기능이나 UI 요소를 구현하기 위해 HTML 구조, CSS 스타일, [[JavaScript]] 동작을 하나의 단위(컴포넌트)로 묶어 다루는 설계 방식입니다 [1]. 과거 기술적 역할 중심의 분리에서 벗어나 기능 중심의 수직적 모듈화를 통해 코드의 재사용성을 높이고 독립적인 개발과 테스트를 가능하게 합니다 [1, 2]. 프로젝트 규모가 커짐에 따라 발생하는 결합도 증가와 컴포넌트 비대화 문제를 해결하기 위해, 현대에는 마이크로 프론트엔드 및 FSD([[Feature-Sliced Design]])와 같은 발전된 아키텍처 방법론과 결합되어 사용됩니다 [3-5].

## 📖 구조화된 지식 (Synthesized Content)
- **웹 패러다임의 변화와 컴포넌트의 등장:** 초기 웹 개발은 HTML(구조), CSS(표현), JS(동작)로 기술적 역할을 나누는 수평적 관심사 분리 방식을 사용했습니다 [6, 7]. 하지만 웹 프레임워크의 발전과 함께 이들을 하나의 기능 단위로 묶는 '컴포넌트' 패러다임이 등장했습니다 [1]. 이는 기존 계층구조를 수직으로 관통하며 기능 중심의 모듈화를 이끌었고, 개발 생산성과 유지보수성을 크게 향상시켰습니다 [2].
- **컴포넌트 아키텍처의 한계와 결합도 문제:** 컴포넌트 구조는 만능이 아니었으며, 대규모 프로젝트에서는 하위 컴포넌트로 데이터를 단순히 전달하기 위해 불필요한 속성(props)을 여러 단계에 걸쳐 통과시켜야 하는 'Props drilling' 문제로 인해 결합도가 높아지는 한계에 직면했습니다 [8]. 또한, 하나의 컴포넌트 안에 데이터 관리, 표현, 비즈니스 로직 등 너무 많은 책임이 집중되어 단일 책임 원칙(SRP)을 위반하는 '컴포넌트 비대화' 현상이 발생했습니다 [4].
- **계층적 관심사의 재도입과 발전:** 컴포넌트의 한계를 극복하기 위해 프론트엔드 아키텍처는 컴포넌트 내부에서 다시 계층적 관심사를 분리하는 방향으로 진화했습니다 [9].
  - **UI 계층 구조화:** [[Atomic Design Pattern]] 등을 도입하여 UI 컴포넌트의 계층을 세밀하게 분리하고 역할을 분명히 했습니다 [10].
  - **단방향 의존성 구축:** [[CSS-in-JS]], [[CSS Modules]] 등을 통해 CSS가 HTML 구조와 JavaScript 논리를 따라가도록 단방향 의존성(데이터 → 화면)을 만들었습니다 [11, 12].
  - **상태 관리 및 비즈니스 로직 분리:** 뷰(화면)와 데이터 로직을 분리하고, 비동기 통신이나 캐싱과 같은 서버 상태 관리를 별도의 계층으로 위임하여 컴포넌트는 화면을 그리고 이벤트를 받는 역할에만 집중하도록 설계했습니다 [12-14].
- **대규모 확장을 위한 FSD와 마이크로 프론트엔드:**
  - **[[Feature-Sliced Design (FSD)]]:** 프로젝트가 거대해지면 전통적인 역할별 폴더 구조(/components, /api 등)만으로는 복잡성을 감당하기 어렵습니다 [5, 15]. FSD 아키텍처는 기능을 기준으로 코드를 분리하여 하나의 기능 단위에 필요한 모든 파일을 같은 폴더에 모아 관리함으로써 모듈 간 결합도를 줄이고 독립성을 높입니다 [5, 16].
  - **마이크로 프론트엔드 (Micro [[Frontend]]s):** 거대한 단일 프론트엔드(Frontend Monolith)를 작고 독립적인 여러 조각으로 나누어 각 개발팀이 기술 스택에 구애받지 않고 자율적으로 개발 및 배포할 수 있게 하는 아키텍처입니다 [3, 17]. 런타임 통합, 웹 컴포넌트, 모듈 페더레이션, 라우트 기반 또는 컴포넌트 기반 합성 등의 방식을 활용해 어플리케이션을 조립합니다 [18, 19].

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- **정책 변화:** Design & Experience 분야의 자동 자산화 수행.

## 🔗 지식 연결 (Graph)
- **Related Topics:** [[관심사의 분리([[Separation of Concerns]])]], 마이크로 프론트엔드(Micro Frontends), Feature-Sliced Design(FSD), [[단일 책임 원칙(SRP)]]
- **Projects/Contexts:** Spotify, Netflix, Amazon의 마이크로 프론트엔드 도입, 대규모 웹 애플리케이션의 폴더 구조 진화
- **Contradictions/Notes:** 컴포넌트 기반 아키텍처는 초기에 관심사 분리의 혁신으로 여겨졌으나, 점차 하나의 컴포넌트에 너무 많은 로직이 집중되며 독립성이 훼손되는 모순이 발생했습니다. 이를 해결하기 위해 기능 단위로 묶인 컴포넌트 내부에서 다시 데이터 로직과 뷰 로직의 역할을 나누는 계층적(Layer) 분리 방식이 재도입되었습니다 [4, 9, 12].

---
*Last updated: 2026-04-18*

---