자바스크립트 프레임웤 vue.js 흘끗보기

웹 관련 기술은 발전도 빠를뿐더러 다양하고, 광범위해서 사람을 늘 겸손하게 만든다. 약 한두달전에 vue.js라는 자바스크립트 프레임웤을 알게 되었다. 언제 나왔는지 모르지만 버전이 2.x인 것을 보면 꽤 된 듯하다. 살짝 살펴보니 웹서비스 기반의 솔루션 혹은 웹사이트에 적합한 프레임웤인듯 했다. 이걸 이제야 알다니...

높은 통합성

서버상 MVC 프레임웤들은 각각 기능들을 잘 갖추고 있지만 고유의 프로그램언어에 종속되어 있다. 어떤 프로젝트들은 기능상, 비용상 혹은 숙련된 개발자 수급상 다른 프로그램언어 기반의 프레임웤으로 시스템을 재 구축하는 것이기도 하는데, 이때 대개의 경우 다른 언어로 구현된 모듈들은 폐기가 된다. 

그러나 자바스크립트상에서 MVC관련 기능들이 제공된다면 서버가 어떤 프로그램언어를 사용했는지, 어떤 프레임웤으로 구성되었는지 등, 어떤 것과도 아무 상관없이 하나로 통합해서 시스템을 구축할 수 있다고 본다. 

간단한 예

예전에 웹페이지를 구성할 때 까다로운 것중 하나가 여러개의 <select>가 연계되서 동작하는 것을 구현하는 것이었다. 예제로 vue.js를 이용해서 구성해봤다. 구성하고자 하는 것은 평창동계올림픽이 생각나서 경기종목을 분류에 따라 선택하고 종목코드값을 구하는 것이다.

첫번째 <select>항목중 하나를 선택하면(위의 그림상 'ice') 선택항목에 따라 두번째 <select>의 <option>들이 정해지고, 이어서 두번째 <select>항목중 하나를 선택하면 세번째 <select>의 <option>들이 정해진다. 마지막으로 세번째 <select>항목중 하나를 고르면 선택한 항목의 코드값이 표시된다.

예제 코드와 동작해보기는 아래 웹페이지에서 가능하다.

https://jsfiddle.net/jaeda/76urb5La/1/

v-for, v-model

'v-for', 'v-mode'은 익숙하지 않은 HTML element의 속성이다. 이 글은 단순히 vue.js를 소개하는 것이니, 간단히 설명하려 한다. 

<div id="app">

  <form>

    <fieldset>

      <legend>Welcome to pyungchang !!</legend>

      <select v-model="category">

        <option v-for="(categories, category) in sports">{{category}}</option>

      </select>

      <select v-model="type">

        <option v-for="(types, type) in sports[category]">{{type}}</option>

      </select>

      <select v-if="sports[category]" v-model="code">

        <option v-for="(name, code) in sports[category][type]" :value="code">{{name}}</option>

      </select>

    </fieldset>

  </form>

  <div>

    {{category}}, {{type}}, {{code}}

  </div>

</div>

위의 코드,  <select v-model="category">에서 'v-model'의 의미는 <select>의 값을 어떤 변수 'category'와 짝을 맺는 의미로 <select>의 값이 바뀌면(선택항목을 바꾸면) 'category'의 값도 바뀐다. 거꾸로 'category'의 값이 바뀌면 <select>의 값도 바뀐다. 

<option v-for="...">에서 'v-for'의 의미는 일반 프로그램언어의 'for'구문과 유사하다. 샘플코드의 의미는 어떤 변수 'sports[category]'가 갖고 있는 항목수만큼 반복을 하는데, 항목이 key-value이면 value값을 'types'로 key값을 'type'로 설정한다.

':value'를 보면, 앞에 세미콜론이 있는 것이 특이하다. 여기서 의미는 <option>의 'value'속성을 'code'에 있는 값으로 설정하라는 의미이다.

분리된 데이터 영역

new Vue({

  el: '#app',

  data: {

    category: undefined,

    type: undefined,

    code: undefined,

    name: undefined,

    sports: {

      snow: {

        skie: {

          'C001': 'alpine',

          'C002': 'nordic',

          'C003': 'cross contry',

          'C004': 'biathlon'

        },

        board: {

          'C011': 'snowboard'

        }

      },

      ice: {

        individual: {

          'C021': 'figure skating',

          'C022': 'speed skating'

        },

        team: {

          'C031': 'ice hockey',

          'C032': 'curling'

        }

      },

      sliding: {

        individual: {

          'C041': 'skeleton'

        },

        team: {

          'C051': 'bobsleigh',

          'C052': 'luge'

        }

      },

      'no item':undefined

    }

  }

})

위의 예제 코드에서 'data'로 표시된 부분으로 페이지에서 다루는 데이터들이 완전히 분리되어 있다. 이 데이터들은 vue.js에서 정의한 HTML element 혹은 기존 element에 추가된 속성들에 의해 사용되거나 처리된다.  

앞서 설명된 'category',  'sports[category]'등의 변수들은 이곳에서 선언되어 있다. 좀더 설명을 하면 첫번째 <select>항목들중 'ice'라는 항목을 선택하면 'category'변수에는 'ice'값이 들어가고 sports[category] = 데이터 항목들중 'ice: {...}'부분을 가리키게 된다.

마치며

여기서 소개한 부분을 훨씬 뛰어넘는 좋은 기능들이 많은 프레임웤으로, 특히 마이크로서비스등으로 명명되는 웹서비스 기반의 솔루션을 구축하는데 잘 사용될 도구라 생각된다. 마지막으로 vue.js의 홈페이지는 다음과 같다.

https://vuejs.org