코드(참고3)

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

뷰는 컴포넌트를 기반으로 화면을 구성한다. 원래 컴포넌트는 Vue 변수(이게 클래스야 변수야…)의 component 메서드를 실행하면 컴포넌트가 전역에 등록되고, 이름을 통해 찾아낼 수 있도록 설계되었다. 즉, component 는 본질적으로는 자바스크립트를 이용해 만들어진다. 이렇게 만들어진 컴포넌트 객체의 타입은 Vue 클래스(참고2,3:컴포넌트의 정의)라는 점도 기억해 둘 만하다(참고6).

그래서 보통 프로젝트는 아래와 같이 작성되었다(참고4). Vue 의 component 메서드를 이용해 컴포넌트의 이름을 등록한 뒤 html 에서 해당 이름을 끌어가는 방식이다. 이러한 방식을 전역 컴포넌트(Global component)라고 부른다(참고5).

<div>
...
	<**button-counter**> </**button-counter**>
...
<div>

...

<script>
	// Define a new component called button-counter
	Vue.component('**button-counter**', {
	  data: function () {
	    return {
	      count: 0
	    }
	  },
	  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
	})
</script>

하지만 이렇게 자바스크립트만을 이용해 컴포넌트를 구성하면 프로젝트가 커졌을 때 전역에서 적절한 컴포넌트를 찾아야 하는 등 복잡해진다는 문제가 있다. 그래서 사용하는 것이 .vue 파일이다. 이것을 단일 파일 컴포넌트(Single file component)라고 한다(참고1). 이 파일을 이용하면 화면 컴포넌트별로 깔끔하게 파일을 구성할 수 있어서 직관적이고 아름다운 프로젝트 스캐폴드가 가능하다(from1). 따라서 대부분의 개발자들이 이 방법을 선택한다.

왜 이렇게 과정이 복잡할까? component: 에 넣어주어야 하는 이유는 무엇일까?

parse me : 언젠가 이 글에 쓰이면 좋을 것 같은 재료들.

1. None

from : 과거의 어떤 생각이 이 생각을 만들었는가?

1. ‣

supplementary : 어떤 새로운 생각이 이 문서에 작성된 생각을 뒷받침하는가?

1. None

opposite : 어떤 새로운 생각이 이 문서에 작성된 생각과 대조되는가?

1. None