티스토리 뷰

SW 개발/JavaScript

Vue.js, Hello World 출력하기

지단로보트 2016. 8. 22. 03:55

개요

나는 2011년 모 사내 시스템을 MVVM 패턴의 Knockout으로 개발하면서 상당한 생산성 향상을 경험했다.(심지어 해당 시스템은 닷넷 기반의 클라이언트 애플리케이션이었는데 나는 기어코 WebView를 적용하여 도입하고 말았다.) 데이터 바인딩과 컴포넌트의 개념이 일반적인 닷넷 기반의 클라이언트 개발에 익숙한 개발자들은 전통적인 웹 프론트엔드 개발 방식이 비효율적이라는 생각을 많이 했을 것이다. Knockout은 그러한 불만을 적당히 해결해주는 라이브러리였다. 시간이 흘러 웹 프론트엔드 개발 환경이 더욱 복잡해지면서 Angular, React 등의 본격적인 엔터프라이즈 레벨의 프레임워크가 등장하기 시작했다. 서로가 각자의 장점을 내세워 점유율을 높여가고 있지만 반대로 도입에 필요한 학습곡선이 지나치게 높다는 점, 프레임워크 종속이 너무 크다는 점 때문에 거부감을 느끼는 개발자들도 많다. Vue.jsKnockout와 유사한 MVVM 패턴의 경량 라이브러리(프레임워크가 아니다!)로 굉장히 쉬운 사용 방법으로 앞서 언급한 거인들 사이에서 점유율을 서서히 높여가고 있다. 이번 글에서는 Vue.js로 간단히 Hello World를 출력하는 방법을 소개하고자 한다.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Vue.js 2.0 JavaScript를 로드한다. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.3/vue.min.js"></script>
</head>

<body>
    <!-- Vue.js의 View를 선언한다. -->
    <div id="helloView">
        <p>{{message}}</p>
    </div>

    <!-- 애플리케이션 JavaScript를 로드한다. -->
    <script src="hello.js"></script>
</body>

</html>
  • Vue.js 라이브러리 로드시 head 엘러먼트 내부에 위치해야 한다. body 엘러먼트 내부의 마지막에 위치할 경우 렌더링 되기 전의 View의 모습이 브라우저에 보여질 수 있다.


  • HTML에는 1개 이상 다수의 View를 선언할 수 있다. 선언된 View 내부에서는 Vue.js가 제공하는 애트리뷰트(v-로 시작한다.)와 템플릿({{}}로 표현되는 Mustache 스타일의 템플릿이 기본 제공된다.)을 사용할 수 있다.


  • 각각의 View를 식별하기 위해 id 애트리뷰트를 명시한다. 하지만 class 애트리뷰트 명시도 가능하며 심지어 식별자를 부여하지 않아도 상관 없다. JavaScript 코드에서 ViewModel 선언시 가장 처음에 발견한 View만을 인식하기 때문이다.


  • 애플리케이션 JavaScript 소스 파일은 반드시 body 엘러먼트 내부의 마지막에 로드해야 한다. 그렇지 않을 경우 View가 렌더링되지 않은 상태에서 로드되어 정상적인 실행을 보장할 수 없다.

JavaScript

// 앞서 HTML에서 선언한 View의 id를 명시한다.
var helloView = '#helloView';

// View에 출력될 Model을 명시한다.
var helloModel = {
    message: 'Hello, Vue.js!'
};

// 앞서 작성한 View, Model를 사용하여 ViewModel 오브젝트를 생성한다. 이 시점에 해당 View에 ViewModel이 적용되어 브라우저에 렌더링된다.
var helloViewModel = new Vue({
    el: helloView,
    data: helloModel
});

// ViewModel 오브젝트의 Model로 참조된 오브젝트의 값을 변경하면 실시간으로 브라우저에 새로운 값이 렌더링된다.
helloModel.message = 'Good-bye, Vue.js!';
  • Vue.jsECMAScript 5 기반으로 작성되었다. 이 말은 마이크로소프트 계열 브라우저의 경우 IE 9 이상 만을 지원한다는 의미이다. 여전히 IE 7, 8의 사용 비율이 높게 나타나는 국내에서는 도입 전 고려해야 하는 부분이다. (Angular 2, React 15 또한 IE 9 이상 만을 지원한다.)

참고 글

댓글
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함