[VUE] 뷰 구조

앱 생성

모든 Vue 앱은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

createApp에 최상위 컴포넌트를 만들어 주고 전달해줌 (createApp은 universe개념)
모든 앱에는 다른 컴포넌트를 자식으로 포함 할 수 있는 최상위 컴포넌트가 필요 하기 때문

앱 마운트

뷰 앱은 .mount() 메서드가 호출될 때까지 아무 것도 렌더링하지 않음

app.mount('#최상위 컴포넌트 안의 최상위 Elememt의 id')을 마운트로 넣어줘야 랜더링된다.

<div id="#app"></div> // 예시 

.mount() 메서드는 반드시 앱의 환경설정 및 에셋(asset)이 모두 등록 완료된 후에 호출

다중 앱 인스턴스

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

앱 인스턴스는 동일한 페이지 내 하나로 제한되지 않고 createApp API를 사용하게되면
여러 Vue 앱이 동일한 파일(페이지)에 공존할 수 있으며, 각각은 구성 및 전역 자산에 대한
고유한 범위를 갖게된다.