2nd/10_Wiki/Topic_Programming/AI_and_ML/오픈소스 컴포넌트 (Open Source Components).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-오픈소스-컴포넌트-open-source-components	오픈소스 컴포넌트 (Open Source Components)	10_Wiki/Topics	verified	self	OSS Components 오픈소스 라이브러리 Third-party Components	none	A	0.9	applied	oss components supply-chain security frontend		2026-05-10	pending	language framework TypeScript 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)

# 매 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

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

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)

# 매 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

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

License audit

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

Renovate config

{
  "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 의 의