[Vue] 1. Vue 란?

in Devlog on Vue



프론트프레임워크 중 Vue에 대해서 이제 차근차근 알아가보자

1. Vue에 대한 개인적인 생각

알아야 필요성을 느끼기에 우선 Vue에 앞서 SPA개념에 대해서 알아보고 오자.

Vue에 대한 개인적인 사견이다. Front-End/Back-End 개발자가 나눠져서 개발을 하는 곳이 아니고 서버개발자가 View까지 개발 할 경우 프레임워크 구조만 갖춰져 있으면 개발 시 러닝커브는 낮은 것 같다. 필자도 Angular, React를 가볍게 접한 수준이지만 장단점이 있다.

만약 Angular, React, Vue 중에!

회사 내 개발 환경이 다르겠지만 시간, 러닝커브, 유지보수, 인수인계 등을 보고, "자기 자신이 프레임워크 개발을 하면서 팀원 개발자들까지 설득하고 리드 할 수 있는가?" 자문 할 경우… 나는 이런 부분에서 Vue가 매력적이라고 생각된다.



하여튼 예전에 스프링MVC패턴에 View부분을 Angular1처럼 RequrieJS + VueJS를 이용해서 ES5 개발로 SPA를 구현한적이 있는데, 오픈 라이브러리들 중에 함수표현식으로 만든 형태가 아니면 가져다 쓸 수가 없는거 같았다. 그 외에 제한들도 많고 그냥 공부해서 더 잘 쓰는게 더 빠르다.

오픈 라이브러리

// 함수표현식
var vueTable=function(){
  //...로직
}

굳이 Vue를 쓴다면 각 jsp마다 controller.js 파일을 따로 만들어서 사용하거나, 빌드도구랑 vue-cli/Nuxt 등 공부해서 SPA형태로 개발을 하는게 좋다.

[Vue] 2. Vue.js란?

2-1. Vue.js란?

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 프론트 프레임워크 이다. 다른 프론트 프레임워크와 달리 Vue는 러닝커브가 낮다. 서버 개발자들이 맨 처음에 샘플코드들만 비교했을때 거부감이 덜 든다. view에서 템플릿엔진, 형태를 사용하고 있으면 더욱 편하게 느낄 수도 있다. 기존 jsp, js에서 간단하게 ES5 형태로 사용도 가능하고, 타 프론트프레임워크 처럼 Node.js기간 비들 도구를 사용하여 vue-cli를 통해 SPA를 구현이 가능하다.

그리고 Vue는 컴포넌트 개념이면서 지원하는 라이브러리들이 많아 함께 개발속도 및 유지보수가 용이하다고 생각된다.

Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인해보자.

2-2. Vue.js는 이렇게 생겼다.

우리가 흔히 쓰는 ES5에서 사용예제이다. cdn형태

script import

<script src="https://cdn.jsdelivr.net/npm/vue"></script>


jsp

<div id="app">
  \{\{message\}\}
</div>

(스크립트로 인식하는거 같다…)

js

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})


JSFiddle 예제를 볼수 있다.

참고