본문으로 건너뛰기

gen:route (next page)

nextjs 프레임워크의 page 라우터 버젼에서 사용가능합니다.
pages 폴더를 조회하여 route 경로를 포함한 객체를 생성합니다.
개발자의 타이핑으로 경로를 가져오는것이 아니라 객체의 key 값으로 가져옴으로써 경로를 가져오는데 편의성과 안정성을 제공합니다.

pages
├── index.tsx
├── auth
│   └── index.tsx
├── login
│   └── index.tsx
└── social
    └── callback.tsx

위의 폴더 구조의 이미지는 아래의 객체로 변환됩니다.

export const ROUTES = {
  AUTH_MAIN: "/auth",
  MAIN: "/",
  LOGIN_MAIN: "/login",
  SOCIAL_CALLBACK: "/social/callback",
};

Installation​

npm i -D @toktokhan-dev/cli @toktokhan-dev/cli-plugin-gen-route

Run Script​

command 를 별도로 입력하지 않으면 대화형으로 실행되어 등록되어있는 스크립트 중 선택하여 사용이 가능합니다.

npx tokript

command 를 입력하면 해당 스크립트가 바로 실행됩니다.

npx tokript gen:route
팁

자주 사용될 수 있는 스크립트는 협업간 편의성을 위해 package.json에 등록하는걸 권장 드립니다.

package.json
{
...
"scripts": {
  "gen:route": "tokript gen:route",
}
}
yarn run gen:route

Configuration​

tok-cli.config.ts 에서 config 정의가 가능합니다.

tokript.config.ts
import { genRoute } from '@toktokhan-dev/cli-plugin-gen-route'

const config: RootConfig<{
plugins: [typeof genRoute]
}> = {
plugins: [genRoute],
'gen:route': {
  ...
},
}

export default config

input​

  • Required: false
  • Type: string
  • Default: src/pages
  • Cli Option:--input -i
이미지 파일이 위치한 디렉토리 경로

config​

tok-cli.config.ts
{
'gen:route': {
  input: 'src/pages',
  ...
},
}

cli

tokript gen:route --input "src/pages"

output​

  • Required: false
  • Type: string
  • Default: src/generated/path/routes.ts
  • Cli Option:--output -o
생성될 파일이 위치할 경로

config​

tok-cli.config.ts
{
'gen:route': {
  output: 'src/generated/path/routes.ts',
  ...
},
}

cli

tokript gen:route --output "src/generated/path/routes.ts"

displayName​

  • Required: false
  • Type: string
  • Default: ROUTES
  • Cli Option:--displayName -d
생성될 image 객체의 이름입니다

config​

tok-cli.config.ts
{
'gen:route': {
  displayName: 'ROUTES',
  ...
},
}

cli

tokript gen:route --displayName "ROUTES"

includes​

  • Required: false
  • Type: string[]
  • Default:
  • Cli Option:--includes -ic
생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다.

config​

tok-cli.config.ts
{
'gen:route': {
  includes: ['*.ts', '*.tsx'],
  ...
},
}

cli

tokript gen:route --includes '*.ts', '*.tsx'

ignored​

  • Required: false
  • Type: string[]
  • Default: ['_app.tsx', '_document.tsx', '_error.tsx', 'api/**']
  • Cli Option:--ignored -ig
제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다.

config​

tok-cli.config.ts
{
'gen:route': {
  ignored: ['_app.tsx', '_document.tsx', '_error.tsx', 'api/**'],
  ...
},
}

cli

tokript gen:route --ignored '_app.tsx', '_document.tsx', '_error.tsx', 'api/**'

oneDepth​

  • Required: false
  • Type: boolean
  • Default: true
  • Cli Option:--oneDepth -od
one depth 가 true 일 경우, 폴더 구조를 무시하고 one depth 로 객체를 생성합니다.

config​

tok-cli.config.ts
{
'gen:route': {
  oneDepth: true,
  ...
},
}

cli

tokript gen:route --oneDepth true