---
id: wiki-2026-0508-오픈소스-컴포넌트-open-source-components
title: 오픈소스 컴포넌트 (Open Source Components)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [OSS Components, 오픈소스 라이브러리, Third-party Components]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [oss, components, supply-chain, security, frontend]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: TypeScript
  framework: React/Node
---

# 오픈소스 컴포넌트 (Open Source Components)

## 매 한 줄
> **"매 application 의 70-90% 매 OSS dependency 의 의 — 매 transitive supply chain 의 risk 의 surface 의."**. 매 modern 의 frontend stack 의 React/Vue + UI library (shadcn/ui, Radix, MUI) + utility (date-fns, zod) + build tool 의 의 의 의 의. 매 2026 의 의 SBOM (Software Bill of Materials) + provenance attestation (SLSA Level 3+) 의 의 의 production 의 의 의.

## 매 핵심

### 매 OSS 의 layer
- **UI primitive**: Radix UI, Headless UI — accessibility-first, unstyled.
- **UI library**: shadcn/ui (copy-paste), MUI, Mantine, Chakra — styled out of box.
- **Utility**: date-fns, zod (schema), clsx, lodash-es.
- **State**: Zustand, TanStack Query, Jotai, Redux Toolkit.
- **Build**: Vite, Turbopack, esbuild, swc.

### 매 supply chain risk
- **Typosquatting**: `react-domm` vs `react-dom` — npm install 의 의 malicious code 의 inject 의.
- **Dependency confusion**: 의 internal package name 의 public registry 의 의 의 hijack.
- **Compromised maintainer**: event-stream (2018), ua-parser-js (2021), xz-utils (2024) — legit package 의 의 backdoor 의 inject 의 case.
- **Transitive depth**: 매 single `npm install next` 의 의 600+ transitive dep 의 의 의.

### 매 응용
1. SBOM 생성 (CycloneDX / SPDX) — 매 release 의 attach.
2. License compliance — GPL contamination 의 의 commercial product 의 의 risk.
3. Vulnerability scanning — Dependabot, Snyk, Socket.dev (behavior-based).

## 💻 패턴

### shadcn/ui 의 install (copy-paste model)
```bash
# 매 npm package 의 의 — source code 의 의 project 의 copy
pnpm dlx shadcn@latest init
pnpm dlx shadcn@latest add button dialog form
# → src/components/ui/button.tsx 의 의 의 의 — 의 own.
```

### Radix primitive composition
```tsx
import * as Dialog from '@radix-ui/react-dialog';

export function ConfirmDialog({ children, onConfirm }: Props) {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>{children}</Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50" />
        <Dialog.Content className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6">
          <Dialog.Title>Confirm</Dialog.Title>
          <button onClick={onConfirm}>Yes</button>
          <Dialog.Close>Cancel</Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}
```

### Zod schema validation
```ts
import { z } from 'zod';

const UserSchema = z.object({
  email: z.string().email(),
  age: z.number().int().min(13).max(120),
  role: z.enum(['admin', 'user', 'guest']),
});
type User = z.infer<typeof UserSchema>;

// API boundary 의 의
export async function createUser(input: unknown): Promise<User> {
  const parsed = UserSchema.parse(input); // throws on invalid
  return db.user.create({ data: parsed });
}
```

### SBOM 생성 (CycloneDX)
```bash
# 매 npm project 의 의 SBOM 의 의
npx @cyclonedx/cyclonedx-npm --output-file sbom.json

# 매 Docker image 의 의 SBOM
syft packages docker:myapp:latest -o cyclonedx-json > sbom.json

# 매 SLSA provenance 의 의 GitHub Action 의 의 의
# .github/workflows/release.yml 의 slsa-framework/slsa-github-generator 의 의
```

### Socket.dev install-time check
```bash
# 매 install 의 의 behavior-based scan
npx @socketsecurity/cli npm install <package>
# → install scripts, network access, file system 의 access 의 의 detect.
```

### License audit
```bash
npx license-checker --production --summary
# → MIT: 245, ISC: 30, Apache-2.0: 15, GPL-3.0: 1 ⚠️
```

### Renovate config
```json
{
  "extends": ["config:recommended"],
  "vulnerabilityAlerts": { "enabled": true, "labels": ["security"] },
  "packageRules": [
    { "matchUpdateTypes": ["patch"], "automerge": true },
    { "matchPackagePatterns": ["^@types/"], "automerge": true }
  ]
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Design system 구축 | shadcn/ui (copy-paste, full control) |
| Enterprise app, accessibility 의 critical | Radix + Tailwind 의 own design |
| Rapid prototype | MUI / Mantine (styled OOTB) |
| Schema validation | zod (TS-native) |
| Date math | date-fns / Temporal API (의 native) |
| Supply chain audit | Socket.dev + Renovate + SBOM |

**기본값**: shadcn/ui + Radix + zod + Renovate + CycloneDX SBOM.

## 🔗 Graph
- 부모: [[Frontend_Architecture]]
- 변형: [[Headless_UI]] · [[Component_Library]]
- 응용: [[Design_System]]
- Adjacent: [[SBOM]] · [[SLSA]] · [[Dependabot]]

## 🤖 LLM 활용
**언제**: package selection (의 maintained / popular / license-clean), boilerplate (zod schema, Radix composition).
**언제 X**: novel security audit (LLM 의 zero-day pattern 의 의 — 의 Snyk/Socket 의 의), license compliance ruling (legal review 의 의).

## ❌ 안티패턴
- **Untyped JS dependency**: 매 `@types/*` 의 의 missing — runtime 의 의 의 의.
- **Wildcard version (`^` 의 의 의 `*`)**: 매 reproducible build 의 의 — pnpm lock 의 의 의 의.
- **Vendoring 의 abuse**: 매 transitive 의 의 update path 의 의 — fork 만 의 의 의.
- **License blindness**: AGPL 의 의 closed-source SaaS 의 의 license violation.
- **No SBOM**: incident response 의 의 의 의 affected version 의 의 의 의 의.

## 🧪 검증 / 중복
- Verified (npm registry, CycloneDX spec, SLSA framework, OWASP Dependency-Check).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — OSS components + supply chain security 의 의 |