Files

T

Antigravity Agent 504fd5fb42 [G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00

6.0 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

철벽 수비대 인터페이스 설계 전략

매 한 줄

"매 UI 는 매 적대적 입력 / 네트워크 실패 / 동시 변경 의 환경에서 매 buckle 없이 동작해야 한다". 매 철벽 수비대 (Hardened UI) 는 invalid props, race conditions, 부분 실패, hostile users 를 매 graceful 한 fallback 으로 처리하는 설계 철학. 매 2026 modern stack — React 19 Server Components + Suspense + Error Boundaries — 가 매 native 한 defensive primitives 를 제공.

매 핵심

매 위협 모델

Bad data: API 가 매 schema 위반 (null, missing field, wrong type).
Bad timing: race conditions — 매 stale closure, 매 out-of-order responses.
Bad network: timeouts, partial failures, retries.
Bad users: XSS payloads, paste 공격, 매 keyboard shortcut 남용.
Bad state: 매 corrupted localStorage, 매 stale cache.

매 방어 layer

Schema layer: Zod / Valibot 로 매 runtime validation.
Boundary layer: Error Boundary + Suspense.
Retry layer: TanStack Query / SWR 가 매 exponential backoff.
Sanitization layer: DOMPurify, CSP nonce.
Fallback layer: Skeleton, empty state, error state.

매 응용

Banking / fintech — 매 transactional UI 에서 매 double-submit 방지.
Healthcare records — 매 stale data 보다 매 명시적 error 우선.
Live collaboration — 매 conflict resolution UI.

💻 패턴

Zod schema-first parsing

import { z } from "zod";

const UserSchema = z.object({
  id: z.string().uuid(),
  email: z.string().email(),
  age: z.number().int().min(0).max(150),
});

async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  // 매 parse — 매 invalid data 면 throw, downstream 은 매 typed safe
  return UserSchema.parse(await res.json());
}

Error Boundary + retry

import { ErrorBoundary } from "react-error-boundary";

function UserView() {
  return (
    <ErrorBoundary
      FallbackComponent={({ error, resetErrorBoundary }) => (
        <div role="alert">
          <p>문제 발생: {error.message}</p>
          <button onClick={resetErrorBoundary}>재시도</button>
        </div>
      )}
      onReset={() => queryClient.invalidateQueries(["user"])}
    >
      <Suspense fallback={<UserSkeleton />}>
        <UserDetail />
      </Suspense>
    </ErrorBoundary>
  );
}

Stale closure 방지 (useEffectEvent)

import { useEffectEvent } from "react";

function ChatRoom({ roomId, onMessage }) {
  const handleMessage = useEffectEvent((msg) => {
    onMessage(msg, roomId);
  });

  useEffect(() => {
    const conn = connect(roomId);
    conn.on("message", handleMessage);
    return () => conn.disconnect();
  }, [roomId]); // 매 onMessage 가 매 deps 안 — 매 stale 없음
}

Race-condition-safe fetching

useEffect(() => {
  let cancelled = false;
  fetch(`/api/search?q=${query}`)
    .then(r => r.json())
    .then(data => { if (!cancelled) setResults(data); });
  return () => { cancelled = true; };
}, [query]);

XSS-safe rich text

import DOMPurify from "isomorphic-dompurify";

function RichText({ html }: { html: string }) {
  const clean = DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
  return <div dangerouslySetInnerHTML={{ __html: clean }} />;
}

Optimistic update + rollback

const mutation = useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries(["todos"]);
    const prev = queryClient.getQueryData(["todos"]);
    queryClient.setQueryData(["todos"], (old) =>
      old.map(t => t.id === newTodo.id ? newTodo : t)
    );
    return { prev };
  },
  onError: (_err, _new, ctx) => {
    queryClient.setQueryData(["todos"], ctx.prev); // 매 rollback
  },
  onSettled: () => queryClient.invalidateQueries(["todos"]),
});

Idempotent submit (double-click 방지)

const [pending, startTransition] = useTransition();
const submit = (e) => {
  e.preventDefault();
  if (pending) return;
  startTransition(() => mutation.mutate(formData));
};

매 결정 기준

상황	Approach
External API 응답	Zod validation 필수
Component tree crash 위험	ErrorBoundary 감싸기
Async race	AbortController + cleanup
User-generated HTML	DOMPurify sanitize
Critical mutation (payment)	Idempotency key + disable button

기본값: Zod + ErrorBoundary + TanStack Query + DOMPurify 의 layered defense.

🔗 Graph

부모: Frontend Architecture · Defensive Programming
변형: Error Boundary · Optimistic UI
응용: Form Validation · Live Collaboration UI
Adjacent: CSP · XSS Prevention · Race Condition

🤖 LLM 활용

언제: 매 production-grade UI, 매 finance / healthcare, 매 untrusted user input 처리. 언제 X: 매 internal prototype, 매 trusted data only.

❌ 안티패턴

Trust API blindly: 매 schema 검증 없이 destructuring → runtime crash.
Catch and ignore: try { ... } catch {} — 매 silent failure.
dangerouslySetInnerHTML 직접: 매 sanitize 없이 → XSS.
Stale closure: 매 useEffect deps 누락 → 매 outdated state.

🧪 검증 / 중복

Verified (React 19 docs, OWASP, Kent C. Dodds: "Use react-error-boundary").
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — defensive UI 7 patterns

6.0 KiB Raw Blame History