⚡ LT Framework Starter (VS Code Extension)
🔥 "백엔드/프론트엔드 연동을 5분 만에 끝내는 풀스택 엔터프라이즈 컴포넌트 프레임워크!"
💡 "VS Code에서 원클릭으로 백엔드/프론트엔드를 실행하고, CQRS CRUD 코드를 자동 생성하는 전용 개발 도구"
🌟 주요 기능 (Key Features)
1. ⚡ 원클릭 서버 실행기 (Service Process Manager)
- Frontend (
admin-ui): Vue 3 + Vite 7 개발 서버 (npm run dev) 원클릭 구동 & 실시간 8080 포트 감지.
- Backend (
admin-work-api): Spring Boot 3.5.3 (./gradlew bootRun) JVM 파라미터 자동 적용 구동 & 실시간 8090 포트 감지.
- Fullstack Start All: 프론트엔드 + 백엔드 동시 실행/중지/재시작.
- 원클릭 브라우저 연동: Swagger UI(
http://localhost:8090/swagger-ui/index.html) 및 프론트엔드 UI(http://localhost:8080) 원클릭 오픈.
2. 🖥️ 전용 사이드바 & 대시보드 (Activity Bar & Dashboard)
- VS Code 좌측 액티비티 바에 LT Framework 전용 아이콘 제공.
- 실시간 서비스 모니터링: 실행 상태(Running / Stopped / Starting), 포트, 메모리/PID 표시.
- 인터랙티브 웹뷰 대시보드: 모던한 다크/라이트 테마 제어판 제공.
3. 🏗️ CQRS CRUD / amCharts 5 자동 생성기 (Code Generators)
- Backend (Spring Boot 3):
*Controller.java (Swagger @Tag, @Operation, @PreAuthorize, @DataScope, @Log, @Validated)*Dto.java (BaseEntity 상속, Swagger @Schema, Validation)*Service.java & *ServiceImpl.java (CQRS Query/Command Mapper 주입)*QueryMapper.java / *CommandMapper.java (CQRS Read/Write 분리)*QueryMapper.xml / *CommandMapper.xml (@DataScope 동적 조건 매핑)
- Frontend (Vue 3 SFC):
Index.vue (IBSheet8 대용량 그리드 + Element Plus CRUD 모달 다이얼로그 + Axios API 클라이언트)
- amCharts 5 Dashboard:
- 세로 막대/꺾은선/원형 차트 템플릿 생성 및 SPA 메모리 누수 방지(
onBeforeUnmount root.dispose()).
4. 🩺 환경 진단기 (Environment Doctor)
- Java SDK (JDK 17/21), Node.js (20+), npm, Gradle, Git 설치 상태 점검.
- 8080, 8090 포트 점유 여부 자동 감지 및 충돌 해결 지원.
5. 🎯 상태 표시줄 (Status Bar) & 명령어 팔레트
- VS Code 하단 상태표시줄에서
$(server) Backend: 8090 / $(browser) Frontend: 8080 / $(rocket) LT Starter 실시간 표시.
Cmd+Shift+P -> LT Framework: 로 모든 기능 호출 가능.
🚀 빠른 시작 (Quick Start)
1. 명령어 목록
| 명령어 |
설명 |
LT Framework: Start All Services |
프론트엔드 + 백엔드 동시 실행 |
LT Framework: Stop All Services |
모든 서비스 중지 |
LT Framework: Start Backend |
백엔드 Spring Boot 실행 (Port 8090) |
LT Framework: Start Frontend |
프론트엔드 Vite 개발서버 실행 (Port 8080) |
LT Framework: Open Frontend UI |
브라우저에서 http://localhost:8080 열기 |
LT Framework: Open Swagger API Docs |
브라우저에서 Swagger UI 열기 |
LT Framework: Open Interactive Dashboard |
인터랙티브 웹뷰 대시보드 열기 |
LT Framework: Run Environment Health Doctor |
Java, Node, Gradle, 포트 환경 진단 |
LT Framework: Generate CQRS CRUD |
Java 백엔드 + Vue 3 IBSheet8 CRUD 자동 생성 |
LT Framework: Generate amCharts 5 Dashboard Chart |
amCharts 5 차트 컴포넌트 생성 |
⚙️ 설정 (Settings)
VS Code 설정(settings.json)에서 커스터마이징 가능:
{
"ltFramework.backendPort": 8090,
"ltFramework.frontendPort": 8080,
"ltFramework.backendPath": "back-api/v3/admin-work-api",
"ltFramework.frontendPath": "admin-front/v3/admin-ui",
"ltFramework.springProfile": "dev",
"ltFramework.autoOpenBrowserOnStart": true
}
| |
