리액트를 이용해서 ./src폴더에 컴포넌트를 생성할 때 마다 index.js, index.scss 등을 추가해주는 과정이 번거로워 이를 CLI환경에서 손쉽게 해결할 방법을 강구하였다. 기존의 VS code 플러그인을 통해서도 가능하지만, 여러개의 컴포넌트를 컨테이너 용도인지, 프레젠트 용도인지에 따라 자동으로 구성해주는 기능은 없는 것 같기에 만들어 봤다.
-
해당 소스파일을 설치한 한다.
-
$npm i -g명령어를 통해 해당 패키지 파일을 전역 설치한다. -
$createComp명령어를 통해 해당 CLI 명령어를 사용한다.
$createComp
어떤 컴포넌트를 생성할 지 선택하세요 프레젠트 컴포넌트
?
파일의 이름을 입력하세요(복수 가능) Native Comp Bi Hi
?
파일이 위치할 경로를 입력해주세요(./src에서 시작) ./UI_Components
? ㅎ
생성하시겠습니까? Yes
Native 컴포넌트가 생성되었습니다.
이미 해당 Comp파일이 존재합니다.
Bi 컴포넌트가 생성되었습니다.
Hi 컴포넌트가 생성되었습니다.
모든 컴포넌트가 생성되었습니다. 위와 같이 물어보는 질문에 대한 답을 통해서 컨테이너형, 프레젠트형 컴포넌트를 생성해주며 기본적으로 ./src를 기준으로 ./src/UI_Component 디렉토리에 컴포넌트를 생성해준다.
해당 프로젝트는 Node.js를 이용해 CLI 명령어를 쉽게 만들 수 있게 해주는 commender 패키지 , 사용자와 상호관계를 가지게 해주는 inquirer 라이브러리와 콘솔 창에 스타일을 넣어주는 chalk 라이브러리를 사용하였습니다.