Files

T

koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)

이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

2026-06-08 12:24:15 +09:00

6.7 KiB

Raw Blame History

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

title

Feature-Driven Architecture

매 한 줄

"매 layer-by-type 의 feature-by-vertical-slice 의 invert". Feature-Driven Architecture 매 codebase 의 organization unit 매 feature/use-case — 매 each feature 매 own UI + state + API + tests 의 own. Frontend 매 FSD (Feature-Sliced Design), Backend 매 vertical slice / modular monolith 의 manifest.

매 핵심

매 Why

Layer-by-type problem: 매 controllers/, services/, models/ 매 small project 의 fine, 매 100+ features 시 매 cross-cutting changes 의 5 directories 의 touch.
Feature 의 lifecycle: 매 feature 의 add/remove/own 의 single folder 의 happen.
Team scaling: 매 vertical squad 의 own 매 single feature folder, 매 conflicts 의 minimize.

매 FSD layers (frontend)

app/ — global setup, routing, providers.
pages/ — route compositions.
widgets/ — composite UI blocks.
features/ — user actions (login, addToCart).
entities/ — business objects (User, Product).
shared/ — UI kit, utils, API client.

매 import rule: 매 upper layer → lower layer only.

매 응용

Next.js / Remix apps with FSD.
Modular monolith — Java/.NET vertical slices.
Mobile (RN/Flutter) feature modules.
Microfrontend per-feature deployment.

💻 패턴

FSD folder layout

src/
├── app/                  # providers, router, global styles
├── pages/
│   └── checkout/
│       └── ui/Checkout.tsx
├── widgets/
│   └── header/ui/Header.tsx
├── features/
│   ├── auth-login/
│   │   ├── ui/LoginForm.tsx
│   │   ├── model/store.ts
│   │   ├── api/login.ts
│   │   └── index.ts        # public api
│   └── cart-add-item/
├── entities/
│   ├── user/{ui, model, api}/
│   └── product/{ui, model, api}/
└── shared/
    ├── ui/Button.tsx
    └── api/baseQuery.ts

Public API (index.ts barrel)

// features/auth-login/index.ts
export { LoginForm } from './ui/LoginForm';
export { useLoginMutation } from './api/login';
// 매 internal model/store 의 not exported — encapsulation

ESLint 의 enforce layer rules

// .eslintrc — eslint-plugin-boundaries
module.exports = {
  plugins: ['boundaries'],
  settings: {
    'boundaries/elements': [
      { type: 'app', pattern: 'src/app/*' },
      { type: 'pages', pattern: 'src/pages/*' },
      { type: 'features', pattern: 'src/features/*' },
      { type: 'entities', pattern: 'src/entities/*' },
      { type: 'shared', pattern: 'src/shared/*' },
    ],
  },
  rules: {
    'boundaries/element-types': ['error', {
      default: 'disallow',
      rules: [
        { from: 'pages', allow: ['features', 'entities', 'shared'] },
        { from: 'features', allow: ['entities', 'shared'] },
        { from: 'entities', allow: ['shared'] },
      ],
    }],
  },
};

Vertical slice (.NET / Node)

// features/place-order/handler.ts
export class PlaceOrderCommand {
  constructor(public userId: string, public items: Item[]) {}
}

export async function placeOrder(cmd: PlaceOrderCommand, deps: Deps) {
  const user = await deps.users.findById(cmd.userId);
  if (!user) throw new NotFoundError();
  const order = Order.create(user, cmd.items);
  await deps.orders.save(order);
  await deps.bus.emit('order.placed', { orderId: order.id });
  return { orderId: order.id };
}

// features/place-order/route.ts
router.post('/orders', async (req, res) => {
  const result = await placeOrder(req.body, deps);
  res.json(result);
});
// 매 single folder 매 use-case 의 entire handle

Cross-feature communication via events

// features/cart-checkout — 매 features/inventory-update 의 NOT 매 import
// 매 instead: emit event, 매 inventory feature 의 subscribe
import { bus } from '@/shared/event-bus';

async function checkout(cart: Cart) {
  await bus.emit('checkout.completed', { items: cart.items });
}

// features/inventory-update/index.ts
bus.on('checkout.completed', async ({ items }) => {
  await decrementStock(items);
});

Feature flag boundary

// features/new-search-v2/index.ts
import { useFlag } from '@/shared/feature-flags';
import { SearchV1 } from '@/features/search-v1';
import { SearchV2 } from './ui/SearchV2';

export function Search() {
  const v2 = useFlag('search-v2');
  return v2 ? <SearchV2 /> : <SearchV1 />;
}
// Removal 의 single folder delete

매 결정 기준

상황	Approach
Solo / < 10 features	매 layer-by-type 매 fine
Frontend, growing team	매 FSD
Backend, modular monolith	매 vertical slice (CQRS-style)
Microservices	매 service-per-feature 매 already
Strict isolation 의 needed	매 ESLint boundaries + barrel exports

기본값: 매 frontend 매 FSD, 매 backend 매 vertical slice — 매 cross-feature 의 events.

🔗 Graph

부모: Software-Architecture · Modular Monolith
변형: Feature-Sliced-Design · Vertical-Slice-Architecture · Hexagonal Architecture
응용: Micro frontends · CQRS · Bounded Context
Adjacent: Domain-Driven-Design · Clean-Architecture

🤖 LLM 활용

언제: 매 10+ features, 매 multi-team. Frontend 매 page-driven 의 outgrow. Modular monolith 매 service split 의 prepare. 언제 X: 매 small app (<10 screens). 매 prototype phase — 매 over-structure cost > benefit.

❌ 안티패턴

Cross-feature direct import: 매 features/cart 매 features/checkout/internal 의 import — 매 coupling 의 reintroduce. Public API 만 의 use.
God shared/: 매 모든 utility 의 shared/utils/ 의 dump — 매 entities/features 의 leak 의 should.
Premature feature split: 매 single-screen app 의 7 features 의 carve — 매 navigation cost.
Layer skipping: 매 entities 매 features 의 import — 매 dependency rule violation.

🧪 검증 / 중복

Verified (feature-sliced.design official; Jimmy Bogard "Vertical Slice Architecture").
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — FSD layout + ESLint boundaries + vertical slice patterns

6.7 KiB Raw Blame History