VueJS

JSP나 HTML 에서 Vue Component 사용하기

최성헌 2021. 11. 20. 23:01

Vue 공식 가이드에서 컴포넌트를 등록할 때 아래와 같이 HTML 코드를 template 에 문자열로 만들어서 사용하도록 가이드가 되어 있다.

// 등록
Vue.component('my-component', {
  template: '<div>사용자 정의 컴포넌트 입니다!</div>'
})

// 루트 인스턴스 생성
new Vue({
  el: '#example'
})

 

HTML 코드가 짧다면 사용할 수도 있겠지만 조금만 내용이 많아져도 코드가 지져분해지며 가독성도 매우 떨어지게 된다.

그래서 HTML 코드는 html 파일로 만들어 작성하고 동적으로 페이지를 불러와 컴포넌트를 만드는 방법을 소개한다.

Node 기반에서 Vue를 이용한다면 이러한 수고러움이 필요가 없겠지만 실무에선 생각보다 Node 기반 환경을 구성하기가 쉽지 않은 경우가 많이 존재하기 때문에 방법을 찾아보게 되었다.

 

먼저 기본이 되는 메인 페이지는 아래와 같이 구성되어 있다.

<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/vue/js/common.js"></script>

</head>
<body>
    <h1>Vue Home</h1>
    <div id="homeContents">
        <div>{{ message }}</div>
        <first-comp></first-comp>
        <second-comp></second-comp>
    </div>
</body>
</html>
<script src="./components/firstComp.js"></script>
<script src="./components/secondComp.js"></script>
<script src="home.js"></script>

vue.js 와 jquery 를 로드한것을 빼고 각 스크립트 코드는 간단하기 때문에 필요한 부분만 코멘트를 달도록 하겠다.

 

[ common.js 파일 ]

/** 공통 모듈 제공 **/
var commonUtils = {
    // 컴포넌트에서 template html load 기능을 제공
    componentLoader: function(obj, url) {
        var deferred = $.Deferred();
        $.get(url, function(html) {
            obj.template = html;
            deferred.resolve();
        })
    
        return deferred.promise();
    }
}

 

[ firstComp.js 파일 ]

var firstComp = {
    template: '',
    load: function() {
        return commonUtils.componentLoader(this, '/vue/components/firstComp.html')
    },
    data: function  () {
        return {
            message: 'first welcome'
        }
    }
}

 

[ sendComp.js 파일 ]

var secondComp = {
    template: '',
    load: function() {
        return commonUtils.componentLoader(this, '/vue/components/secondComp.html')
    },
    data: function () {
        return {
            message: 'second welcome'
        }
    }
}

 

firstComp와 sendComp의 load 함수는 컴포넌트 생성시 템플릿을 html 파일에서 불러오기 위한 코드다.

컴포넌트에서 사용되는 data는 함수형으로 만들어야 된다는 점은 주의하기 바란다.

template 에 적용되는 html 파일들은 다음과 같다.

 

[ firstComp.html ]

<div>
    <div>first component: {{ message }}</div>
</div>

 

[ sendComp.html ]

<div>
    <div>second component: {{ message }}</div>
</div>

 

마지막으로 메인 페이지에 적용할 Vue 객체를 만드는 스크립트는 아래와 같다.

[ home.js ]

$.when(firstComp.load(), secondComp.load()).then(function() {
    var appHome = new Vue({
        el: '#homeContents',
        components: {
            'first-comp': firstComp,
            'second-comp': secondComp
        },
        data: {
            message: 'main welcome...'
        }
    });
})

메인 화면에서 보았듯이 컴포넌트들이 모두 로드가 된 이후에 메인 화면에 Vue 를 적용할 수 있기 때문에 JQuery 의 when 기능을 이용해 fristComp와 secondComp 가 모두 로드가 된 이후에 Vue 객체를 생성하도록 하였다.

 

셈플로 작성한 코드의 최종 결과물이 아래와 같이 나오게 된다.