Files

T

Antigravity Agent 9148c358d0 docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거

Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.

2026-07-05 00:33:48 +09:00

5.3 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

Styletron

매 한 줄

"매 atomic CSS-in-JS 의 pioneer". Uber 가 만든 styling library — 매 declared style 을 atomic class (.a { color: red }) 로 deduplicate, 매 SSR-friendly. 2026 perspective: 매 historical interest — 현재 의 mainstream 은 zero-runtime (vanilla-extract, Linaria, Panda CSS) 또는 utility (Tailwind v4).

매 핵심

매 idea

매 styled component 의 declared CSS 를 atomic single-property class 로 split.
매 동일 declaration 은 한 class 의 share → 매 small bundle.
Runtime 의 dedupe + SSR 의 style extract.

매 Styletron 의 modern 위치

매 BaseWeb (Uber UI lib) 의 default styling engine.
Production 사용 의 still alive 그러나 매 new project 의 default 가 아님.
매 atomic 의 idea 는 Tailwind / UnoCSS 가 inherit (compile-time).

매 modern alternatives (2026)

vanilla-extract: zero-runtime, type-safe.
Panda CSS: build-time atomic.
Tailwind CSS v4: 매 utility-first mainstream.
CSS Modules + plain CSS: 매 simplest baseline.

매 응용

BaseWeb component library 사용.
Legacy Uber-stack codebase 유지보수.
매 historical case study (atomic CSS 의 origin).

💻 패턴

Setup (React)

import { Provider as StyletronProvider } from "styletron-react";
import { Client as Styletron } from "styletron-engine-atomic";

const engine = new Styletron();

export function App() {
  return (
    <StyletronProvider value={engine}>
      <Page />
    </StyletronProvider>
  );
}

styled component

import { styled } from "styletron-react";

const Button = styled("button", {
  backgroundColor: "blue",
  color: "white",
  padding: "8px 16px",
  borderRadius: "4px",
});

// usage: <Button>Click</Button>

Dynamic prop-based styling

const Button = styled<"button", { $primary?: boolean }>("button", ({ $primary }) => ({
  backgroundColor: $primary ? "blue" : "gray",
  color: "white",
}));

useStyletron hook

import { useStyletron } from "styletron-react";

function Card() {
  const [css] = useStyletron();
  return <div className={css({ padding: "16px", boxShadow: "0 2px 4px rgba(0,0,0,0.1)" })}>Hello</div>;
}

SSR (Next.js)

// pages/_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
import { Server, Sheet } from "styletron-engine-atomic";
import { Provider } from "styletron-react";

export default class MyDoc extends Document {
  static async getInitialProps(ctx) {
    const engine = new Server();
    const initialProps = await Document.getInitialProps({
      ...ctx,
      renderPage: () => ctx.renderPage({
        enhanceApp: (App) => (props) => (
          <Provider value={engine}><App {...props} /></Provider>
        ),
      }),
    });
    return { ...initialProps, stylesheets: engine.getStylesheets() };
  }
  render() {
    return (
      <Html>
        <Head>
          {this.props.stylesheets.map((s, i) => (
            <style className="_styletron_hydrate_" dangerouslySetInnerHTML={{ __html: s.css }} key={i} />
          ))}
        </Head>
        <body><Main /><NextScript /></body>
      </Html>
    );
  }
}

Migration to vanilla-extract (modern)

// styles.css.ts
import { style } from "@vanilla-extract/css";
export const button = style({
  backgroundColor: "blue",
  color: "white",
  padding: "8px 16px",
});
// Component.tsx
import { button } from "./styles.css";
<button className={button}>Click</button>

매 결정 기준

상황	Approach
매 BaseWeb 사용 codebase	Styletron (forced)
매 new project (2026)	Tailwind v4 또는 vanilla-extract
매 type-safe + zero-runtime	vanilla-extract
매 quick prototype	Tailwind
매 library 배포 (no runtime)	Linaria / Panda CSS

기본값: 매 new code 는 Tailwind v4 또는 vanilla-extract. 매 Styletron 신규 채택 의 X.

🔗 Graph

🤖 LLM 활용

언제: BaseWeb codebase 의 maintenance, 매 atomic CSS history 의 understand. 언제 X: 매 greenfield project — modern alternatives 가 superior (zero-runtime, type-safe).

❌ 안티패턴

매 new project 의 Styletron 채택: 매 ecosystem momentum 이 vanilla-extract / Tailwind 로 이동 — 매 future-proof X.
Runtime dedupe overhead: 매 large app 에서 visible — 매 build-time atomic (Panda) 이 우월.
Styletron + Tailwind 동시: 매 conflicting paradigm — pick one.

🧪 검증 / 중복

Verified (styletron.org, GitHub uber/styletron, Uber engineering blog 2017).
신뢰도 A (매 historically), 매 modern adoption 의 declining.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — atomic CSS-in-JS + modern alternatives positioning

5.3 KiB Raw Blame History