Vue 웹 페이지 생성 순서

개인적으로 작성한 ToyProject1을 기준(기본 Vue 프로젝트 생성)으로 알아본다.

처음이니까 어떻 돌아가는지나 보자

 

※ 필자의 경우 네이버의 vibe가 vue의 참고 페이지로 삼았다.

 

main.js

 

순서대로 프로젝트 경로, main.js, App.vue, index.html이다. 제일 먼저 실행은 main.js부터 시작이다.

 

내가 이해한 방식으로 요약하자면

"웹 페이지로 만들건데 store와 router라는 javascript import할 것이고, index.html 에 있는 id가 app인 곳에다가

App.vue를 삽입(마운트) 할거야"다.

 

또한 3번 째 사진의 <RouterView></RouterView>를 통해서 SAP를 구현하는 중요한 부분이다.

router.js를 보자. (세세한 라이브러리나 함수같은 경우는 따로 정리할 것이다. 여기서는 기본틀만)

 

 

router.js

 

내가 작성한 router.js이다.

1) 우선 Line 2 ~ 6 부분부터 보면 각각의 vue파일을 import하였다. const routes = [ ] 부분에서 path를 통해서

    특정 url로 들어오면 해당 컴포넌트(Vue)를  3번 째 이미지의 <Router></Router>로 보여주겠다는 의미다.

 

2) createRouter 함수 : Vue Router 인스턴스를 생성하는 함수이다. 이 함수는 라우터 설정 객체를 인자로 받아

    새로운 라우터 인스턴스를 받환한다. 이 라우터 인스턴스는 Vue 애플리케이션에서 사용될 라우팅 규칙과

    동작을 정의한다.

  

3) createWebHistory 함수 : HTML5의 History API를 사용하는 라우터의 히스토리 모드를 생성하는 함수이다.

    이 모드는 브라우저의 주소 표시줄을 조작하면서 페이지를 새로고침하지 않고도 애플리케이션의 상태를

    변경할 수 있게 해준다. 이는 SPA의 핵심 기능 중 하나다.

 

※ 꼬꼬무

History API가 뭐지? : 여태까지 전환된 페이지를 모두 기억하고 있다는 것이다. 이것은 기존 MPA에서도

가능한 부분이다. 그런데 Router를 통해 사용할 경우 페이지 새로고침없이 자연스럽게 이어지는 것을

확인할 수 있다. SPA의 주요 기능이다.

 

4) export default router를 통해서 router를 내보내게 되는데 여기서 routes에 해당하는 해당 컴포넌트의

    정보도 같이 있으므로 페이지 전환이 일어나게 되는 것이다.

 

이를 통해서 App.vue가 SPA의 중심 페이지 역할을 함으로써 SPA가 이루어지는 것이다.