6.7 KiB

Raw Permalink Blame History

컴포넌트 자동 생성 CLI 가이드

화면 관리 시스템의 컴포넌트를 자동으로 생성하는 CLI 도구 사용법입니다.

사용법

node scripts/create-component.js <컴포넌트이름> <표시이름> <설명> <카테고리> [웹타입]

파라미터

파라미터	필수	설명	예시
컴포넌트이름	✅	kebab-case 형식의 컴포넌트 ID	`text-input`, `date-picker`
표시이름	✅	한글 표시명	`텍스트 입력`, `날짜 선택`
설명	✅	컴포넌트 설명	`텍스트를 입력하는 컴포넌트`
카테고리	✅	컴포넌트 카테고리	`input`, `display`, `action`
웹타입	⭕	기본 웹타입 (기본값: text)	`text`, `number`, `button`

카테고리 옵션

카테고리	설명	아이콘
`input`	입력 컴포넌트	Edit
`display`	표시 컴포넌트	Eye
`action`	액션/버튼 컴포넌트	MousePointer
`layout`	레이아웃 컴포넌트	Layout
`form`	폼 관련 컴포넌트	FormInput
`chart`	차트 컴포넌트	BarChart
`media`	미디어 컴포넌트	Image
`navigation`	네비게이션 컴포넌트	Menu
`feedback`	피드백 컴포넌트	Bell
`utility`	유틸리티 컴포넌트	Settings

웹타입 옵션

웹타입	설명	적용 대상
`text`	텍스트 입력	기본 텍스트 필드
`number`	숫자 입력	숫자 전용 필드
`email`	이메일 입력	이메일 검증 필드
`password`	비밀번호 입력	패스워드 필드
`textarea`	다중행 텍스트	텍스트 영역
`select`	선택박스	드롭다운 선택
`button`	버튼	클릭 액션
`checkbox`	체크박스	불린 값 선택
`radio`	라디오 버튼	단일 선택
`date`	날짜 선택	날짜 피커
`file`	파일 업로드	파일 선택

사용 예시

1. 기본 텍스트 입력 컴포넌트

node scripts/create-component.js text-input "텍스트 입력" "기본 텍스트 입력 컴포넌트" input text

2. 숫자 입력 컴포넌트

node scripts/create-component.js number-input "숫자 입력" "숫자만 입력 가능한 컴포넌트" input number

3. 버튼 컴포넌트

node scripts/create-component.js action-button "액션 버튼" "사용자 액션을 처리하는 버튼" action button

4. 차트 컴포넌트

node scripts/create-component.js bar-chart "막대 차트" "데이터를 막대 그래프로 표시" chart

5. 이미지 표시 컴포넌트

node scripts/create-component.js image-viewer "이미지 뷰어" "이미지를 표시하는 컴포넌트" media

생성되는 파일들

CLI를 실행하면 다음 파일들이 자동으로 생성됩니다:

lib/registry/components/[컴포넌트이름]/
├── index.ts                    # 컴포넌트 정의 및 메타데이터
├── [컴포넌트이름]Component.tsx  # 메인 컴포넌트 파일
├── [컴포넌트이름]Renderer.tsx   # 자동 등록 렌더러
├── [컴포넌트이름]ConfigPanel.tsx # 설정 패널 UI
├── types.ts                    # TypeScript 타입 정의
└── README.md                   # 컴포넌트 문서

자동 처리되는 작업들

✅ 자동 등록

lib/registry/components/index.ts에 import 구문 자동 추가
컴포넌트 레지스트리에 자동 등록
브라우저에서 즉시 사용 가능

✅ 타입 안전성

TypeScript 인터페이스 자동 생성
컴포넌트 설정 타입 정의
Props 타입 안전성 보장

✅ 설정 패널

웹타입별 맞춤 설정 UI 자동 생성
공통 설정 (disabled, required, readonly) 포함
실시간 설정 값 업데이트

✅ 문서화

자동 생성된 README.md
사용법 및 설정 옵션 문서
개발자 정보 및 CLI 명령어 기록

CLI 실행 후 확인사항

1. 브라우저에서 확인

// 개발자 도구에서 확인
__COMPONENT_REGISTRY__.get("컴포넌트이름")

2. 컴포넌트 패널에서 테스트

화면 디자이너 열기
컴포넌트 패널에서 새 컴포넌트 확인
드래그앤드롭으로 캔버스에 추가
속성 편집 패널에서 설정 테스트

3. 설정 패널 동작 확인

속성 변경 시 실시간 반영 여부
필수/선택 설정들의 정상 동작
웹타입별 특화 설정 확인

트러블슈팅

import 자동 추가 실패

만약 index.ts에 import가 자동 추가되지 않았다면:

// lib/registry/components/index.ts에 수동 추가
import "./컴포넌트이름/컴포넌트이름Renderer";

컴포넌트가 패널에 나타나지 않는 경우

브라우저 새로고침
개발자 도구에서 오류 확인
import 구문 확인
TypeScript 컴파일 오류 확인

설정 패널이 제대로 작동하지 않는 경우

타입 정의 확인 (types.ts)
ConfigPanel 컴포넌트 확인
웹타입별 설정 로직 확인

고급 사용법

사용자 정의 옵션

# 크기 지정
node scripts/create-component.js my-component "내 컴포넌트" "설명" display --size=300x50

# 태그 추가
node scripts/create-component.js my-component "내 컴포넌트" "설명" display --tags=tag1,tag2,tag3

# 작성자 지정
node scripts/create-component.js my-component "내 컴포넌트" "설명" display --author="개발자명"

생성 후 커스터마이징

컴포넌트 로직 수정: [컴포넌트이름]Component.tsx
설정 패널 확장: [컴포넌트이름]ConfigPanel.tsx
타입 정의 확장: types.ts
렌더러 로직 수정: [컴포넌트이름]Renderer.tsx

베스트 프랙티스

네이밍 규칙

컴포넌트이름: kebab-case (예: text-input, date-picker)
표시이름: 명확한 한글명 (예: "텍스트 입력", "날짜 선택")
설명: 구체적이고 명확한 설명

카테고리 선택

컴포넌트의 주된 용도에 맞는 카테고리 선택
일관성 있는 카테고리 분류
사용자가 찾기 쉬운 카테고리 구조

웹타입 선택

컴포넌트의 데이터 타입에 맞는 웹타입 선택
기본 동작과 검증 로직 고려
확장 가능성 고려

결론

이 CLI 도구를 사용하면 화면 관리 시스템에 새로운 컴포넌트를 빠르고 일관성 있게 추가할 수 있습니다. 자동 생성된 템플릿을 기반으로 비즈니스 로직에 집중하여 개발할 수 있습니다.

더 자세한 정보는 컴포넌트 시스템 가이드를 참조하세요.

6.7 KiB Raw Permalink Blame History