AdminLTE 3와 Vue.js 통합 아키텍처

AdminLTE 3는 Bootstrap 4 기반의 강력한 관리자 템플릿이며, 이를 Vue.js의 반응형 시스템과 결합하면 유지보수가 용이한 단일 페이지 애플리케이션(SPA) 대시보드를 구축할 수 있습니다. 이 접근 방식은 서버 사이드 렌더링 없이도 복잡한 UI 상호작용과 데이터 시각화를 처리하는 데 최적화되어 있습니다.

프로젝트 초기화 및 에셋 통합

기존의 템플릿 리포지토리를 복제하는 대신, 최신 빌드 도구인 Vite를 사용하여 Vue 프로젝트를 생성하고 AdminLTE 3의 코어 의존성을 직접 주입하는 방식이 확장성에 유리합니다. AdminLTE 3는 내부적으로 jQuery와 Bootstrap 4에 의존하므로 정확한 버전 호환성을 유지해야 합니다.

# Vite를 이용한 Vue 프로젝트 스캐폴딩
npm create vite@latest enterprise-dashboard -- --template vue
cd enterprise-dashboard

# AdminLTE 3 및 필수 종속성 설치 (Bootstrap 4 호환 버전 지정)
npm install admin-lte@3.2.0 bootstrap@4.6.2 jquery popper.js

# 개발 서버 실행
npm run dev

컴포넌트 기반 UI 추상화

AdminLTE의 방대한 HTML 마크업을 Vue의 단일 파일 컴포넌트(SFC)로 추상화하여 재사용성을 높입니다. 아래는 데이터 테이블을 렌더링하는 재사용 가능한 컴포넌트 구조입니다. Vue 3의 Composition API를 사용하여 로직을 캡슐화합니다.

<template>
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">{{ tableTitle }}</h3>
    </div>
    <div class="card-body table-responsive p-0">
      <table class="table table-hover text-nowrap">
        <thead>
          <tr>
            <th v-for="col in columns" :key="col.key">{{ col.label }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in dataset" :key="row.id">
            <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  tableTitle: { type: String, required: true },
  columns: { type: Array, required: true },
  dataset: { type: Array, default: () => [] }
});
</script>

상태 관리 및 라우팅 아키텍처

복잡한 대시보드 애플리케이션에서는 전역 상태 관리가 필수적입니다. Vuex 대신 Vue 3 생태계에 최적화된 Pinia를 사용하여 스토어를 구성하면 타입 추론과 모듈 분리가 용이합니다. 또한 Vue Router를 활용하여 AdminLTE의 사이드바 내비게이션과 SPA 라우팅을 동기화합니다.

// stores/dashboardMetrics.js
import { defineStore } from 'pinia';
import { fetchMetricsData } from '@/api/metrics';

export const useMetricsStore = defineStore('metrics', {
  state: () => ({
    revenue: 0,
    activeUsers: 0,
    isLoading: false,
  }),
  actions: {
    async loadDashboardData() {
      this.isLoading = true;
      try {
        const response = await fetchMetricsData();
        this.revenue = response.data.totalRevenue;
        this.activeUsers = response.data.currentUsers;
      } catch (error) {
        console.error('데이터 로딩 실패:', error);
      } finally {
        this.isLoading = false;
      }
    }
  }
});

HTTP 클라이언트 및 API 계층 분리

백엔드 API와의 통신을 위해 Axios를 사용할 경우, 인스턴스를 생성하여 전역 인터셉터를 설정하는 것이 좋습니다. 이를 통해 AdminLTE의 로딩 오버레이 컴포넌트와 연동하거나, JWT 토큰 갱신 로직을 중앙에서 처리할 수 있습니다.

// api/client.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_ENDPOINT,
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default apiClient;