Preact

소개

preact
Preact는 기업이 아닌 개인이 시작하여 커뮤니티 중심으로 성장한 순수 오픈소스 프로젝트입니다.
주체: 캐나다의 개발자 제이슨 밀러(Jason Miller)가 2015년에 처음 만들었으며, 현재는 전 세계 독립 개발자들이 자발적으로 참여하는 커뮤니티(Preact Core Team)에 의해 유지보수되고 있습니다.
특징: 특정 거대 기업의 비즈니스 목적에 종속되지 않습니다. Open Collective 등의 후원금과 기부를 통해 독립적으로 운영됩니다.
방향성: 메타가 React를 점점 더 무겁고 복잡하게 만들자, 이에 반발하여 “웹 표준에 가까운, 오직 가볍고 빠른 핵심 기능만 제공하자”라는 철학을 유지하며 발전하고 있습니다.

설치

bun add preact

설정

tsconfig.json 수정

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact"
  }
}

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sixtick</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/dist/index.js"></script>
    <div>hello</div>
</body>
</html>

index.tsx

import { render } from 'preact';
import { useState } from 'preact/hooks';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>Bun + Preact 프로젝트</h1>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

// 브라우저 환경에 렌더링 (HTML에 id가 'app'인 엘리먼트가 있다고 가정)
const appElement = document.getElementById('app');
if (appElement) {
  render(<App />, appElement);
}

페이지 서빙

tsx 를 js로 변환해야한다. 서버에 빌드 코드를 삽입하던지 수동으로 bun build ./src/page/index.tsx --outdir ./dist --minify 빌드 해줘야 한다.

// serve 에 적용 코드
import { join } from "path";

const IS_DEV = process.env.NODE_ENV !== "production";
const CLIENT_ENTRY = join(process.cwd(), "src/page/index.tsx");
const DIST_DIR = join(process.cwd(), "dist");

// [핵심] 서버 구동 시 처음에 딱 한 번만 미리 빌드해 둠
async function buildClient() {
  await Bun.build({
    entrypoints: [CLIENT_ENTRY],
    outdir: DIST_DIR,
    minify: !IS_DEV, // 프로덕션 환경에서만 압축
  });
  console.log("📦 클라이언트 빌드 완료!");
}

await buildClient();

// 나머지 serve 코드