Vue : 기본페이지를 띄웠다

Node.js를 해본사람이라면 Vue.js로 수평이동이 나름 수월하다는데,,
웹프레임워크라고는 Spring밖에 할 줄 몰라서 기본적인 구조부터 이해하느라 조금 애를 먹었다 (사실 지금도 완벽하지는 않다)

나의 공부방법은 기존의 프로젝트를 래퍼런스로 해서 Vue프로젝트로 이식하는 것이다.
그리고 프로젝트파일을 한 4번 지웠다가 5번 다시깔며 드디어 첫페이지만 이식에 성공했다.

좌 : Spring         우 : Vue

일단 Spring 프로젝트에서 header와 footer에 해당하는 요소를 분리하여서 오른쪽 Vue 페이지에는 현재 3개의 컴포넌트가 존재하는 상황이다.

Vue로 옮기면서 몇가지 딜레마가 생겼다.

1. DB를 다녀올 수 없다.
당연하다 Vue는 프론트엔드를 중심으로하는 프레임워크기 때문에 DB를 다녀오는 백엔드서버가 별도로 필요하다.
구글링해보니 Express서버나, php서버 등등 여러 방식을 소개하는데 나는 Spring으로 갈것이다.

2. 스타일시트가 너무 중구난방이다
이건 제작에 있어 실수다.
Style이 통합되지 않고 페이지마다 그 구현이 조금씩 다르다.
통일된 Style을 운용할지, 아니면 스타일 컴포넌트를 분리할지, 조금 고민이다.


이제 페이지를 띄우고 컴포넌트가 뭔지 알았으니,
url를 입력했을 때 다른 페이지를 리턴하는 Routing 차례이다.

Vue에서는 다른페이지를 통째로 리턴하는게 아닌, 즉 DOM은 유지가 된체 Component를 갈아 끼우는 형태이다.

다음시간엔 Routing으로 포스팅해야겠다