@knighted/jsx + @knighted/css 스택 소개: 현대 웹 개발을 위한 표준 기반 유연성

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you already provided) so I can convert it into Korean while preserving the formatting?

데모 앱

스택이 실제로 작동하는 모습을 경험해 보세요: Live demo – morganney/css-jsx-app

1. “네이티브” 철학 – 표준‑우선

• Standards as authoring – 순수 JavaScript, CSS, 그리고 DOM 코드를 작성합니다. MDN을 알고 있다면 이미 충분히 숙련된 것입니다.
• Shadow DOM as default – 모든 컴포넌트가 자동으로 캡슐화되어, 현대적인 Web Components의 진화와 일치합니다.
• Future‑proof – Constructable Stylesheets와 Shadow DOM 같은 기능이 브라우저에 내장되어 있어 장기적인 호환성을 보장합니다.
• Lightweight by design – 무거운 런타임도, 독점 문법도 없습니다 – 이미 사용하고 있는 표준을 가속화하는 도구일 뿐입니다.

2. Oxc 툴체인 (Oxidation Compiler)

@knighted는 빌드 시점에 무거운 작업을 수행하기 위해 Rust 기반 Oxc 툴체인을 사용합니다:

• 즉시 빌드 – Rust 기반 파싱, 스코핑 및 트랜스파일링을 통해 거의 즉시 빌드와 최소화된 출력물을 생성합니다.
• 브리지 아키텍처 – 성능이 중요한 작업(CSS 스코핑, 셀렉터 매핑 등)은 Rust에서 실행된 후, 런타임을 위한 깔끔하고 최적화된 JavaScript로 전달됩니다. WASM 메모리 힙 관리가 필요하지 않습니다.

3. TypeScript 통합 – 안전을 위한 폐쇄 루프

• Virtual JSX 매핑 – TypeScript Language Service Plugin은 태그 템플릿(jsx, reactJsx)을 실제 JSX처럼 취급하여 템플릿 내 자동 완성, 빨간줄 오류, 리팩터링을 제공합니다.
• Shadow‑DOM‑구동 선택자 – 타입‑안전 CSS 선택자는 스코프된 Shadow DOM 스타일에서 직접 파생되어 런타임에 깨진 클래스 참조를 방지합니다.

결과: 간단한 워크플로우로 얻는 뛰어난 자신감, 생산성 및 타입 안전성.

4. 상호 운용성 – 독점적인 사일로 없음

• 전환 가능한 런타임 – 가벼운 DOM 조작/웹 컴포넌트를 위해 jsx를 사용하거나 React 기반 레거시 코드를 위해 reactJsx를 사용합니다.
• 셰임을 통한 SSR – @knighted/jsx/node는 고성능 셰임(e.g., linkedom, jsdom)을 사용하여 서버에서 네이티브 DOM 코드를 바로 실행할 수 있게 합니다. 별도의 커스텀 렌더링 엔진이 필요 없습니다.

5. 스타일링 패러다임 – 유연하고 타입‑안전하며 캡슐화된

@knighted는 CSS Modules, Sass, Less, Vanilla Extract와 함께 작동하며, 필요에 따라 해시된 클래스 이름과 안정적인 클래스 이름을 모두 제공합니다.

• 모든 스타일링을 위한 하나의 로더 – 프로젝트가 발전하거나 레거시 코드를 흡수할 때 패러다임을 전환할 수 있습니다.
• 예측 가능하고 타입‑안전한 선택자 – .js, .ts, 또는 .tsx 파일 내에서 완전한 자동완성 및 오류 검사를 제공합니다.
• 캡슐화 + 유연성 – 스타일이 전역, Shadow DOM, 혹은 어떤 컨텍스트에서도 재작성 없이 동작합니다.

6. Tag‑Based Components & Styles – Browser‑Native Syntax

import { jsx } from '@knighted/jsx/index.js';
import styles from './theme.knighted-css.js';

jsx`
  /* Encapsulated, Predictable Styles */
  <button class="${styles.button}" onClick={() => console.log('tapped')}>
    tap me
  </button>
`;

• Tagged template literals – 간단하고 가독성이 좋으며 DOM 및 React 런타임 모두와 호환됩니다.
• Scoped Shadow DOM styles – 추가 도구 없이도 격리와 재사용성을 달성합니다.

7. Ultra‑Thin Runtime Layers

• Native DOM objects – 실제 Node, DocumentFragment, SVGElement를 출력하여 불필요한 추상화 레이어를 피합니다.
• True Shadow DOM styling – 캡슐화된 컴포넌트 상태를 보장하고 전역 스타일 충돌을 제거하며 전반적인 신뢰성을 향상시킵니다.

8. 지능형 개발 도구

• 템플릿 내 타입 검사 – 템플릿 리터럴의 오류를 컴파일 시점에 잡아냅니다.
• IDE 인텔리전스 – 템플릿 내부에서도 리팩터링, 자동 완성, 정의로 이동이 작동합니다.

Source: …

9. CSS‑in‑JS의 “미스테리 미트” 문제 해결

import styles from './theme.knighted-css.js';

<button class="${styles.button}">Click me</button>

자동으로 타입이 지정된 스타일을 사용하면 런타임 오버헤드 없이 CSS‑in‑JS의 안전성을 얻을 수 있습니다.

@knighted – 2026년의 게임 체인저

네이티브 웹 표준을 가속화하고, 퍼스트‑클래스 Shadow DOM 지원을 제공하며, Rust‑속도 도구를 활용하는 @knighted는 가볍지만 강력한 웹 개발 툴체인을 제공해 현대 프레임워크와 같은 느낌을 주면서도 성능, 타입 안전성, 미래 보장을 희생하지 않습니다.

예측 가능하고 스코프가 제한된 버튼

<button className="scoped-button">Predictable and Scoped Button</button>

주요 장점

• Shadow DOM 선택자가 타입‑안전 – Shadow DOM 클래스 이름에 대한 예측 자동 완성.
• 스타일 캡슐화 – Shadow DOM 격리를 사용해 React와 애플리케이션 다른 부분 사이의 전역 스타일 침범을 방지.
• 컴포넌트 재사용성 극대화 – React 컴포넌트를 전역에서도, Shadow DOM 컨텍스트에서도 사용할 수 있음.
• 빌드 도구 단순화 – .tsx 특수 현상, TypeScript 데코레이터, 복잡한 로더 설정을 우회.

JSX로 컴포넌트를 정의하고 스코프된 스타일을 내보낸 뒤, 결합된 쿼리 임포트를 통해 둘 다 사용하기

components/native_button.js

import { jsx } from '@knighted/jsx/index.js';
import styles from './native_button.knighted-css.js';

export default function Button({ label, onClick }) {
  return jsx`
    <button class="${styles.button}" onClick="${onClick}">
      ${label}
    </button>
  `;
}

컴포넌트와 스타일시트를 사용하기

import Button, {
  knightedCss as buttonCss,
} from './components/native_button.js?knighted-css&combined';

const host = document.createElement('div');
const shadow = host.attachShadow({ mode: 'open' });
const sheet = new CSSStyleSheet();

sheet.replaceSync(buttonCss);
shadow.adoptedStyleSheets = [sheet];

const handleClick = () => console.log('shadow button tapped');

shadow.append(
  Button({ label: 'Shadow‑scoped button', onClick: handleClick })
);
document.body.append(host);

하나의 임포트로 DOM 팩토리(Button) 와 Shadow‑DOM에 바로 사용할 수 있는 스타일시트 문자열(knightedCss)을 모두 얻을 수 있으므로, 컴포넌트를 어디에 마운트하든 스코프된 스타일이 함께 유지됩니다.

최소한의 Webpack 모듈 규칙 설정

export default {
  module: {
    rules: [
      {
        test: /\.[mc]?jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: '@knighted/jsx/loader',
            options: {
              runtime: 'dom', // React JSX 템플릿을 내보낼 때는 'react' 로 전환
              // Docs: https://github.com/knightedcodemonkey/jsx/blob/main/src/loader/README.md
            },
          },
        ],
      },
      {
        resourceQuery: /\?knighted-css(?:&.*)?$/,
        use: [
          {
            loader: '@knighted/css/loader',
            options: {
              moduleGraph: {
                extensions: ['.ts', '.tsx'], // 선택 사항: 사용자 정의 스크립트 확장자 추가
              },
              // Docs: https://github.com/knightedcodemonkey/css/blob/main/docs/loader.md
            },
          },
        ],
      },
    ],
  },
};

이를 통해 JSX 변환과 Shadow‑DOM‑안전 스타일링을 한 곳에 모아두고, 이후 추가 로더를 도입하더라도 쉽게 확장할 수 있습니다.

@knighted 스택의 차이점

@knighted/jsx + @knighted/css 스택은 속도나 호환성을 희생하지 않으면서 현대 웹 개발 생산성을 원하는 개발자들에게 최고의 선택입니다. 웹의 “골디락스 존”에 위치한 이 스택은 독점적인 사일로와 관리되지 않는 수동 워크플로 모두에 저항하는 고성능 가속기입니다.

2026년을 기대하며

The @knighted 스택은 개발자에게 다음을 가능하게 합니다:

• 예측 가능하고 격리된 스타일링을 위한 진정한 Shadow DOM 캡슐화를 사용하여 빌드합니다.
• 초고속 빌드 시간으로 경량이며 표준을 준수하는 애플리케이션을 배포합니다.
• 완전 이식 가능하고 재사용 가능한 CSS를 위해 타입 안전하고 범위가 지정된 스타일을 제공합니다.
• DOM 우선 워크플로와 React 중심 워크플로 사이를 원활하게 전환합니다.

웹 개발의 미래를 받아들일 준비가 되셨나요?

새 프로젝트 시작하기

npx @knighted/jsx init

• @knighted/css 로더 문서를 확인하세요.
• 더 많은 예시를 위해 데모 앱을 살펴보세요.

문서

• @knighted/jsx 문서
• @knighted/css 문서
• 완전한 작동 예시 – 데모 앱