2.1.1 Vue 인스턴스 루트

크고 작음을 떠나 모든 Vue 애플리케이션 중심에는 ‘루트 Vue 인스턴스’가 있습니다. 짧게는 그냥 Vue 인스턴스라고도 합니다. 루트 Vue 인스턴스는 뷰 생성자인 new Vue()로 생성할 수 있습니다. 생성자는 HTML 서식을 컴파일하고, 인스턴스 데이터를 초기화하고, 데이터를 생성하고, 애플리케이션을 상호 작용형으로 만들어 주는 이벤트들을 바인딩하면서 애플리케이션을 가동시킵니다.

Vue 생성자는 옵션 객체(new Vue({ /* 옵션 */ }))라는 자바스크립트 객체를 하나 받습니다. 애플리케이션을 시작하는 데 필요한 Vue 생성자의 모든 것을 객체에 채워 넣는 것은 우리가 할 일이지만, 처음에는 el 옵션 하나에만 초점을 맞추겠습니다.

el 옵션은 Vue가 애플리케이션을 적용할 DOM 요소(즉, el)를 지정합니다. Vue는 HTML에서 해당 DOM 요소를 찾아 애플리케이션 적용 지점으로 사용합니다.

코드 2-1은 웹 저장소 애플리케이션의 시작 부분입니다. 쉽게 따라 할 수 있게 이 장에서는 내려받을 수 있는 파일로 각 코드를 첨부했습니다. 하지만 애플리케이션을 실행시키려면 각각의 단편 코드를 합쳐 index.html 파일 하나로 만들어야 합니다. 책을 진행하면서 index.html 파일이 점점 커지는 것은 아닌가 하는 의문이 들 수도 있습니다. 이후 장에서 애플리케이션을 여러 파일로 나누는 방법을 알아보겠습니다.

이 장 완성본 애플리케이션을 보고 싶다면 2장 폴더에 있는 index.html 파일 코드를 살펴보세요(코드를 아직 내려받지 않았다면 부록 A를 참고하세요). 이제 우리의 첫 Vue 애플리케이션을 만들어 봅시다.