드디어 내 Product를 출시했어요!!

Source: Dev.to

Cardboard.js is now on Product Hunt

안녕하세요 여러분,

수년간 Cardboard.js를 개발한 뒤, 드디어 Product Hunt에 출시했습니다. 이 프로젝트는 HTML, JSX, 별도의 CSS 파일을 작성하지 않고 작은 인터랙티브 웹 앱을 만들기 위한 방법으로 시작되었습니다 — 순수 JavaScript 혹은 TypeScript만으로 모든 것을 작성하고 Cardboard가 렌더링과 반응성을 담당합니다.

제가 이전에 이 프레임워크 구축에 대해 올린 글들을 따라오셨다면 감사드리고, 그렇지 않다면 간단히 소개하고 사용 감을 보여줄 몇 가지 스니펫을 준비했습니다.

Cardboard.js가 무엇인가요

Cardboard.js는 경량 반응형 UI 라이브러리(~16 KB)로, 단순함과 성능에 초점을 맞추었습니다. 제공하는 기능은 다음과 같습니다:

• HTML 불필요 — JS로 DOM 요소를 생성합니다.
• 내장 상태 관리.
• 반응형 업데이트 (상태가 변하면 UI가 자동으로 업데이트).
• 재사용 가능한 컴포넌트와 CSS‑in‑JS 스타일 지원.

간단한 스니펫

기본 사용법

HTML을 작성하는 대신, 프레임워크를 초기화하고 JavaScript로 UI를 정의합니다:

import { tag, init, allTags } from '@nkeff/cardboard-js';

const { div, p } = allTags;

// Initialize Cardboard (defaults to )
const root = init();

// Append elements
root.append(
  div(
    p('Hello world!')
  )
);

간단한 반응형 카운터

Cardboard는 반응형 상태 프리미티브를 제공하므로 UI가 자동으로 업데이트됩니다:

const Counter = () => {
  const count = state(0);

  return button()
    .text(`Clicked $count times`, { count })
    .addStyle('color', 'gray')
    .stylesIf(count.greaterThan(5), { color: 'red' })
    .clicked(() => count.value++);
};

// Mount it to the body
tag('(body)').append(Counter());

왜 중요한가요

템플릿, 빌드 단계, 많은 보일러플레이트를 다루는 프레임워크를 사용해 본 경험이 있다면, Cardboard는 논리와 UI가 순수 JavaScript 혹은 TypeScript 안에서 함께 살아가는 더 간단한 대안을 제공합니다. 작고 빠르며, 원한다면 HTML, CSS, JSX가 전혀 필요 없습니다.

여러분이 도울 수 있는 방법

이 프로젝트가 유용하거나 흥미롭다고 생각한다면, Product Hunt에서 지원해 주세요. 방문, 업보트, 댓글 하나가 큰 도움이 되며 프로젝트의 가시성을 높여줍니다.

읽어 주셔서 감사합니다 — 직접 사용해 보시고 어떤 것을 만들었는지 알려주시면 정말 기쁩니다.