참고: https://www.heropy.dev/p/6iFzkB

1. 프로젝트 생성 명령 실행
2. 아래 설정 전부 자동 적용

1. 위 감지 기준으로 설치 상태 자동 판별
2. 누락된 설정만 식별하여 자동 생성
3. 이미 존재하는 설정 파일은 건드리지 않음

{pm} create vite@latest .

{pm}

은 패키지 매니저 감지 규칙에 따라 결정된 패키지 매니저로 대체한다. (npm, pnpm, yarn, bun)

• Current directory is not empty. Please choose how to proceed: Ignore files and continue (디렉토리에

  .claude/

  등 스킬 관련 파일이 있는 경우 표시됨)
• Select a framework: React
• Select a variant: TypeScript + React Compiler
• Use rolldown-vite (Experimental)?: No
• Install with npm and start now? Yes

@tanstack/react-query

package.json

1. 패키지 설치:
   bash

   {pm} install @tanstack/react-query
   {pm} install -D @tanstack/eslint-plugin-query

2. ESLint Flat Config(

   eslint.config.js

   )에 TanStack Query 플러그인 추가 (6단계 참조)

3. src/App.tsx

   에서 QueryClientProvider 래핑:
   tsx

   import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
   
   const queryClient = new QueryClient()
   
   export default function App() {
     return (
       <QueryClientProvider client={queryClient}>
         {/* 기존 컴포넌트 */}
       </QueryClientProvider>
     )
   }

참고: https://www.heropy.dev/p/9tesDt

react-router

package.json

1. 패키지 설치:
   bash

   {pm} install react-router

2. src/routes/index.tsx

   생성:
   tsx

   import { createBrowserRouter, RouterProvider } from 'react-router'
   import Home from './pages/Home'
   import About from './pages/About'
   
   const router = createBrowserRouter([
     {
       path: '/',
       element: <Home />
     },
     {
       path: '/about',
       element: <About />
     }
   ])
   
   export default function Router() {
     return <RouterProvider router={router} />
   }

3. src/routes/pages/Home.tsx

   생성:
   tsx

   export default function Home() {
     return <h1>Home</h1>
   }

4. src/routes/pages/About.tsx

   생성:
   tsx

   export default function About() {
     return <h1>About</h1>
   }

5. src/main.tsx

   에서

   Router

   를 사용하도록 수정:
   tsx

   import { createRoot } from 'react-dom/client'
   import Router from './routes'
   
   createRoot(document.getElementById('root')!).render(<Router />)

참고: https://www.heropy.dev/p/n74Tgc

zustand

package.json

1. 패키지 설치:
   bash

   {pm} install zustand

2. src/store/example.ts

   생성:
   ts

   import { create } from 'zustand'
   
   interface ExampleStore {
     count: number
     increase: () => void
     decrease: () => void
   }
   
   export const useExampleStore = create<ExampleStore>(set => ({
     count: 0,
     increase: () => set(state => ({ count: state.count + 1 })),
     decrease: () => set(state => ({ count: state.count - 1 }))
   }))

• 이미 존재하는 설정 파일은 덮어쓰지 않는다
• 기존 프로젝트 보완 모드에서는 질문 없이 자동으로 진행한다
• 패키지 매니저는 기존 프로젝트의 lock 파일로 판별한다:

  • pnpm-lock.yaml

    →

    pnpm

  • yarn.lock

    →

    yarn

  • bun.lockb

    또는

    bun.lock

    →

    bun

  • package-lock.json

    또는 lock 파일 없음 →

    npm

• 빈 디렉토리(스캐폴딩 모드)에서는

  npm

  을 사용한다