똑똑한 개발자의 프론트 개발 업무를 도와줄 스크립트 입니다.
스크립트를 사용해 더 효율적으로 개발해보세요!
Install with npm:
npm i -D tokript
Install with yarn:
yarn add -D tokript
Usage: tokript [options] [resolver]
CLI to help tok's working
Arguments:
resolver script resolver (choices: "gen:source", "gen:img", "gen:font", "gen:icon",
"w:start", "commit")
Options:
-V, --version output the version number
-h, --help display help for command
- commit
똑똑한 개발자에는 커밋 컨벤션이 존재합니다. 해당 컨벤션에 맞게 커밋메시지 작성을 도와주는 스크립트 입니다.
- gen:api
swagger 를 조회하여 api 함수와 schema type, react-query 의 query,mutation 을 생성해 줍니다.
- gen:source
page, dynamic-page, api 에 대한 탬플릿을 생성해 줍니다.
- gen:icon
asset 폴더를 조회하여 svg 파일을 사용가능한 chakra-icon 컴포넌트로 생성해줍니다.
color props 로 제어를 해야한다면, svg 파일의 fill 이나 stroke 의 컬러를 "currentColor" 로 변경후 실행 해주세요
- gen:img
asset 폴더를 조회하여 img 파일경로를 담은 Object 를 생성해줍니다.
- gen:font
asset 폴더를 조회하여 font 파일을 next-local 폰트로 생성해줍니다.
- gen:route
pages 폴더를 조회하여 route 경로를 담은 오프젝트를 생성해줍니다.
- convert:webp
asset 폴더를 조회하여, png, jpg 확장자를 webp 로 변환해 줍니다. 변환하여 사용하기전에, next/image 사용을 고민해주세요. 다른 확장자를 사용하더라도 자동으로 webp 변환 해줍니다.
tokript // select resolver by cli
tokript commit // pass resolver by argument
tokript -h // option
tokript.config.js 파일로 세부적인 설정이 가능합니다. 해당 파일은 루트 디렉토리에 존재해야합니다.
export type TokriptConfig = {
basePath: string;
commit: Partial<CommitConfig>;
'gen:img': Partial<GenerateImageConfig>;
'convert:webp': Partial<ConvertWebpConfig>;
'gen:source': Partial<GenerateSourceConfig>;
'gen:font': Partial<GenerateFontConfig>;
'gen:icon': Partial<GenerateIconConfig>;
'gen:api': Partial<GenerateSwaggerApiConfig>;
'gen:route': Partial<GenerateRouteConfig>;
};
export type CommitConfig = {
/** 스코프검색에서 제외할 경로들의 glob 패턴 입니다. */
ignoredScopes: string[];
/** 모노래포 사용시, workspace 로 커밋 범위 설정할수 있습니다. */
workspaces: string[];
};
export type GenerateSourceConfig = {
page: {
/** 컴포넌트 생성시 Next Head 의 <title> 태그에 들어가게될 앱 이름입니다. */
appName: string;
};
};
export type GenerateImageConfig = {
/** 조회할 img 파일들이 포함되어있는 폴더 입니다. */
inputPath: string;
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: string;
/** 생성될 image 객체의 이름입니다 */
displayName: string;
/** 생성될 객체의 value 에 할당될 경로의 base-path 입니다 */
basePath: string;
/** 생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다. */
includingPattern: string[];
/** 제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다. */
ignoredPattern: string[];
/** key 값을 결정할 포멧함수입니다. 기본적으로, SNAKE_UPPER_CASE 로 생성됩니다. */
formatKey: (fileName: string) => string;
};
export type ConvertWebpConfig = {
/** 조회할 img 파일들이 포함되어있는 폴더 입니다. */
inputPath: string;
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: string;
/** 생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 생성됩니다. */
includingPattern: string[];
/** 제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 제외 됩니다. */
ignoredPattern: string[];
/** 변환되는 이미지의 해상도를 결정합니다. */
quality: number;
};
export type GenerateFontConfig = {
/** 조회할 font 파일들이 포함되어있는 폴더 입니다. */
inputPath: string;
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: string;
/** 생성될 폰트 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다.
* (default: ['*.otf', '*.ttf', '*.woff', '*.woff2'])
*/
includingPattern: string[];
/** 제외 될 폰트 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다.
* (default: ['*node_module*'])
*/
ignoredPattern: string[];
};
export type GenerateRouteConfig = {
/** 조회할 page 파일들이 포함되어있는 폴더 입니다. */
inputPath: string;
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: string;
/** 생성될 route 객체의 이름입니다 */
displayName: string;
/** 포함할 route 의 glob 패턴입니다. */
includingPattern: string[];
/** 제외될 route 의 glob 패턴입니다. */
ignoredPattern: string[];
};
export type GenerateIconConfig = {
/** 조회할 svg 파일 혹은 svg 파일이 포함되어있는 폴더 입니다. */
inputPath: string;
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: string;
/** 생성될 Chakra Component 이름 뒤에 붙을 추가 텍스트 입니다 (기본적으로 Component 는 파일 이름을 따르게 됩니다.) */
suffix: string;
/** 생성될 Chakra Component 이름 앞에 붙을 추가 텍스트 입니다 (기본적으로 Component 는 파일 이름을 따르게 됩니다.) */
prefix: string;
};
export type GenerateSwaggerApiConfig = {
/** 조회할 스웨거의 url 혹은 file(yaml, json) 경로 입니다. 통상적으로
* 백앤드 개발자에게 공유받은 api-swagger-url 의 '/openapi.json' 경로에 해당합니다.
*/
swaggerSchemaUrl: string;
/** 생성될 파일들이 위치할 경로입니다. */
outputPath: string;
/** 생성되는 코드의 React Query 포함 여부 입니다.
* 해당 옵션이 false 일경우 infiniteQuery 를 포함한 모든 Query 가 생성되지 않습니다. */
includeReactQuery: boolean;
/** 생성되는 코드의 InfiniteQuery 포함 여부 입니다. */
includeReactInfiniteQuery: boolean;
/** Api 의 axios 요청 instance 주소입니다 */
axiosInstancePath: string;
/**
* infiniteQuery 를 생성할 함수 필터 목록 입니다.
* */
paginations: Array<{
/** api 의 queryParams key 에 keywords 가 포함되어 있는 항목만 생성됩니다. 키워드 배열은 AND 연산으로써 사용됩니다. */
keywords: string[];
/** InfiniteQuery 의 nextPage 와 nextPageParam 을 구하는 함수를 작성하기 위해 사용됩니다. */
nextKey: string;
/** InfiniteQuery 의 nextPage 를 구하는 함수를 커스텀하기 위해 사용됩니다. */
getNextPage?:
| string
| ((param: {
apiInstanceName: string;
functionName: string;
pagination: { keywords: string[]; nextKey: string };
}) => string);
/** InfiniteQuery 의 nextPageParam 을 구하는 함수를 커스텀하기 위해 사용됩니다. */
getNextPageParam?:
| string
| ((param: {
apiInstanceName: string;
functionName: string;
pagination: { keywords: string[]; nextKey: string };
}) => string);
}>;
};
type Pagination = {
/** api 의 queryParams key 에 keywords 가 포함되어 있는 항목만 생성됩니다. 키워드 배열은 AND 연산으로써 사용됩니다. */
keywords: string[];
/** InfiniteQuery 의 nextPage 와 nextPageParam 을 구하는 함수를 작성하기 위해 사용됩니다. */
nextKey: string;
/** InfiniteQuery 의 nextPage 를 구하는 함수를 커스텀하기 위해 사용됩니다. */
getNextPage?:
| string
| ((param: {
apiInstanceName: string;
functionName: string;
pagination: { keywords: string[]; nextKey: string };
}) => string);
/** InfiniteQuery 의 nextPageParam 을 구하는 함수를 커스텀하기 위해 사용됩니다. */
getNextPageParam?:
| string
| ((param: {
apiInstanceName: string;
functionName: string;
pagination: { keywords: string[]; nextKey: string };
}) => string);
};
/* eslint-disable @typescript-eslint/no-var-requires */
require('dotenv').config();
exports.module = {
'gen:icon': {
/** 조회할 svg 파일 혹은 svg 파일이 포함되어있는 폴더 입니다. */
inputPath: 'public/icons/svg',
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: 'src/generated/icons/MyIcons.tsx',
/** 생성될 Chakra Component 이름 뒤에 붙을 추가 텍스트 입니다 (기본적으로 Component 는 파일 이름을 따르게 됩니다.) */
suffix: 'Icon',
/** 생성될 Chakra Component 이름 앞에 붙을 추가 텍스트 입니다 (기본적으로 Component 는 파일 이름을 따르게 됩니다.) */
prefix: '',
},
'gen:img': {
/** 조회할 img 파일들이 포함되어있는 폴더 입니다. */
inputPath: 'public',
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: 'src/generated/path/images.ts',
/** 생성될 image 객체의 이름입니다 */
displayName: 'MY_IMAGES',
/** 생성될 객체의 value 에 할당될 경로의 base-path 입니다 */
basePath: '/',
/** 생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다. */
includingPattern: ['*.jpg', '*.png', '*.svg', '*.jpeg', '*.webp'],
/** 제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다. */
ignoredPattern: ['*node_module*'],
/** key 값을 결정할 포멧함수입니다. 기본적으로, SNAKE_UPPER_CASE 로 생성됩니다. */
// formatKey: (filename) => str
},
'gen:route': {
/** 조회할 page 파일들이 포함되어있는 폴더 입니다. */
inputPath: 'src/pages',
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: 'src/generated/path/routes.ts',
/** 생성될 route 객체의 이름입니다 */
displayName: 'ROUTES',
/** 포함할 route 의 glob 패턴입니다. */
includingPattern: [],
/** 제외될 route 의 glob 패턴입니다. */
ignoredPattern: ['_app.tsx', '_document.tsx', '_error.tsx', 'api/**'],
},
'gen:source': {
page: {
/** 컴포넌트 생성시 Next Head 의 <title> 태그에 들어가게될 앱 이름입니다. */
appName: process.env.NEXT_PUBLIC_APP_NAME || '똑똑한 개발자',
},
},
'gen:font': {
/** 조회할 font 파일들이 포함되어있는 폴더 입니다. */
inputPath: 'public/fonts',
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: 'src/generated/fonts/next-fonts.ts',
/** 생성될 폰트 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다.
* (default: ['*.otf', '*.ttf', '*.woff', '*.woff2'])
*/
includingPattern: ['*.otf', '*.ttf', '*.woff', '*.woff2'],
/** 제외 될 폰트 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다.
* (default: ['*node_module*'])
*/
ignoredPattern: ['*node_module*'],
},
'convert:webp': {
/** 조회할 img 파일들이 포함되어있는 폴더 입니다. */
inputPath: 'public/images',
/** 생성될 파일이 위치할 경로입니다.*/
outputPath: 'public/webp',
/** 제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 제외 됩니다. */
ignoredPattern: ['*.svg'],
/** 생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 생성됩니다. */
includingPattern: ['*.png', '*.jpeg', '*.jpg', '*.webp'],
/** 변환되는 이미지의 해상도를 결정합니다. */
quality: 80,
},
'gen:api': {
/** 조회할 스웨거의 url 혹은 file(yaml, json) 경로 입니다. 통상적으로
* 백앤드 개발자에게 공유받은 api-swagger-url 의 '/openapi.json' 경로에 해당합니다.
*/
swaggerSchemaUrl: `${process.env.NEXT_PUBLIC_API_BASE_URL}/openapi.json/`,
/** 생성될 파일들이 위치할 경로입니다. */
outputPath: 'src/generated/swagger',
/** 생성되는 코드의 React Query 포함 여부 입니다.
* 해당 옵션이 false 일경우 infiniteQuery 를 포함한 모든 Query 가 생성되지 않습니다. */
includeReactQuery: true,
/** 생성되는 코드의 InfiniteQuery 포함 여부 입니다. */
includeReactInfiniteQuery: true,
/** Api 의 axios 요청 instance 주소입니다 */
axiosInstancePath: '@/configs/axios/instance',
/**
* infiniteQuery 를 생성할 함수 필터입니다.
* - keywords: api 의 queryParams key 에 keywords 가 포함되어 있는 항목만 생성됩니다. 키워드 배열은 AND 연산으로써 사용됩니다.
* ex) [limit, offset] === limit && offset
* - nextkey : InfiniteQuery 의 nextPage 와 nextPageParam 을 구하는 함수를 작성하기 위해 사용됩니다.
*
* getNextPage 와 getNextPagePram 을 커스텀 하고 싶다면 넘겨지는 객체에 포함시켜 주세요,
*/
paginations: [
{
keywords: ['cursor'],
nextKey: 'cursor',
/**
* @type undefined | string | (param: {apiInstanceName: string; functionName: string, pagination: { keywords: string[], nextKey: string }}) => string
*/
// getNextPage: "",
/**
* @type undefined | string | (param: {apiInstanceName: string; functionName: string, pagination: { keywords: string[], nextKey: string }}) => string
*/
// getNextPageParam: ""
},
],
},
};