[삽질] vue.js + spring boot 통합 환경 -1-

사실 vue.js와 spring boot 를 통합하는 글은 많이 있다.

 

그러나 대부분의 예제는 backend로 spring boot를, frontend로 node.js를 사용한다.

npm run serve

 

우선 공식 홈페이지에서 안내하는 vue.js 사용법에 대해 한 번 살펴보자.

 

vuejs.org/v2/guide/installation.html

Installation — Vue.js

크게 3가지 방법 (Direct Script include / NPM / Vue CLI)가 있다. 여기서 Direct Script Include를 살펴보자

 

node.js 서버를 올리는 방법 외에도 기존의 js 파일을 script tag로 불러오는 것처럼 간단하게 불러올 수 있다.

 

---

우선 vue.js를 사용할 때 왜 node.js에 올려서 사용하는지 생각해보았다. 여러가지 이유가 있겠지만 가장 큰 이유는 javascript의 compile이 가능한 환경이기 때문일 것이다.

forum.vuejs.org/t/how-can-i-serve-vue-app-without-node-js/38801

How can I serve Vue app without Node.js?

포럼에 올라온 답변에 따르면 vue.js의 실행에서는 node.js를 필수로 요구하지 않는다. npm을 통해 build가 된 이후에는 static file 로 컴파일이 되며 이러한 정적 리소스 파일들은 전통적인 방법처럼 이용할 수 있다.

 

dev.to/arswaw/create-a-lightweight-componentized-spa-without-node-569j

Use Vue to create a SPA without any Node modules

관련하여 튜토리얼을 하나 찾았다. 댓글을 보면 spring boot 환경에서 동작하는 것을 알 수 있다. 즉, 완전히 불가능한 접근 방법은 아닌 듯 하다.

 

---

 물론 vue.js 를 사용하는 방법 중에서 가장 범용적인 방법은 node.js에 올리는 것이다. 그러나 남들이 일반적으로 node.js를 사용한다고 해서, vue.js를 사용하기 위해 node.js를 도입하는 것은 주객이 전도되는 상황이다. 운영되는 서버를 node.js 와 tomcat에서 tomcat으로 일원화함으로써 관리포인트를 줄이자는 차원에서 vue.js를 spring boot 에 올려서 사용하는 방법에 대해 리서치를 진행할 것이다.

 

---

왜 Javascript Compile이 필요한가?

 

사실 컴파일이 필요가 없으면  build를 할 필요도 없고, 그저 다운로드 받아서 올려서 쓰면 된다. 간혹 이거를 편법으로 생각하는 분들이 있는데, 공식 사이트에서 가이드하는 정식 사용법 중 하나인 것을 알자. vue.js는 node.js만을 위한 프레임 워크가 아니다.

그럼에도 불구하고 node.js 상에서 구축을 하는 것이 여러모로 편리한데, 그 중 하나는 JSX 문법일 것이다.

 

vuejs.org/v2/guide/render-function.html#JSX

Render Functions & JSX — Vue.js

github.com/vuejs/jsx

vuejs/jsx

 

render() {
  return <input
    type="email"
    placeholder={this.placeholderText}
  />
}

Jquery나 바닐라 Javascript로 개발한 사람은 위 구문을 기존 방식으로 짤 경우 소스 코드가 엄청 지저분해진다는 것을 알 것이다. JS상에서 html 태그의 원형(엄밀히 말하면 xml)을 그대로 사용할 수 있다면 코드의 가독성과 생산성이 엄청나게 증가할 것이다. 

 

위와 같이 jsx 문법을 사용하여 작성된 스크립트를 node.js 없이 spring boot에서 static js 파일로 동작하게 개발환경을 구성하고자 한다.