Hygen: Code Generator

2022.05.11

1. Hygen 이란

코드를 작성하다 보면 반복적으로 사용하고 특정 규칙에 따라 작성하는 코드들이 있습니다.

저는 react를 사용할때 매번 컴포넌트 폴더 구조를 만드는 작업이 불편 하였고, 해당 부분을 자동화 하고자 여러 code generator중 찾던중 우아한 형제들의 기술 블로그를 보고 hygen을 사용하게 되었습니다.

해당 포스트에서는 react 컴포넌트 구조를 생성하는 방법을 예시로 들었지만 Hygen은 code generator로 백엔드의 MVC패턴에 맞게 파일을 생성하는 등 다른 규칙적인 코드를 만드는데에 사용 할 수 있습니다.

2. hygen 사용하기

설치
```
yarn add hygen
```
예제 파일 생성 하기
```
yarn hygen init self
```
hygen을 생성하면 기본적으로 있는 template를 생성해 줍니다.

3. hygen 나에게 맞는 커스텀 사용하기

우선 어떤 식으로 폴더 구조를 짤 지를 만듭니다. 다음은 Atomic Design 패턴을 사용한 리액트 구조의 일부 입니다.

Line Entry에서는 Atomic Design 패턴을 5단계에서 3단계로 줄여서 사용하는데 이 패턴대로 폴더를 생성하는 hygen template를 만들겠습니다.

저는 컴포넌트파일, 타입파일, 스토리북 파일을 만들고 해당 3개 파일을 내보는 index 파일을 가지고 있는 폴더를 생성 할 것입니다. 해당 예제에서는 컴포넌트 생성만 다루고 있습니다.

3.1. template 기본 구조

hygen은 _templates 하위에 .ejs로 템플릿을 생성합니다. _templates 하위에 폴더를 component/new로 생성하면 추 후 다음과 같은 명령어로 템플릿에 맞는 컴포넌트를 생성 할 수 있습니다.

hygen componet new

그리고 해당 경로의 index.js에 질문 선택과 컴포넌트 이름을 묻는 prompt을 만들 수 있습니다.

3.2. template 작성하기

ejs를 사용해봤다면 해당 문법에 작성하기 쉬울 것입니다. ejs는 <% 변수 %>와 같은 형태로 JS코드에 코드를 삽입할 수 있습니다. 우선 다음은 컴포넌트를 생성하는 전체 코드 입니다.

전체 코드

./_templates/components/new/main.ejs.t

---
to: src/components/<%= category %>/<%= name %>/<%= name %>.tsx
---
import { <%= name %>PropsType } from './<%= name %>.types';

const <%= name %>: React.FC<<%= name %>PropsType> = () => {
  return (
    <div>
      <%= name %> components
    </div>
  )
}

export default <%= name %>

상단의 to ~ 부분은 해당 파일의 생성될 경로를 뜻합니다. 위의 코드는 src/components/카테고리명/컴포넌트명/컴포넌트명.tsx로 파일을 생성 할 수 있습니다.

3.3. prompt 만들기

위에서 만든 code template이 있는 경로에 index.js를 생성합니다.

전체 코드

./_templates/components/new/index.js

module.exports = {
  prompt: ({ inquirer }) => {
    const questions = [
      {
        type: 'select',
        name: 'category',
        message: '어떤 디자인 패턴 구조에 생성하시겠습니까?',
        choices: ['Atoms', 'Modules', 'Templates'],
      },
      {
        type: 'input',
        name: 'component_name',
        message: '컴포넌트의 이름은 무었입니까?',
      },
    ];
    return inquirer.prompt(questions).then(answers => {
      const { category, component_name } = answers;
      const name = component_name.charAt(0).toUpperCase() + component_name.slice(1);
      return { category, name };
    });
  },
};

questions 변수를 보면 prompt를 생성하고 해당 옵션에 대한 값을 위의 ejs파일에 변수로 반환 할 수 있게 합니다.

select type

정해진 옵션을 선택 할 수 있습니다. 해당 옵션의 이름은 name에 있는 ‘category’로 아래의 return문에서 category 변수로 반환 합니다. 저는 이 값을 어떤 폴더를 사용할 것인지를 선택합니다.

prompt 실행 결과 예제1 select
input type

값을 받을 수 있는 옵션 입니다. 컴포넌트의 경우 앞글자를 대문자로 해야 하기 때문에 return에서 보면 첫 글자는 대문자로 반환 합니다.

prompt 실행 결과 예제2 input

3.4. 실행 결과

다음과 같이 Modules 하위에 TestModules로 생성 하였습니다.

앞글자를 소문자로 작성했지만 자동으로 대문자로 생성해줍니다.

이전에는 컴포넌트를 생성할때 기존의 컴포넌트를 복사하여 사용했는데, 복사한 컴포넌트를 수정하는데도 오래 걸리고 복사한 컴포넌트에서 수정을 잘못해서 나중에 오류가 나서 찾게 되는 귀찮은 반복적인 일들이 생깁니다.

Hygen을 사용하게 되면서 빠르게 세팅할 수 있어 만족도가 매우 높아 졌습니다.