<div id="readability-page-1" class="page"><div><article><time>2025-11-28</time>#<a href="https://faultnote.github.io/tags/bun/">bun</a>&nbsp;
#<a href="https://faultnote.github.io/tags/react/">react</a>&nbsp;
#<a href="https://faultnote.github.io/tags/client/">client</a>&nbsp;
#<a href="https://faultnote.github.io/tags/build/">build</a>&nbsp;<div><h2 id="bun으로-jsx-빌드-및-통합-서버-구축하기">Bun으로 JSX 빌드 및 통합 서버 구축하기<a href="#bun으로-jsx-빌드-및-통합-서버-구축하기" arialabel="Anchor">#</a></h2>Bun에는 별도의 설정(Babel, Webpack 등) 없이도 JSX/TSX 파일을 직접 변환할 수 있는 번들러가 내장되어 있습니다. 또한 Bun.serve를 사용하면 정적 파일 서빙과 API 서버를 하나로 통합할 수 있습니다.<ol><li>프로젝트 구조</li></ol><pre tabindex="0"><code>/bun-client-server
[ 608] .
├── [ 192] archive
├── [ ] dist -------- 빌드된 정적 파일이 위치하는 폴더
├── [2.4K] bun.lock
├── [5.5K] CLAUDE.md
├── [ 128] client
│&nbsp;&nbsp; ├── [5.3K] app.tsx
│&nbsp;&nbsp; └── [2.9K] styles.css
├── [ 550] index.ts
├── [ 574] package.json
├── [ 128] public
├── [1.9K] README.md
├── [ 352] server
│&nbsp;&nbsp; ├── [4.9K] app.test.ts
│&nbsp;&nbsp; ├── [2.2K] app.ts
│&nbsp;&nbsp; ├── [4.8K] archive.test.ts
│&nbsp;&nbsp; ├── [6.9K] archive.ts
│&nbsp;&nbsp; ├── [ 712] db.schema.ts
│&nbsp;&nbsp; ├── [ 12K] db.test.ts
│&nbsp;&nbsp; ├── [6.9K] db.ts
│&nbsp;&nbsp; ├── [2.1K] render.tsx
│&nbsp;&nbsp; └── [1.4K] zip.ts
└── [ 830] tsconfig.json
</code></pre><ol start="2"><li>소스 코드</li></ol>사용되는 종속성 패키지는 React와 ReactDOM 뿐이며, Bun이 자체적으로 JSX 변환을 처리합니다.<div><pre tabindex="0"><code data-lang="js">// package.json
"dependencies": {
 "react": "^19.2.0",
 "react-dom": "^19.2.0"
},
"devDependencies": {
 "@types/bun": "latest",
 "@types/react": "^19.2.6",
 "@types/react-dom": "^19.2.3"
},
</code></pre></div><code>/view/index.html</code>진입점 HTML 파일입니다. 스크립트 경로가 /app.js를 가리키는지 확인하세요.<div><pre tabindex="0"><code data-lang="html">&lt;!DOCTYPE html&gt;
&lt;html lang="ko"&gt;
&lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
 &lt;title&gt;Bun JSX &amp; Server App&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id="root"&gt;&lt;/div&gt;
 &lt;!-- Bun이 빌드한 파일을 로드합니다 --&gt;
 &lt;script type="module" src="./app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div><code>/client/app.jsx</code>React 메인 진입점입니다. 서버에서 제공하는 동적 데이터를 가져오는 예시를 추가했습니다.<div><pre tabindex="0"><code data-lang="jsx">import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';

const App = () =&gt; {
 const [count, setCount] = useState(0);
 const [serverMsg, setServerMsg] = useState('데이터 로딩 중...');

 useEffect(() =&gt; {
 // 통합 서버의 동적 API 호출
 const params = new URLSearchParams();
 const currentCursor = cursorRef.current;
 if (currentCursor) params.set('cursor', currentCursor);
 params.set('limit', '50');

 fetch(`/list?${params}`)
 .then(res =&gt; res.json())
 .then(data =&gt; setServerMsg(data.message));
 }, []);

 return (
 &lt;div style={{ fontFamily: 'sans-serif', padding: '20px' }}&gt;
 &lt;h1&gt;Hello from Bun! 🚀&lt;/h1&gt;
 &lt;p&gt;이 JSX는 Bun으로 번들링되었습니다.&lt;/p&gt;
 
 &lt;div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px 0' }}&gt;
 &lt;h3&gt;서버 메시지 (동적):&lt;/h3&gt;
 &lt;p&gt;{serverMsg}&lt;/p&gt;
 &lt;/div&gt;

 &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
 카운트: {count}
 &lt;/button&gt;
 &lt;/div&gt;
 );
};

const root = createRoot(document.getElementById('root'));
root.render(&lt;App /&gt;);
</code></pre></div><ol start="3"><li>프로젝트 빌드</li></ol><div><pre tabindex="0"><code data-lang="ts">// index.ts
// 서버 시작 전 archive 폴더 스캔
await scanArchiveFolder();

// 번들 빌드
await Bun.build({
 entrypoints: ['./client/app.jsx'],
 outdir: './dist',
 minify: true,
 sourcemap: "external",
});

console.log("빌드 완료! ✅");

// 서버 시작
Bun.serve(createApp(port));
</code></pre></div><ol start="4"><li>통합 서버 실행 (app.js)</li></ol>이제 정적 파일(HTML, JS)을 서빙하면서 동시에 API 요청도 처리하는 서버를 만듭니다.<div><pre tabindex="0"><code data-lang="ts">// app.js
const server = Bun.serve({
 port: 3000,
 routes: {
 "/": {
 GET: async () =&gt; {
 // 루트 경로 요청 시 index.html 반환
 return new Response(Bun.file("../view/index.html"), {
 headers: { "Content-Type": "text/html" },
 });
 }

 // 빌드된 JS 파일 및 기타 정적 파일 서빙 (/dist/...)
 if (url.pathname.startsWith("/dist/")) {
 const filePath = "." + url.pathname;
 return new Response(Bun.file(filePath));
 }

 return renderIndexPage();
 },
 },

 "/dist/styles.css": Bun.file("client/styles.css"),
 "/dist/app.js": Bun.file("client/app.tsx"),

 "/.ping": Response.json({ data: "hello world" }),

 },
});
</code></pre></div>Bun의 내장 번들러와 서버 기능을 활용하면, React 클라이언트와 API 서버를 하나의 애플리케이션으로 쉽게 통합할 수 있습니다. vite, Next.js 같은 복잡한 설정 없이도 빠르게 개발을 시작할 수 있습니다.</div></article></div></div>

FaultNote

YoungTaek

Bun으로 JSX 빌드 및 통합 서버 구축하기
Bun에는 별도의 설정(Babel, Webpack 등) 없이도 JSX/TSX 파일을 직접 변환할 수 있는 번들러가 내장되어 있습니다. 또한 Bun.serve를 사용하면 정적 파일 서빙과 API 서버를 하나로 통합할 수 있습니다.

Bun Client Build

댓글