React 프로젝트에서 반복적인 컴포넌트 생성 작업을 자동화하는 generate-react-cli(GRC) 사용 방법을 소개합니다. 수동으로 파일을 복사하고 이름을 변경하는 시간을 절약하고 생산성을 높일 수 있습니다.
설치 및 기본 사용법
프로젝트에 GRC를 설치합니다. npm 5.2+ 버전부터는 npx를 사용하여 직접 실행할 수 있습니다.
npm i generate-react-cli또는 npx를 사용하여 설치 없이 즉시 실행합니다:
npx generate-react-cli component Box위 명령어는 src/components/Box 디렉터리에 Box.js, Box.css, Box.test.js 파일을 생성합니다.
설정 파일: generate-react-cli.json
GRC를 처음 실행하면 프로젝트 설정에 대한 질문에 응답하여 generate-react-cli.json 파일을 생성합니다. 이 파일은 TypeScript 사용 여부, CSS 전처리기, 테스트 라이브러리, 컴포넌트 기본 경로, lazy 로딩, Storybook, 스타일, 테스트 파일 생성 여부 등을 설정합니다.
{ "usesTypeScript": true,"usesCssModule": true,"cssPreprocessor": "scss","testLibrary": "Testing Library","component": {"default": {"path": "src/components","withLazy": false,"withStory": false,"withStyle": true,"withTest": true}}}명령어 옵션 재정의
GRC 설정 파일의 기본 규칙을 명령어 실행 시 재정의할 수 있습니다. 예를 들어, 테스트 파일 생성을 비활성화하려면 다음 명령어를 사용합니다:
npx generate-react-cli component Box --withTest=false주요 옵션은 다음과 같습니다: --path (생성 경로), --type (커스텀 컴포넌트 타입), --withLazy (지연 로딩 파일), --withStory (Storybook 파일), --withStyle (스타일 파일), --withTest (테스트 파일), --dry-run (파일 생성 전 미리보기), --flat (새 폴더 없이 파일 생성), --customDirectory (컴포넌트 디렉터리 이름 재정의).
커스텀 컴포넌트 타입 정의
기본 default 타입 외에 page 또는 layout과 같은 커스텀 컴포넌트 타입을 설정 파일에 추가할 수 있습니다. 각 타입은 고유한 설정 규칙을 가질 수 있습니다.
{ // ..."component": {"default": { /* ... */ },"page": {"path": "src/pages","withLazy": true,"withStory": false,"withStyle": true,"withTest": true},"layout": {"path": "src/layout","withLazy": false,"withStory": false,"withStyle": false,"withTest": true}}}커스텀 타입으로 컴포넌트를 생성합니다:
npx generate-react-cli component HomePage --type=page커스텀 컴포넌트 템플릿 및 파일
GRC는 내장 템플릿 외에 사용자 정의 템플릿을 지원합니다. customTemplates 객체를 설정 파일에 추가하여 컴포넌트, lazy, story, style, test 등의 파일에 대한 사용자 정의 경로를 지정할 수 있습니다. 템플릿 파일명에는 TemplateName 키워드를 사용하여 컴포넌트 이름으로 자동 대체되도록 합니다. 또한, withIndex, withStoryStyle 등 사용자 정의 파일을 추가할 수 있습니다. 사용자 정의 파일은 반드시 해당 customTemplates 항목을 정의해야 합니다. 이를 통해 프로젝트의 특정 요구사항에 맞는 유연한 컴포넌트 생성이 가능합니다.
댓글
댓글 쓰기