본문 바로가기
frontend/vue

[Hoon] Vuejs강의 - Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 I

by 훈즈 플로거 2020. 7. 21.

Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들

 

Vue Router 기본편에서, Vue 는 angularjs처럼 templateUrl 을 template 부분에 활용할 수 없다고 하였는데요. 그럼, Vue 에서 컴포넌트 템플릿을 정의하는 방법들에는 어떤한 것들이 있는지 자세히 알아 보도록 하겠습니다.

 

https://vuejs.org/2015/10/28/why-no-template-url/

 

Why Vue.js doesn't support templateURL — Vue.js

Vue.js - The Progressive JavaScript Framework

vuejs.org

Vue 의 저자 에반 유의 입장도 정리해 보았었는데요. 요약해 보면,

  1. 컴포넌트 입장에서 html 과 js 코딩이 분리 되지 않도록 하는 것이 더 중요하다.
  2. templateURL 방식은 개발 중에는 편리하지만, 상용환경에 배포하려고 할 때 비용이 많이 듭니다.
  3. Webpack , Browserify 와 같은 묘듈 번들러를 사용해서 해결하기를 추천하고 있습니다.

이번 시간에는 Vue.js 에서 컴포넌트 템플릿을 정의하기 위해 지원되는 방법들에 대해 자세히 알아보도록 하겠습니다.

# Plain strings

  • String 문자열안에 템플릿을 정의
  • Vue Component 템플릿을 정의하기 위한 가장 심플하고 빠른 방법
  • Component 의 템플릿 부분에 한줄로 문자열을 기록하는 방법
  • 가독성이 떨어지고, 코딩량이 많아지면 개발할 때도 어려워 지는 단점

Details

  • Needs polyfill or transpile? No
  • Need runtime template compiler? Yes

Runtime template compiler - https://kr.vuejs.org/v2/guide/installation.html
Full, Compiler, Runtime, UMD 버전 등이 있으며,
UMD : UMD 빌드는 script 태그를 통해 브라우저에서 직접 사용할 수 있습니다.
https://unpkg.com/vue의 Unpkg CDN의 기본 파일은 Runtime + Compiler UMD 빌드 (vue.js)입니다.

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-checkbox></my-checkbox>
</div>
Vue.component("my-checkbox", {
  template:
    '<div><input type="checkbox" id="checkbox" @click="check"/><label for="checkbox">{{ checked }}</label></div>',
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app",
});

여기에 추가로 \ 이용해서, 가독성을 좀 더 높일 수 있는 방법이 있습니다.

 

Vue.component("my-checkbox", {
  template: '<div>\
  	<input type="checkbox" id="checkbox" @click="check"/>\
    <label for="checkbox">{{ checked }}</label>\
  </div>',
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app"
});

 

# Template literals

Details

  • Needs polyfill or transpile ? Yes
  • Need runtime template compiler? Yes

ES2015(es6) 를 지원하지 않는 브라우저를 위해서는 polyfill 과 같은 추가적인 모듈이 필요로 합니다.

Vue.component("my-checkbox", {
  template: `
  	<div>
    	<input type="checkbox" id="checkbox" @click="check"/>
    	<label for="checkbox">{{ checked }}</label>
    </div>
 `,
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app",
});

 

# X-templates

  • 이 방법은 html 파일의 script 테그 안에 template 코드를 정의합니다.
  • text/x-template 타입의 script 안에 template 코딩하고 id 를 이용해서, component 에서 참조할 수 있습니다.
  • 장점은 Html 파일로 template markup 을 작성할 수 있으므로, 가독성과 생산성이 높아집니다.
  • 단점은 Vue Component 에서 template 부분이 분리가 됩니다.

Details

  • Needs polyfill or transpile ? No
  • Need runtime template compiler? Yes
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <my-checkbox></my-checkbox>
</div>
<script type="text/x-template" id="checkbox-template">
  <div>
    <input type="checkbox" id="checkbox" @click="check"/>
    <label for="checkbox">{{ checked }}</label>
  </div>
</script>
Vue.component("my-checkbox", {
  template: "#checkbox-template",
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app",
});

# Inline templates

  • 컴포넌트가 사용되어 질때 상위 템플릿내에 컴포넌트 template 을 정의합니다.
  • 장단점은 X-templates 과 유사하지만, html 의 document body 에 template 정의 되므로, SEO(Search engine optimization) 를 위해 컨텐츠에 대한 크롤링이 가능해 집니다.
  • 컨텐츠 크롤링은 내부서비스나 보안이 주요한 서비스에서 무의미 하지만, 포털에 컨텐츠가 노출되는 것이 주요한 서비스의 경우 반드시 필요합니다. SFC환경의 Single Page Application 으로 개발하면 SEO 가 힘들게 되므로, Vue.js 에서도 이러한 것을 위해 Nuxt.js 를 지원하고 있습니다. Nuxt 를 쓰지않아도 Inline templates 을 통해 컨텐츠를 검색엔진에 노출할 수 있습니다.

Details

  • Needs polyfill or transpile ? No
  • Need runtime template compiler? Yes

Inline templates 과 x-templates 은 백엔드 프레임 워크 (예 : Laravel Blade)의 템플릿 엔진과 함께 사용할 수 있습니다.

<div id="app">
  <my-checkbox inline-template>
    <div>
      <input type="checkbox" id="checkbox" @click="check" />
      <label for="checkbox">{{ checked }}</label>
    </div>
  </my-checkbox>
</div>
Vue.component("my-checkbox", {
  data() {
    return { checked: false };
  },
  methods: {
    check() {
      this.checked = !this.checked;
    },
  },
});

new Vue({
  el: "#app",
});

 

※  Vue.js 에서 컴포넌트 템플릿을 정의하는 방법들 II 에서 계속 ...

 

 

bit.ly/3fXOzon

 

인프런 인강 선착순 30%(7,700원) 마지막 할인 쿠폰 - Vue.js 핵심 강의!

강좌명 - [Vue.js 입문] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 실습 인프런 인터넷 강의 선착순 100명 30% 할인쿠폰! (7,700원으로 수강) 강의 수강평도 부탁드립니다. bit.ly/2TtRHis [Vue.js 입문..

plogger.tistory.com

bit.ly/2TtRHis

 

[Vue.js입문~초급] Javascript 초보 Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 - 인프런

이 강의는 초보 Javascript 개발자가 직접 Real 웹앱을 개발할 수 있는 개발자가 되는 것에 초점을 맞추고 있습니다. 이 강의를 수강하시면 Vue.js 와 관련된 기본적인 개념부터 Real 웹앱 개발을 해 볼

www.inflearn.com

출처

 

[Vuejs 공식홈페이지] https://kr.vuejs.org/v2/guide/components-edge-cases.html#템플릿을-정의하는-다른-방법

[VuejsDevelopers 블로그] https://vuejsdevelopers.com

댓글2

  • 인프런학생 2020.08.14 11:40

    선생님 안녕하세요 선생님이 올리신 인프런 vue강의들으려고하는데
    HTML CSS JS의 기본선행지식이 필요할까요?
    답글

    • Favicon of https://plogger.tistory.com 훈즈 플로거 2020.08.14 15:54 신고

      안녕하세요. 강의를 학습하는데는 딱히 선행지식이 없으셔도 될 만큼,
      기초부터 정말 쉬운내용과 예제로 교육을 진행합니다.
      Front-end 쪽 개발이나 지식이 없으셔도, 필요하면 강의를 반복학습함으로써,
      Vue.js 로 Front-end 개발을 시작할 수 있을 것으로 생각됩니다.
      학습하시고, 수강평도 남겨주시면 강의를 준비하는 입장에서 도움이 될것 같습니다.
      감사합니다.