turbo gen 명령어로 컴포넌트 생성하기

turbo gen 어떻게 사용하는거냐..

 

[폴더 구조]

turbo/generators/
├── templates/          # 실제로 생성될 파일의 "틀"
│   ├── component/
│   │   └── component.tsx.hbs   # 컴포넌트 템플릿
│   └── page/
│       └── page.tsx.hbs        # 페이지 템플릿
└── config.ts           # "어떤 질문 하고, 어디에 파일 만들지" 정의

config.ts : 총괄 설정 

.hbs 파일 : Handlebars 템플릿, {{pascalCase name}} 같은 자리에 나중에 입력값이 들어감.

 

[명령어]

① 컴포넌트 만들기 (packages/ui/src/ 아래에 생성)

pnpm generate:component
# 또는
turbo gen react-component

② 페이지 만들기 (apps/timo-web/app/ 아래에 생성)

turbo gen page

 

[실제 흐름 : 컴포넌트 만들기]

$ pnpm generate:component

? 컴포넌트 이름을 입력하세요 (PascalCase, 예: Button): Button

입력하면 자동으로 packages/ui/src/Button.tsx 생성됨 (우리 프로젝트에서는 위치가 항상 packages/ui/src로 고정해놓음)

interface ButtonProps {
  className?: string;
}

export const Button = ({ className }: ButtonProps) => {
  return <div className={className}></div>;
};

 

[실제 흐름 : 페이지 만들기]

$ turbo gen page

? 라우트 경로를 입력하세요 (예: auth/login, dashboard): auth/login
? 페이지 컴포넌트 이름을 입력하세요 (PascalCase, 예: LoginPage): LoginPage

자동으로 apps/timo-web/app/auth/login/page.tsx 생성됨

export default function LoginPage() {
  return <></>;
}

 

[특징]

• 직접 파일 안 만들어도 됨 — 경로 오타, PascalCase 실수 같은 사소한 실수가 원천 차단됨
• validate 가 있어서 잘못 입력하면 바로 에러 뜨고 재입력 요청함
• 템플릿 수정하고 싶으면 .hbs 파일만 고치면 이후 생성되는 파일에 전부 반영됨