[Vue.js] Vue.js 입문 - Vue 인스턴스, mustache(머스태치)의 개념

 

 

 

그 와중에 react, vue.js 등의 기술 스택을 요하는 프로젝트들에 하나둘씩 늘어가고, 그곳에 속속 참여하게 되었다. 그만큼 신기술을 들여오는 회사가 많아진다는 것을 뼈로 느끼게 된 순간들이었다. 그렇다고 언제까지나 '저는 몰라서 못합니다. 그 기술은 다뤄본 적이 없거든요.'라는 말을 내뱉으며 발을 뺄 수는 없는 일이다.

 

회사는 성과를 내야 하는 곳이기에, 학교나 교육원같이 '배운다'라는 개념을 적용하는 것은 적절치 않다는 선배의 말이 떠오른다. 맞는 말이다. '배워서 하겠다'라는 건 너무 터무니없다. 회사에서는 마감 기간에 맞춰 당장의 아웃풋을 내야 하기 때문이다. 결국 실무에서 부딪히며 스스로 익혀야 하는데, 그 또한 해당 기술에 대한 '기초 지식'은 있어야 한다는 전제하에 가능한 이야기라고 생각했다.

 

이대로는 안되겠다 싶어 자바스크립트 프레임워크를 하나 깊이 있게 공부하는 것이 좋다고 판단했다. 그것이 회사, 궁극적으로는 나 자신을 위해 좋다는 것이 확실하기에. 그래서 익히고자 하는 프레임워크를 무엇으로 선택할지 고민을 많이 해봤다. Node.js? React.js? Angular.js?

 

동작 방식은 자바스크립트 프레임워크마다 다르겠지만, 일단 자바스크립트라는 언어 위에 만들어졌다는 건 동일하다. 그래서 상대적으로 입문하기 쉽고, 과거로부터 현재까지의 점유율이 꾸준히 높아지는 프레임워크를 찾아보았다. 그 최종 선택이 나의 경우 'Vue.js'가 되었다.

 

1. Vue.js란?

사용자 인터페이스를 만들기 위한 프론트엔드 자바스크립트 프레임워크이다.

 

Vue.js의 창시자인 Evan You는 Angular.js를 사용하고 있었는데, Angular.js의 좋은 기능만 추려 갖추면서도 좀 더 경량급 프레임워크를 만들고 싶은 생각에 Vue.js를 개발했다고 한다.

 

필자는 React에 입문 레벨로 살짝 발만 담갔었지만, 설치와 실행까지 이어지는 프로세스가 그다지 쉽다고 느끼진 못했다. 하지만 Vue.js는 기존에 해왔던 HTML 소스를 활용하여 개발할 수 있는 구조로, 입문의 벽이 높지 않아 익히기 쉽다는 장점이 있다.

 

2. Vue.js의 특징

① SPA(Single Page Application)

전통적인 Page vs SPA (출처 :   https://wiredelta.com/is-single-page-application-spa-development-worth-it-in-2019/ )

→ Vue.js는 'Single Page Application' 방식으로 동작한다.

 

전통적인 웹 페이지의 렌더링 방식은, 사용자의 액션에 따른 이벤트가 호출하는 페이지를 서버사이드(server side)에서 렌더링 해주는 것이었다. 예를 들어, 스프링 MVC 패턴에서는 로그인하는 페이지, 결제 내역을 보여주는 페이지, 상품을 보여주는 페이지를 일일이 독립적인 JSP로 만들어 관리했다.

 

반면, SPA는 페이지 구성에 필요한 컴포넌트, 요소들을 클라이언트단의 하나의 페이지에 미리 정의해놓는 방식이다. 그리고 그때그때 필요한 데이터만 JSON으로 호출하여 요소들에 렌더링 해준다. 그래서 최초 페이지를 로딩할 때 오랜 시간이 걸린다는 단점을 가지고 있는 반면, 최초 페이지가 로드된 이후라면 데이터 렌더링 시 속도가 상대적으로 빠르다는 장점이 있다.

 

② MVVM 패턴

MVVM 패턴 (출처 :   https://ko.wikipedia.org/wiki/ 모델-뷰-뷰모델   )

MVVM 패턴이란, Model, View, View Model의 세 가지로 구성된 디자인 패턴을 의미한다. 여기서 Model, View, View Model 각각의 의미는 다음과 같다.

 

- Model : 어플리케이션 단에서 사용되는 데이터를 핸들링 하는 부분.

- View : 사용자들이 보게 되는 UI.

- View Model : View를 표현하기 위한 Model. 즉, View에 대한 정의와 View 내에서 사용할 데이터를 처리하는 부분. 주로 View에 상태 변화를 전달.

 

MVC 패턴처럼 Model과 View에 대한 분리가 확실하여 독립성이 높고, View Model이 중간자적 역할을 하여 변경을 최소화할 수 있다는 장점이 있다.

 

 

3. Vue 인스턴스

Vue.js라는 프레임워크의 이름답게 'Vue'라는 함수로 객체를 생성한다. 이 객체에는 지정된 컴포넌트가 어떻게 동작을 하며, 어떤 데이터들을 렌더링 해줘야 하고, 어떤 함수를 사용하는지에 대한 정보(값)이 담기게 된다.

 

객체의 선언 방식은 아래와 같으며, 독립적으로 혹은 특정 변수에 담아 선언할 수도 있다.

new Vue({ 
.... 
});

 

Vue 객체에 담기는 값들은 점진적으로 알아갈 테지만, 입문인 포스팅인 만큼 가장 중요한 몇 가지만 다룬다. 먼저 예제로 사용할 HTML, 자바스크립트 소스이다. 이 소스를 기준으로 설명할 예정.

<!-- HTML 소스 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- Vue.js 라이브러리를 당겨옴 -->
<div id="vue">
</div>

// 자바스크립트 소스
new Vue({
  el: "#vue",
  data: {
    startVue: "Start Vue.js",
    endVue : "End Vue.js"
  },
  methods: {
    sum: function(num1, num2) {
      return num1+num2;
    },
    minus : function(num1, num2){
    	return num1-num2;
    },
    multiple : function(num1, num2){
      return num1*num2;
    },
    divide : function(num1, num2){
      return  num1/num2;
    }    
  }
});

① el (연결할 Vue 객체의 ID)

→ Element의 약자로 어떤 HTML 요소에 Vue 객체를 연결할지를 명시한다. 익숙한 것이 있다면 '#' 기호인데, 제이쿼리나 css에서 요소에 대한 id를 명시할 때 쓰이는 것과 동일한 기능을 한다. 위 예제에서는 id가 'vue'인 요소에 연결될 것임을 명시하는 것이다.

 

② data (컴포넌트에서 사용할 데이터들)

→ Vue 객체에서 사용할 데이터들을 정의한다. 대부분 'key-value' 형식의 JSON 형태로, 여러 개를 동시에 명시할 수 있다. 예제에서는 'startVue', 'endVue'라는 데이터를 사용할 것임을 알 수 있다.

 

③ methods (컴포넌트에서 사용할 함수들)

→ Vue 객체에서 사용할 함수들을 명시한다. data와 마찬가지로 여러 개의 함수를 동시에 명시할 수 있다. 예제에서는 사칙연산을 수행하는 4개의 함수가 선언되어 있다.

 

4. mustache(머스테치)

Vue 객체에 담긴 값을 HTML 요소에 렌더링 할 때 사용된다. Vue.js는 'mustache'라는 템플릿 엔진을 사용하는데,

'{{ 데이터 }}' 형태로 데이터/함수의 값을 출력해 준다. 'mustache'는 '{{}}' 모양이 마치 수염처럼 생겼다고 해서 템플릿 이름으로 정한 것 같다.. ㅎㅎ

 

mustache 템플릿에는 Vue 객체에서 정의된 데이터나 함수 외에, 자바스크립트 문법도 직접 적용하여 사용할 수 있다. 아래 예제는 데이터에서 정의한 3가지의 값(startVue, middleVue, endVue)과 사칙연산 함수의 실행 결과를 출력한 것이다. 데이터는 있는 그대로를 렌더링한데 비해, 사칙연산의 결과는 자바스크립트 코드와 Vue 객체에 담긴 함수의 결괏값을 합쳐서 출력한 것이다.

 

<!-- HTML 소스 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="vue">
  <p>{{startVue}}</p>
  <p>{{middleVue}}</p>
  <p>{{endVue}}</p>
  <p>{{'sum(1+2)=' + sum(1,2)}}</p>
  <p>{{'minus(1-2)=' + minus(1,2)}}</p>
  <p>{{'multiple(1*2)=' + multiple(1,2)}}</p>
  <p>{{'divide(1*2)=' + divide(1,2)}}</p>
</div>

// 자바스크립트 소스
new Vue({
  el: "#vue",
  data: {
    startVue: "Start of Vue.js",
    middleVue :"Middle of Vue.js",
    endVue : "End of Vue.js"   
  },
  methods: {
    sum: function(num1, num2) {
      return num1+num2;
    },
    minus : function(num1, num2){
    	return num1-num2;
    },
    multiple : function(num1, num2){
      return num1*num2;
    },
    divide : function(num1, num2){
      return  num1/num2;
    }    
  }
});

// 출력결과
Start of Vue.js   //  <p>{{startVue}}</p>

Middle of Vue.js  //  <p>{{middleVue}}</p>

End of Vue.js     //  <p>{{endVue}}</p>

sum(1+2)=3        // <p>{{'sum(1+2)=' + sum(1,2)}}</p>

minus(1-2)=-1     // <p>{{'minus(1-2)=' + minus(1,2)}}</p>

multiple(1*2)=2   // <p>{{'multiple(1*2)=' + multiple(1,2)}}</p>

divide(1*2)=0.5   // <p>{{'divide(1*2)=' + divide(1,2)}}</p>

지금까지 Vue.js가 어떤 프레임워크고, 어떠한 특징을 가졌는지, Vue 인스턴스와 mustache 템플릿을 사용한 렌더링 방식에 대해 정리해 보았다.

 

혹시 잘못된 정보가 있다면 피드백 부탁드립니다.

 

긴 글 읽어주셔서 감사합니다 : )