Vue.js는 SPA(Single Page Application) 구조를 가지고 있고,
화면 구성은 CSR 방식으로 렌더링 한다.
CSR 구조에서 App.vue는 프로젝트 실행 시, 제일 먼저 보여지는 화면으로 최상위에 위치하며, 라우터는 App.vue 내에서 이동한다.
1. Vue.js의 화면구조
App.vue 파일에 존재하는 router-view 를 통해 라우터가 변경되며, 세팅된 라우터 정보에 따라 화면이 변경된다. 즉, 해당 코드는 URL에 따른 컴포넌트가 화면에 그려지며 페이지를 표시하는 태그역할을 한다.
2. index.html의 역할
브라우저에서 개발자도구(F12)의 요소탭을 확인해보면 head 와 body 로 나뉘어 있다.
이때 우리가 보는 화면은 body 태그 안의 엘리먼트들이며, vue의 public/index.html 파일에서 div id="app"/ 를 통해 최상위 컴포넌트인 App.vue가 모든 컴포넌트들을 모아 보여준다고 볼 수 있다.
3. main.js의 역할
그렇다면 App.vue와 index.html은 어떻게 연결이 된 것일까?
그 해답은 main.js 파일에 있다.
main.js파일은 프로젝트의 전역적인 환경설정 관리를 해주며 크게 2가지 역할을 한다.
-
첫째, App.vue 인스턴스를 만드는 명령을 호출
-
둘째, 각종 플러그인을 전역적으로 사용하도록 import 시킴
main.js의 첫번째 역할에서 index.html 파일을 이어주는데,
app.mount("#app");
id="app"인 태그에 해당 인스턴스를 적용하겠다는 의미로 index.html의 div id="app"/ 의 위치에 app인스턴스가 렌더링되는 것이다.
4. 라우터 세팅
