feat: new tanstack start app setting

[citron03]

PR Type

Enhancement

---

Description

• 새로운 TanStack Start 앱 및 데모 기능 추가.

• 타입 안전한 Vite Native Worker Comlink 데모 구현.

• 서버 함수, API 라우트 및 SSR 모드 데모 포함.

• 파일 기반 라우팅 및 Tailwind CSS 기반 UI 구성.

---

Diagram Walkthrough

flowchart LR
  A[새 TanStack 앱] --> B{주요 기능};
  B --> C[파일 기반 라우팅];
  B --> D[Vite Native Worker (Comlink)];
  B --> E[서버 함수 & API 라우트];
  B --> F[SSR 데모 (SPA, Data Only, Full)];
  C --> G[Header 컴포넌트];
  C --> H[다양한 데모 라우트];
  E --> I[Todo 예제];
  F --> J[Punk Songs 예제];

Loading

File Walkthrough

	Relevant files
Configuration changes	9 files routeTree.gen.ts TanStack Router 자동 생성 라우트 정의 추가                                                    +240/-0  vite.config.ts TanStack 앱을 위한 Vite 빌드 및 개발 환경 설정 추가                                          +23/-0    router.tsx TanStack Router 인스턴스 생성 및 설정                                                          +15/-0    tsconfig.json TanStack 앱의 TypeScript 컴파일러 설정 추가                                                +28/-0    package.json 루트 `package.json`에 TanStack 앱 관련 스크립트 추가                                  +3/-0      manifest.json 웹 앱 매니페스트 파일 추가                                                                                    +25/-0    .cta.json Create TanStack App 설정 파일 추가                                                          +15/-0    settings.json VS Code 설정에 자동 생성 파일 제외 규칙 추가                                                        +11/-0    robots.txt 검색 엔진 크롤링 규칙을 위한 robots.txt 파일 추가                                                +3/-0
Enhancement	13 files Header.tsx 새로운 TanStack 앱의 전역 헤더 및 탐색 메뉴 구현                                                  +165/-0  comlink.tsx 타입 안전한 Vite Native Worker를 사용한 Comlink 데모 페이지 추가                  +143/-0  index.tsx TanStack Start 앱의 환영 페이지 및 주요 기능 소개 구현                                      +106/-0  start.server-funcs.tsx 서버 함수를 활용한 Todo 목록 관리 데모 추가                                                            +111/-0  start.ssr.index.tsx 다양한 SSR 데모 페이지로 연결되는 인덱스 라우트 추가                                                    +43/-0    start.ssr.spa-mode.tsx 클라이언트 측 데이터 로딩을 보여주는 SPA 모드 SSR 데모 추가                                        +41/-0    start.ssr.data-only.tsx 서버에서 데이터만 프리로드하는 Data Only SSR 데모 추가                                          +37/-0    start.ssr.full-ssr.tsx 전체 페이지를 서버에서 렌더링하는 Full SSR 데모 추가                                                +36/-0    start.api-request.tsx API 라우트에서 데이터를 가져오는 데모 페이지 추가                                                        +44/-0    __root.tsx 전역 헤더 및 개발 도구를 포함하는 루트 라우트 레이아웃 정의                                              +58/-0    worker.ts 타입 안전한 메시지 프로토콜을 사용하는 Vite Native Worker 구현                            +41/-0    demo.punk-songs.ts SSR 데모를 위한 서버 함수로 펑크 송 데이터 제공                                                        +13/-0    api.names.ts 간단한 이름 목록을 반환하는 API 라우트 정의                                                              +10/-0
Styling	1 files styles.css Tailwind CSS를 포함한 기본 전역 스타일 정의                                                      +15/-0
Documentation	1 files README.md 새로운 TanStack 앱에 대한 상세한 시작 가이드 및 기능 설명 추가                                  +290/-0
Dependencies	1 files package.json TanStack 앱의 종속성 및 스크립트 정의                                                                +40/-0
Additional files	3 files offline.html +0/-29    service-worker.js +0/-33    pnpm-lock.yaml +660/-9

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 0bdefac)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review 접근성 개선 사이드바의 'Start - SSR Demos' 섹션 확장/축소 버튼에 aria-expanded 및 aria-controls와 같은 ARIA 속성을 추가하여 스크린 리더 사용자에게 더 나은 접근성을 제공할 수 있습니다. 현재는 시각적으로만 상태 변화를 알 수 있어요! 🧐 <button className="p-2 hover:bg-gray-800 rounded-lg transition-colors" onClick={() => setGroupedExpanded((prev) => ({ ...prev, StartSSRDemo: !prev.StartSSRDemo, })) } > {groupedExpanded.StartSSRDemo ? ( <ChevronDown size={20} /> ) : ( <ChevronRight size={20} /> )} </button> Worker 에러 처리 TypedWorker 클래스 내에서 워커가 에러를 발생시키거나 예기치 않게 종료될 경우, getData()나 heavyComputation()에서 반환된 Promise가 영원히 resolve되지 않거나 reject되지 않을 수 있어요. 워커의 에러 메시지를 처리하고 Promise를 reject하도록 로직을 추가하면 더 견고한 코드가 될 거예요! 🛡️ async getData(): Promise<string> { return new Promise((resolve) => { this.callbacks.set('getData', resolve); const request: WorkerRequest = { type: 'getData' }; this.worker.postMessage(request); }); } async heavyComputation(num: number): Promise<number> { return new Promise((resolve) => { this.callbacks.set('heavyComputation', resolve); const request: WorkerRequest = { type: 'heavyComputation', payload: num }; this.worker.postMessage(request); }); } 데이터 영속성 (데모용) todos.json 파일을 사용하여 데이터를 관리하는 방식은 데모용으로는 아주 훌륭하지만, 실제 프로덕션 환경에서는 데이터 유실이나 동시성 문제 발생 가능성이 있어요. 주석으로 이미 명시되어 있지만, 실제 서비스에서는 적절한 데이터베이스 솔루션(예: PostgreSQL, MongoDB 등)을 사용하는 것이 중요하다고 다시 한번 강조하고 싶어요! 💾 // In a production environment, you should use a proper database. const TODOS_FILE = 'todos.json'; async function readTodos() { return JSON.parse( await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() => JSON.stringify( [ { id: 1, name: 'Get groceries' }, { id: 2, name: 'Buy a new phone' }, ], null, 2, ), ), ); } const getTodos = createServerFn({ method: 'GET', }).handler(async () => await readTodos()); const addTodo = createServerFn({ method: 'POST' }) .inputValidator((d: string) => d) .handler(async ({ data }) => { const todos = await readTodos(); todos.push({ id: todos.length + 1, name: data }); await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2)); return todos; });

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 0bdefac
Explore these optional code suggestions:

Category	Suggestion	Impact
General	페이지 제목 태그를 올바르게 정의합니다 HTML 표준에 따라 페이지 제목은 태그가 아닌 별도의 title 속성으로 정의해야 합니다. 이렇게 하면 브라우저 탭에 올바르게 표시되고 검색 엔진 최적화(SEO)에도 도움이 됩니다. apps/tanstack/src/routes/__root.tsx [11-22] meta: [ { charSet: 'utf-8', }, { name: 'viewport', content: 'width=device-width, initial-scale=1', }, - { - title: 'TanStack Start Starter', - }, ], +title: 'TanStack Start Starter', Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that the page title should be a direct property of the head object, not nested within the meta array, aligning with HTML standards and the @tanstack/react-router API. This improves SEO and ensures proper title rendering.	Medium
	nitro 종속성 버전을 고정합니다 package.json 파일에서 nitro 패키지의 버전이 "latest"로 지정되어 있습니다. 이는 새로운 버전이 출시될 때마다 예기치 않은 변경 사항이나 빌드 실패를 초래할 수 있습니다. 안정성과 재현성을 위해 특정 메이저 버전(예: ^2.x.x)을 지정하는 것이 좋습니다. apps/tanstack/package.json [20] -"nitro": "latest" +"nitro": "^2.x.x" Suggestion importance[1-10]: 7 __ Why: Using "latest" for dependencies like nitro can lead to unstable builds and unexpected breaking changes. Pinning to a specific major version (e.g., ^2.x.x) improves stability and reproducibility, which is a good practice for project maintainability.	Medium

---

Previous suggestions

Suggestions up to commit 9d80343

Category	Suggestion	Impact
Possible issue	고유 ID 생성 방식으로 데이터 무결성 강화 todos.length + 1을 사용하여 ID를 생성하는 방식은 항목이 삭제되거나 동시 요청이 발생할 경우 중복되거나 잘못된 ID를 초래할 수 있습니다. UUID와 같은 고유 ID 생성 전략을 사용하여 데이터 무결성을 보장하는 것이 중요합니다. apps/tanstack/src/routes/demo/start.server-funcs.tsx [43] -todos.push({ id: todos.length + 1, name: data }); +todos.push({ id: crypto.randomUUID(), name: data }); Suggestion importance[1-10]: 9 __ Why: Generating IDs with todos.length + 1 is prone to collisions and incorrect IDs, especially with deletions or concurrent requests. Using crypto.randomUUID() ensures unique identifiers and maintains data integrity.	High
General	모듈 구문 일치로 가져오기 문제 방지 tsconfig.json 파일에서 verbatimModuleSyntax를 false로 설정하면 TypeScript의 모듈 해석과 번들러의 실제 런타임 동작 간에 불일치가 발생하여 미묘한 가져오기 문제가 발생할 수 있습니다. 이를 true로 변경하여 더 엄격하고 예측 가능한 모듈 의미론을 적용하고 TypeScript의 동작을 최신 번들러와 일치시키는 것이 좋습니다. apps/tanstack/tsconfig.json [13] -"verbatimModuleSyntax": false, +"verbatimModuleSyntax": true, Suggestion importance[1-10]: 8 __ Why: Setting verbatimModuleSyntax to true is a best practice in modern TypeScript projects, especially with bundlers, to ensure consistent module semantics and prevent subtle import issues. This improves build reliability.	Medium
	파일 경로를 절대 경로로 지정하여 안정성 확보 서버 환경에서 todos.json 파일의 상대 경로 사용은 예측 불가능한 위치에 파일이 생성되거나 읽히는 문제를 유발할 수 있습니다. 애플리케이션의 루트 경로를 기준으로 하는 절대 경로를 사용하거나 환경 변수를 통해 경로를 구성하여 파일 접근의 견고성을 높이는 것이 좋습니다. apps/tanstack/src/routes/demo/start.server-funcs.tsx [19] -const TODOS_FILE = 'todos.json'; +const TODOS_FILE = process.env.TODOS_FILE_PATH || './todos.json'; Suggestion importance[1-10]: 7 __ Why: Using a relative path like todos.json can lead to unpredictable file locations in a server environment. Configuring the path via an environment variable or an absolute path improves robustness.	Medium
	의존성 버전 고정으로 안정성 확보 package.json 파일에서 nitro 의존성에 "latest" 태그를 사용하는 것은 빌드의 비결정성을 초래하고 예기치 않은 호환성 문제를 일으킬 수 있습니다. 특정 버전을 고정하거나 캐럿(^) 또는 틸드(~)와 같은 더 제한적인 버전 범위를 사용하여 안정성과 재현성을 보장하는 것이 좋습니다. apps/tanstack/package.json [21] -"nitro": "latest", +"nitro": "^2.x.x", // 또는 특정 버전 (예: "2.9.0") Suggestion importance[1-10]: 7 __ Why: Using "latest" for dependencies like nitro can lead to non-deterministic builds and potential compatibility issues. Pinning to a specific version or using a caret range (^) is a good practice for stability and reproducibility.	Medium

[github-actions]

Persistent review updated to latest commit 0bdefac