vue
CHAPTER 5 / 34
읽기 약 2분
SYNTAX
Vue 3 인스턴스 해부: createApp
핵심 개념
createApp()으로 Vue 애플리케이션 인스턴스를 생성합니다. mount()로 DOM에 연결하고 unmount()로 해제합니다. Vue 3의 전역 설정은 app 인스턴스에서 관리합니다. 인스턴스를 지우며 애플리케이션이 어떻게 사라지는지 확인하십시오.
코드 분석
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const message = ref('CYBERDYNE SYSTEM ONLINE');
const count = ref(0);
return { message, count };
},
template: `
<div>
<div style='color:#22c55e; margin-bottom:8px;'>{{ message }}</div>
<button @click='count++' style='background:#10b981; color:#080808; border:none; padding:6px 12px; cursor:pointer; font-family:monospace;'>
ACTIVATE ({{ count }})
</button>
</div>
`
});
app.mount('#vue-output');AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Vue 3 'Vue 3 인스턴스 해부: createApp' 코드에서 반응성 시스템 관련 버그와 watch 누수를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Vue 3 인스턴스 해부: createApp'를 활용한 실전 Vue 컴포넌트를 Composition API + script setup 문법으로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Vue 'Vue 3 인스턴스 해부: createApp' 사용 패턴 전체를 분석하고 번들 크기·렌더링 성능·반응성 효율을 종합 점검해줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Vue 3 'Vue 3 인스턴스 해부: createApp'가 React의 대응 기능 대비 어떤 장단점이 있는지 솔직하게 평가하고 실무 선택 기준을 알려줘.
⭐ 이것만 기억하세요
Vue 3 인스턴스 해부: createApp는 이 3가지만 확실히 잡으세요
1.createApp 없이 컴포넌트를 정의해도 화면에 아무것도 나타나지 않습니다 — 앱 인스턴스가 DOM에 마운트되어야 렌더링이 시작됩니다
2.createApp(App).mount('#app')은 루트 컴포넌트를 지정하고 DOM 요소에 연결하는 Vue 앱의 시작점입니다
3.다음 챕터에서 앱 안에서 데이터를 반응형으로 관리하는 ref와 reactive를 배웁니다
공유하기
진행도 5 / 34