Vue : 구조를 보았다
#서론
HSU_On을 만들 때, 이런생각을 했었다.
"건물들은 움직이지도 않고 유저와 상호작용을 하지도 않는데, 굳이 실시간으로 계속 렌더링이 되어야 할까?"
라는 의문점에서 시작해서 결국엔 "Unity Static Object", "Light Mapping"을 적용 시켰다.
그렇다면 이번엔 웹페이지다.
툴바나, 네비게이션바는 어느 페이지를 가나 존재하고, 같은 기능을 한다.
구글 검색창이 이렇게 있다 하면,
이 부분인 것이다.
이 부분은 모든 검색페이지마다 존재하며, 제공하는 기능도 거의 비슷하다.
그렇다면 이 공간이 페이지를 옮겨다닐때마다 렌더링 되어야 할까?
여기서 등장한게 바로 SPA(Single Page Application)이다
바로 Vue가 SPA이다.
서론이 길었다. 바로 본론으로 ㄱㄱ
#본론
기본 프로젝트에서 간단하게 페이지를 어떻게 이동시키는 것 까지 구현하였다.
SPA의 개념을 조금이나마 이해 할 수 있었으며, 우선 구현한 페이지는 이렇다.
저기 링크를 클릭하게 되면
여기로 이동하고 다시 저기에 링크를 누르면 첫번째 페이지로 돌아가는 방식이다.
아까 구글에 대해서 예시로 들자면, 저기 뷰 로고와 "위 로고는 바뀌지 않습니다" 텍스트는 어느 페이지를 가도 존재한다.
(2개밖에 안되지만) 그렇다면 이거를 굳이 계속 렌더링 할 필요는 없지 않은가?
분석 결과로는 이렇다. 일단 구조에 대해서는 코드를 보며 설명하겠다.
그렇다 페이지 이동간 바뀔 필요가 없는 것에 대해서는 App.vue에 정의를 하면 된다.
스타일에 대해서도 스타일 컴포넌트를 만들 수 있다고 한다.
즉 엄청난 재사용성을 보장한다는 것.
이렇게 수정되는 부분이 컴포넌트이며 필요한 것에 따라 컴포넌트를 갈아끼우는 듯 하다.
뭔가 이전에 진행했던 프로젝트중 하나를 Vue로 만들어 보려 했지만,
DB 이슈 때문에 별도의 API서버를 또 만들어야 할 듯 하다.
근데뭐,,,같은 기능을 한다면 같은 서비스를 이용하는 것이니 그냥 해보려고 한다 (사실 해야한다)