폴더 구조를 지원하도록 수정하기

"폴더 구조"

이전까지는 폴더 구조를 별도로 정의하지 않고 파일을 넣어두고 템플릿을 만드는 형식이었다.

그래서 템플릿을 생성하기 위한 코드에 폴더 구조를 그대로 반영하기 위한 코드를 추가했다.

---

템플릿을 생성하는 코드

---

import fs from 'fs';

import Handlebars from 'handlebars';

type FileInfo = {

path: string;

name: string;

ext: string;

};

const fileInfoList: FileInfo[] = [

{path: '', name: '.gitignore', ext: ''},

{path: '', name: '.prettierignore', ext: ''},

{path: '', name: 'package', ext: 'json'},

{path: '', name: 'tsconfig', ext: 'json'},

{path: 'src/ui/navigation/navigators', name: 'DrawerNavigator', ext: 'tsx'},

{path: 'src/ui/navigation', name: 'RootNavigation', ext: 'tsx'},

{path: 'src/ui/elements', name: 'Typo', ext: 'tsx'},

];

const generate = (fileInfo: FileInfo) => {

// 1. 템플릿 불러오기

const templateSource = fs.readFileSync(

`./src/automationReactNative/templates/${fileInfo.path}/${fileInfo.name}.hbs`,

'utf-8',

);

// 2. 핸들바 템플릿 컴파일

const template = Handlebars.compile(templateSource);

// 3. 템플릿에 데이터 적용

const resultCode = template({});

// 4. 결과 코드 파일로 저장

const outputDir = `./output${fileInfo.path ? '/' + fileInfo.path : ''}`;

if (!fs.existsSync(outputDir)) {

fs.mkdirSync(outputDir, {recursive: true});

}

const filePath = `${outputDir}/${fileInfo.name}${fileInfo.ext ? '.' + fileInfo.ext : ''}`;

fs.writeFileSync(filePath, resultCode);

console.log('코드 생성 완료:', filePath);

};

// 5. 모든 파일 템플릿 생성하기

fileInfoList.forEach(fileInfo => {

generate(fileInfo);

});

---

src/ui 폴더를 아래에 미리 넣어두었더니 output 폴더에도 동일한 구조로 잘 나타난다!

이걸로 폴더 구조에 맞게 미리 hbs 파일들을 넣어두면 폴더 구조를 더이상 고민할 필요 없겠지 ...