Prologue

조만간 또 신규 프로젝트 환경 구축을 해야 할 일이 생기게 되었다.

각 조직마다 사내 인프라, 아키텍처, 보안 등 제약사항이 하두 많아서 지속적으로 프로젝트를 시작할 때마다 아주 그냥 늘 새롭고 짜릿하다.

• “ESLint, Prettier 다시 설정해야 하나?”
• “CJS 쓸까 ESM 쓸까? 지난 플젝꺼 그냥 갖다 쓸까?”
• “버전 또 바뀌었네… 올릴까 말까”
• “Tailwind 추가에 ts? 아따 귀찮구만”

이런 반복과 수고를 줄이고, 일관된 개발 환경과 경험을 제공하기 위해 @croot/scaffolding 프로젝트를 시작해보기로 결심함

목표: 빠른 구축! 확장성! 지속성!

이 프로젝트의 핵심 목표는 단순하다.

모든 프론트엔드 프로젝트를 빠르게, 일관되게, 확장도 가능하고 지속적으로 재사용 가능하게 만든다.

주요 해결 과제

구조 Design

pnpm을 이용해서 모노레포로 가져가는게 아무래도 최적이겠지?

Monorepo 구조

/packages
  /eslint-config    # ESLint 설정 모듈
  /prettier-config  # Prettier 설정 모듈
  /tsconfig         # TypeScript 설정 모듈
  /create-app       # CLI
/templates
  /react
  /vue
  /next
  /nuxt

패키지 이름

네이밍 규칙

모든 이름은 @croot/ 스코프 하에서 일관성 있게 관리

ESLint 설정 (@croot/eslint-config)

Prettier 설정 (@croot/prettier-config)

TSConfig 설정 (@croot/tsconfig)

CLI 사용 방식

기본 실행

pnpm create @croot/app my-app

옵션 선택 가능

pnpm create @croot/app my-app --type esm --ui react --ts --tailwind

혹은 인터랙티브 모드:

pnpm create @croot/app my-app

? Project Name: my-app
? Framework: React / Vue / Next / Nuxt
? Module Type: ESM / CJS
? Use Typescript? (Y/n)
? Use Tailwind CSS? (Y/n)

ESM / CJS 전환 지원

CLI에서 생성 시 --type esm 또는 --type cjs를 지정하면, 템플릿 내부 코드(import/export, require/module.exports) 및 package.json의 type 필드를 자동으로 변환하도록 지원.

확장성 고려

향후에는 다음과 같은 기능도 무리 없이 추가할 수 있도록 설계 필요

• 템플릿 선택 확장: Svelte, Vanilla 등
• 테스트 프레임워크 선택 (-test vitest)
• GitHub Actions / CI 설정 자동 포함