Backend·아카이브·2024-01: 진행중
BDMIN_VUE
Vue 3 + Spring Boot 어드민 학습 (B_CMS)
"아무리 React 를 좋아한다 해도, 실무에서 자주 쓰는 Vue 로도 개인 프로젝트 기록을 남겨보자" 는 마음으로 시작했습니다. 첫 회사의 스택을 사이드 프로젝트로 정리한 사례입니다.
기술 스택
만든 이유
회사에서 AMS / WMS 를 만들었었는데, 그 근간이 되는 사용자별 언어 · 탭 · 커스터마이징 가능한 ADMIN 코어 기능을 사이드로 구현하는 데 집중했습니다. 본인은 React 를 선호하지만, 첫 회사가 Vue + Spring Boot 환경이었기 때문입니다.
코멘트
2024년 시점의 모범적 풀스택 구성 (Vite 4 + Vue 3.4 + Spring Boot 3.2 + JWT)을 갖추었습니다. React 본진 외에도 회사 스택을 깊이 다룰 수 있다는 점을 증명한 사례입니다.
주요 특징
- 01Vue 3.4 + Vite 4 + Pinia (persistedstate) + vue-i18n 9 (서버사이드: DB Locale 엔티티 fetch)
- 02Spring Boot 3.2.2 + Java 17 + Spring Data JPA + Spring Security + JJWT 0.11 + Redis Reactive
- 03JWT 필터 추상화: AbstAuthProcessFilterImpl로 공통부 분리, JwtAuthFilter로 확장 (한 단계 더 추상화)
- 04탭 시스템 (keep-alive + Pinia): addCache/getCacheList/removeCache/refreshCurrentTab 4 함수로 동기
- 05메뉴-역할 동적 권한: Menubyrole · RoleByUser 별도 엔티티 + 복합키로 사용자 역할별 메뉴 결정
- 06DaisyUI 테마 프리셋 + 자작 그리드 (CRUD · 마스킹 · 행 스타일링): ag-grid 점진 교체 중
비고
- ·인증 / 인가 구현이 가장 아쉬운 부분으로, 추후 고도화를 진행한다면 처음부터 다시 설계해 작성하고 싶음
- ·다시 한다면 Nuxt로 변경하고 최적화에 더 신경. 언어 본진(React) 변경과 본업으로 휴면
- ·Tistory #255 (keep-alive feat. vue-router) + #257 (탭 + 캐싱 동적 구현) 시리즈로 정리