Introduction
Icon
Vue.js 의 초기 개발환경은 그다지 어려운 설정이 없습니다.
Angular 상위 버전(2 이상)에서는 Node.js 가 필수이지만 Vue.js는 일반 Javascript 라이브러리처럼 사용할 수 있고, Node.js로 프로젝트를 구성할 수도 있습니다.
간단한 개발 프로젝트에서는 텍스트 에디터와 대부분 사용하는 브라우저 Chrome에서 개발자 도구 설치만 하면 개발 할 수 있습니다.
Prerequisite
Icon
Text Editor - Notepad, Atom, Sublime Text, VSCode 등...
Browser - Chrome
1. Hello Vue.js!
모든 프로그래밍 언어나 프레임워크에서 등장하는 'Hello Vue.js!' 를 출력하는 예제를 만들어보겠습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <title>Vue Sample</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); </script> </body> </html> |
Javascript의 기초지식이 있고 jQuery 정도 사용해 보았다면 해당 코드는 해석하기 쉽습니다.
new Vue 구문에서 무언가 인스턴스를 생성하고 el : '#app' 에서 element ID가 app이며, 데이터로는 message라는 key로 'Hellow Vue.js!' 라는 값을 가지고 있는 것 같습니다.
그 위에는 app이라는 ID를 가진 div가 있고 그 태그 안에 {{ message }} 와 같이 작성되어있습니다.
index.html 파일명으로 해당 소스를 저장 후 Chrome Browser 에서 실행해 보겠습니다.
결과는 예상대로 Hello Vue.js!가 출력되었습니다.
하지만 콘솔을 확인해 보면 Vue 확장도구를 다운받으라는 메시지와 개발자 모드에서 Vue를 실행하고있으니 상용화 모드로 전환? 하라는 메시지가 있습니다.
위 메시지가 나오지 않도록 아래 장에서 Vue 개발자 도구를 설치해 보겠습니다.
2. Vue 개발자 도구 설치 및 사용방법
Chrome 웹 스토어 에서 vue를 검색합니다.
해당 확장프로그램을 설치하면 위 이미지 아이콘으로 확장프로그램을 실행할 수 있습니다.
위에서 사용한 Hellow Vue.js! 예제에서 확장프로그램을 실행해봅니다.
Vue.js를 사용하고 있지만 찾을 수 없다고 하네요. 이 이유는 해당 예제는 서버에서 띄운 것이 아니라 파일 시스템에서 접근하여 브라우저로 실행했기 때문입니다.
브라우저 주소창에 http:// 와 file:///로 구분할 수 있습니다.
확장 프로그램 관리에서 파일 URL에 대한 액세스 허용을 허용으로 상태변경 합니다.
3. Vue 개발자 도구 사용 방법
2장 까지 잘 따라오셨다면 이제 Vue 확장 프로그램을 실행할 수 있습니다.
<Root> 는 최상위 컴포넌트를 나타내며 클릭 하게되면 그 아래로 존재하는 속성들을 확인할 수 있습니다.
그 이외에 'Vuex', 'Events', 'Refresh' 탭을 사용하여 각 내용들을 확인할 수 있습니다.
아직 컴포넌트의 내용을 다루진 않았지만 다른 코드를 살펴보겠습니다.
|
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 32 33 34 35 36 37 38 39 40 |
<html> <head> <title>Vue Component Scope</title> </head> <body> <div id="app"> <my-component1></my-component1> <my-component2></my-component2> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> // 첫 번째 컴포넌트 내용 var cmp1 = { template: '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>', data: function() { return { cmp1Data : 100 } } }; // 두 번째 컴포넌트 내용 var cmp2 = { template: '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}</div>', data: function() { return { cmp2Data : cmp1.data.cmp1Data } } }; new Vue({ el: '#app', // 지역 컴포넌트 등록 components: { 'my-component1': cmp1, 'my-component2': cmp2 } }); </script> </body> </html> |
컴포넌트를 선언해 사용하면 위와같이 컴포넌트 목록과 그 안의 속성을 볼 수 있습니다.
Conclusions
이제 Vue를 개발하기 위한 기본 환경을 갖추었습니다.
다음 장에서는 Vue를 이용한 화면을 개발하기 위한 필수 단위 인스턴스 & 컴포넌트에 대해서 알아보겠습니다.
출처: <http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8553261>
