리액트 컴포넌트 자동화 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 커맨드 고찰