# 궁금증
Vue라는 프레임워크를 계속해서 파고 있다.
그러던 와중, 문득
vue-cli로 vue 프로젝트를 생성했을 때, main.js파일에서 생성된 앱 인스턴스가 어떻게 알고 public폴더에 있는 index.html파일의 DOM요소에 mount, 즉 연결이 되는지 궁금했다.
(이거...궁금해한 사람.. 없어?ㅎㅎ)
public/index.html
<!DOCTYPE html>
<html lang="en">
<!--생략-->
<body>
<div id="app"></div> <!--앱인스턴스가 여기에 mount된다.-->
</body>
</html>
src/main.js
import { createApp } from 'vue';
import router from './router.js';
import App from './App.vue';
import store from './store/index.js';
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');# 결론
결론을 말하면,
Vue CLI가 자동으로 main.js에서 생성된 앱 인스턴스를 index.html의 DOM요소에 연결해준다고 한다.
즉, Vue CLI의 내부 동작 및 설정에 따라 자동으로 이루어진다.
(너무.. 간단한 답이었나?ㅎㅎ)
Vue CLI는 'main.js'파일에서 생성된 Vue 앱(인스턴스)을 'public/index.html' 파일 내의 특정 DOM요소(위 예시에서는 id가 app인 요소)에 자동으로 마운트(mount)한다.
이렇게 함으로써 Vue 앱이 HTML파일과 연결되고, 웹페이지에 렌더링 되는 것.
## 여기서 mount의 뜻은 뭘까?
- Vue 앱(인스턴스)을 웹 페이지에 삽입하거나, 연결하는 것을 의미한다.
Vue앱 인스턴스는 JavaScript 객체로 정의되며, 이 객체를 웹 페이지의 HTML 요소에 연결하여 앱을 화면에 표시한다.
Vue는 마운트된 요소를 감시하고 변경사항을 화면에 반영한다.
## 앱 인스턴스란 무엇인가?
- Vue framework로 동작하는 Application의 기본 단위.
- 자바스크립트 객체
- 인스턴스를 생성함으로써 Vue Application이 하나 생성된다.
- 인스턴스 하나가 웹사이트 전체라고 보면 된다. 하나의 웹사이트에는 하나의 Vue Application Instance 가 있다고 생각하면 좋다.
- 인스턴스 내부에서 여러 컴포넌트를 조합해서 페이지를 만들고, 페이지간 이동을 하며 결국 하나의 웹사이트가 완성되는 것.
이렇게 생성된 인스턴스를 화면에 보이도록 HTML Element 어딘가에 연결을 해주면 되는 것.
Vue Application Instance에는 mount라는 API가 있다.
이걸 이용하면 HTML Element에 인스턴스를 연결할 수 있다.
참고:
https://analogcode.tistory.com/17
Vue.js 강좌 1. Vue를 제대로 이해하면서 시작하자
Vue를 그동안 사용해오면서 그때그때 필요한걸 하나씩 찾아보면서 사용해왔는데, 기본부터 확실하게 하나씩 공부해보자란 생각이 들었다. 그리고 Vue를 사용하려는 사람들을 위해 Vue를 내 것으
analogcode.tistory.com
'Vue.js' 카테고리의 다른 글
| [Vuex] mapGetters사용 시, 여러 namespace에서 getters가져오는 방법 (0) | 2023.11.08 |
|---|---|
| [Udemy Vue 완벽가이드 Section15] 223. 지역 모듈 상태 이해하기 (0) | 2023.11.07 |
| [Udemy Vue 완벽가이드 Section15] 222. 모듈로 저장소 구성하기 (0) | 2023.10.25 |
| [Udemy Vue 완벽가이드 Section15] 221. 예시: 더 많은 상태 추가하기 (0) | 2023.10.25 |
| [Udemy Vue 완벽가이드 Section15] 220. 매퍼 헬퍼(Mapper Helper) 사용하기 (0) | 2023.10.25 |
