Plop.js로 쉽게 코드 템플릿 만들기

 

Plop.js로 쉽게 코드 템플릿 만들기

개발을 하다 보면 반복적으로 비슷한 코드를 작성해야 할 때가 많다.

특히 React 컴포넌트나 Redux 액션, API 호출 함수 같은 것들 말이다.

나 역시도 치스톡 프로젝트를 진행하면서 이런 반복 작업에 대한 고민을 마주친 적이 많았다.

컴포넌트 하나를 만들려고 해도 컴포넌트 파일, 테스트 파일, 스토리 파일, 스타일 파일, 타입 파일,

그리고 인덱스 파일까지 만들어야 하는 작업이 반복되다 보니 피로감이 몰려왔던 것이다.

매번 새로 만드는 것도 귀찮고, 실수가 발생할 가능성도 있어서 더 효율적인 방법이 없을까하는 고민을 하고 있었다.

 

그러다 우연히 이런 문제를 개선할 수 있는 방법을 알게 되었는데 바로 코드 템플릿을 이용한 제너레이터였다.

지인에게 이런 고민을 털어놓았더니 Plop.js를 추천해주면서 이런게 있다고 알려주는 것이었다.

보는 순간 아 이거다라는 생각과 함께 이렇게 하면 반복 작업을 줄이면서도

일정한 코드 스타일을 유지할 수 있겠다라는 생각이 들었다.

 

그럼 Plop.js가 어떤 도구인지, 어떻게 사용하는지 한번 알아보자.

 

Plop.js 설치하기

Plop.js는 Node.js 환경에서 동작하는 도구이기 때문에 먼저 Node.js가 설치되어 있어야 한다.

프로젝트 폴더에서 다음과 같이 설치할 수 있다.

 

npm install --save-dev plop

 

혹은 yarn을 사용한다면

yarn add --dev plop

 

개발 환경에서만 사용하는 도구이므로 devDependencies에 추가하는 것이 좋다.

 

Plop.js 설정하기

설치가 완료되면 프로젝트 루트에 `plopfile.js` 파일을 생성해야 한다.

이 파일에서 Plop.js가 어떻게 동작할지 설정을 정의하게 된다.

예를 들어 React 컴포넌트 템플릿을 자동 생성하는 설정은 다음과 같다.

 

export default function (plop) {
  // create your generators here
  plop.setGenerator("components", {
    description: "React component using Typescript",
    prompts: [
      {
        type: "input",
        name: "name",
        message: "Name: ",
      },
      {
        type: "list",
        name: "category",
        message: "Which category type do you need?",
        choices: ["atoms", "molecules", "organisms", "charts"],
      },
      {
        type: "input",
        name: "tag",
        message: "Tag name: ",
      },
    ],
    actions: [
      {
        type: "addMany",
        destination: "src/components/{{category}}/{{upperCamel name}}",
        templateFiles: "plop_templates/component/**/*.hbs",
        base: "plop_templates/component",
      },
    ],
  });
  plop.setHelper("upperCamel", (txt) =>
    txt
      .split(" ")
      .map((word) =>
        Array.from(word)
          .map((char, idx) => (idx === 0 ? char.toUpperCase() : char.toLowerCase()))
          .join(""),
      )
      .join(""),
  );
};

 

여기서 prompts는 사용자로부터 입력받을 정보를 정의하는 부분이고,

actions는 그 입력값을 바탕으로 어떤 파일을 생성할지 결정하는 부분이다.

주목할 점은 addMany 액션을 사용하여 여러 파일을 한 번에 생성할 수 있다는 것이다.

templateFiles에 와일드카드(**/*.hbs)를 사용하면 지정된 폴더의 모든 템플릿 파일을 자동으로 처리할 수 있다.

 

또한 plop.setHelper를 통해 커스텀 헬퍼 함수를 정의할 수 있다.

위 예시의 `upperCamel` 헬퍼는 문자열을 UpperCamelCase로 변환해주는 함수로,

템플릿에서 `{{upperCamel name}}`처럼 사용할 수 있다.

또, 이 함수는 plopfile.js 뿐만 아니라 템플릿 파일에서도 사용할 수 있다!

 

치스톡 프로젝트는 Atomic Design 설계를 따르도록 했는데,

그래서 컴포넌트 카테고리를 choices로 atoms, molecules, organisms, charts로 커스터마이징 한 것이 보인다.

이는 CLI에서 특정 선택지를 선택할 수 있는 형태로 나타난다.

 

템플릿 파일 작성하기

위 설정에서 참조하는 템플릿 파일을 실제로 생성해야 한다.

`plop_templates/component` 폴더를 만들고 그 안에 템플릿 파일들을 작성하면 된다.

예를 들어 React 컴포넌트 템플릿 파일(`plop_templates/component/{{upperCamel name}}.tsx.hbs`)은 다음과 같이 작성할 수 있다.

 

//plop_templates/component/{{upperCamel name}}.tsx.hbs

import { {{upperCamel name}}Variants } from "./{{upperCamel name}}.styles";
import { {{upperCamel name}}Props } from "./{{upperCamel name}}.types";

const {{upperCamel name}} = ({ className, ...props }: {{upperCamel name}}Props) => {
  return <{{tag}} className={ {{upperCamel name}}Variants({ className })} {...props}></{{tag}}>;
};

export default {{upperCamel name}};

 

이 템플릿에서 {{upperCamel name}}과 {{tag}}는 사용자 입력을 받아 치환될 변수들이다.

Handlebars 템플릿 엔진을 통해 이러한 변수들이 실제 값으로 대체되어 최종 코드가 생성된다.

 

Plop.js 사용하기

설정이 완료되면 터미널에서 다음 명령어를 실행하여 Plop을 사용할 수 있다.

 

npx plop

 

실행하면 등록된 plopfile.js에서 설정한대로 제너레이터 목록이 표시되고,

원하는 제너레이터를 선택한 후 필요한 정보를 입력하면 자동으로 지정된 경로에 파일이 생성된다.

이렇게 사용하면 반복 작업이 줄어들고, 항상 일정한 코드 스타일을 유지할 수 있으며,

필요에 따라 템플릿을 수정하여 프로젝트에 맞게 커스터마이징할 수 있다.

 

 

참고

Plop.js

chistock-ui에서 작성한 템플릿 파일