📌 글로벌 컴포넌트 등록 전략

📌 글로벌 컴포넌트 등록 전략

Vue 실무 구성 요소와 유틸 > 글로벌 컴포넌트 등록 전략

• 1. 왜 글로벌 컴포넌트 등록이 필요한가?
• 2. 수동 글로벌 등록 방법
• 3. 자동 등록 방식 (vite + import.meta.glob)
• 4. 등록 전략: 언제 글로벌로? 언제 지역으로?
• 5. 실전 팁 및 유지보수 전략
• 🔚 마무리 & 다음 글 안내

---

1. 왜 글로벌 컴포넌트 등록이 필요한가?

프로젝트가 커질수록 버튼, 모달, 테이블 같은 공통 컴포넌트를 여러 곳에서 재사용하게 됩니다.
이때 매번 import + components 등록을 하면 반복적이고 비효율적이죠.

글로벌 등록을 하면?
→ 모든 컴포넌트에서 별도 등록 없이 바로 사용 가능!

예: 공통 Button 컴포넌트 <BaseButton />, 공통 Dialog 컴포넌트 <BaseDialog /> 등

---

2. 수동 글로벌 등록 방법

Vue 앱 초기화 파일(main.js 또는 main.ts)에서 직접 등록합니다.

// main.js 또는 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import BaseButton from '@/components/common/BaseButton.vue';
import BaseDialog from '@/components/common/BaseDialog.vue';

const app = createApp(App);

app.component('BaseButton', BaseButton);
app.component('BaseDialog', BaseDialog);

app.mount('#app');

이 방법은 명시적으로 등록할 컴포넌트를 제어할 수 있다는 장점이 있지만,
공통 컴포넌트가 많아지면 main.js가 너무 길어지는 단점이 있습니다.

---

3. 자동 등록 방식 (Vite + import.meta.glob)

공통 디렉토리에 있는 모든 컴포넌트를 자동으로 등록하는 방식입니다.

📌 예: components/common 폴더에 있는 .vue 파일 전부 등록

// main.js
const app = createApp(App);

const components = import.meta.glob('./components/common/*.vue', { eager: true });

for (const path in components) {
  const comp = components[path].default;
  const name = comp.name || path.split('/').pop().replace('.vue', '');
  app.component(name, comp);
}

결과: BaseButton.vue → <BaseButton />로 전역 사용 가능

주의: 컴포넌트에 name이 정의되지 않은 경우 파일명을 자동으로 사용합니다.

---

4. 등록 전략: 언제 글로벌? 언제 지역?

조건	글로벌 등록	지역 등록
재사용 빈도	높음 (많은 화면에서 사용)	낮음 (특정 컴포넌트에서만 사용)
사용자 정의 UI	일반적인 UI (Button, Modal 등)	특화된 기능 (특정 폼 입력 등)
로딩 최적화	초기 로딩에 포함됨 (주의)	lazy-load 가능 (defineAsyncComponent)

📌 결론:

• BaseXXX.vue 형식의 공통 컴포넌트는 글로벌 등록
• 특정 비즈니스 기능용 컴포넌트는 지역 등록

---

5. 실전 팁 및 유지보수 전략

• 컴포넌트 이름은 BaseButton, BaseModal처럼 Prefix를 고정하세요
• 글로벌 등록은 한 폴더로 모아서 관리하세요 → ex) /components/common/
• import.meta.glob은 Vite 전용, webpack에서는 require.context 사용
• name 속성을 모든 컴포넌트에 명시하면 등록과 디버깅에 도움이 됩니다

🧠 실무 팁: 공통 컴포넌트를 글로벌로 등록하고, 프로젝트별 커스터마이징은 지역 컴포넌트에서 래핑하세요.

---

🔚 마무리 & 다음 글 안내

이제 공통 컴포넌트를 효율적으로 등록하고 사용하는 방법을 익혔습니다.
다음 글에서는 Suspense와 defineAsyncComponent를 활용한 비동기 컴포넌트 로딩 및 최적화 전략을 소개합니다.

👉 다음 글: Suspense와 defineAsyncComponent 활용