코드를 만들어 주는 코드
"템플릿"
세개의 코드를 생성하는 파일을 만들고 테스트를 하다 보니 ... 조금 더 효율적으로 템플릿을 만들어주는 전문적인 코드가 없을까? 라는 생각이 들었다.
이번에도 GPT에게 불어본다 ...
역시 바로 똑똑한 코드가 나왔다.
import fs from 'fs';
import Handlebars from 'handlebars';
// 1. 템플릿 불러오기
const templateSource = fs.readFileSync(
'./templates/Button.hbs',
'utf-8',
);
// 2. 핸들바 템플릿 컴파일
const template = Handlebars.compile(templateSource);
// 3. 데이터 정의
const data = {
componentName: 'MyAwesomeComponent',
message: '안녕하세요, 템플릿 엔진으로 생성된 컴포넌트입니다!',
bgColor: '#f0f8ff',
};
// 4. 템플릿에 데이터 적용
const resultCode = template(data);
// 5. 결과 코드 파일로 저장
fs.writeFileSync(`./output/${data.componentName}.tsx`, resultCode);
console.log('코드 생성 완료:', `./output/${data.componentName}.tsx`);
여기서 3번에서 표현한 데이터 정의 부분을 내가 임의대로 변경할 수 있다면, 훨씬 자유도가 높은 템플릿을 만들 수 있을것만 같다.
여기에서 말하는 구조는 매우 간편하고 보기 좋다.
우선 템플릿 코드는 .hbs 로 끝나는 파일을 만들면 된다.
그리고 내가 명령어를 실행하면 자동으로 output 폴더에 파일이 등장하는 구조이다.
프로젝트 구조
root
-- template/XXX.hbs
-- run.ts
명령어 실행 방법
npx ts-node run.ts
이제 내가 앞서 만든 코드를 가지고 hbs 파일을 만들어서 템플릿을 생성하는 코드에 넣어주어야겠다.
역시 GPT... 더 편해졌다!
