Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

리액트 개발 시 여러 개의(복수의) 컴포넌트 폴더를 자동으로 생성해주고 index.js와 index.scss파일을 자동으로 생성해주는 CLI 명령어

Notifications You must be signed in to change notification settings

Jeontaeyun/create-component-cli

Repository files navigation

리액트 컴포넌트 자동화 CLI

01. CLI 커맨드 작성 개요

(01) 커맨드 목적

리액트를 이용해서 ./src폴더에 컴포넌트를 생성할 때 마다 index.js, index.scss 등을 추가해주는 과정이 번거로워 이를 CLI환경에서 손쉽게 해결할 방법을 강구하였다. 기존의 VS code 플러그인을 통해서도 가능하지만, 여러개의 컴포넌트를 컨테이너 용도인지, 프레젠트 용도인지에 따라 자동으로 구성해주는 기능은 없는 것 같기에 만들어 봤다.

(02) 커맨드 방향성

02. CLI 커맨드 사용법

(01) createComp 설치하는 방법

  1. 해당 소스파일을 설치한 한다.

  2. $npm i -g 명령어를 통해 해당 패키지 파일을 전역 설치한다.

  3. $createComp명령어를 통해 해당 CLI 명령어를 사용한다.

$createComp
 
어떤 컴포넌트를 생성할 지 선택하세요 프레젠트 컴포넌트
? 
파일의 이름을 입력하세요(복수 가능) Native Comp Bi Hi
? 
파일이 위치할 경로를 입력해주세요(./src에서 시작) ./UI_Components
? ᄒ
생성하시겠습니까? Yes
 Native 컴포넌트가 생성되었습니다. 
 이미 해당 Comp파일이 존재합니다. 
 Bi 컴포넌트가 생성되었습니다. 
 Hi 컴포넌트가 생성되었습니다.
 모든 컴포넌트가 생성되었습니다. 

위와 같이 물어보는 질문에 대한 답을 통해서 컨테이너형, 프레젠트형 컴포넌트를 생성해주며 기본적으로 ./src를 기준으로 ./src/UI_Component 디렉토리에 컴포넌트를 생성해준다.

03. CLI 커맨드 작성 과정

해당 프로젝트는 Node.js를 이용해 CLI 명령어를 쉽게 만들 수 있게 해주는 commender 패키지 , 사용자와 상호관계를 가지게 해주는 inquirer 라이브러리와 콘솔 창에 스타일을 넣어주는 chalk 라이브러리를 사용하였습니다.

04. CLI 커맨드 고찰

About

리액트 개발 시 여러 개의(복수의) 컴포넌트 폴더를 자동으로 생성해주고 index.js와 index.scss파일을 자동으로 생성해주는 CLI 명령어

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

AltStyle によって変換されたページ (->オリジナル) /