[JAVASCRIPT] - vue.js로 차트 만들기(1)

Vue.js를 통하여 차트를 구현하는 간단한 프로젝트를 만들고자 한다.
오늘은 Vue.js에 대한 기초 설정과 문법들을 알아보는 첫번째 포스팅이다.

 

---

Vue.js

Vue는 사용자 인터페이스를 만들기 위한 프레임워크이다.

MVVM(Model-View-ViewModel) 패턴을 따르며 어플리케이션 로직과 UI 분리를 위해 설계되었다. 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는 데에 목적이 있다.

양방향 데이터 바인딩을 지원하며 가볍고 빠르다.

문법이 단순하고 간결하여 초기 학습 비용이 낮고 접근성이 좋다.

 

MVVM 패턴?

Backend와 Client의 마크업 & 데이터 표현단을 분리하기 위한 MVC 패턴 방식에서 기인된 방식으로, Model의 값들을 ViewModel에 넣어 로직을 수행한 결과값을 View를 통해 유저에게 보여주는 패턴이다.

 

• Model: 실제 데이터가 있는 곳이다.
• View: 사용자들이 보는 화면이다. 사용자들이 뷰와 상호작용을 할 수 있다.
• ViewModel: 뷰 모델은 공용 속성과 명령을 노출하는 뷰의 추상화이다. 뷰 모델은 모델의 데이터 상태로 설명되었다.

---

사용해보기(Visual Studio Code)

1. Node.js 설치하기(https://nodejs.org/ko/)
   Node.js가 설치되면 npm package manage가 설치된다.

2. 이 npm 명령어로 Vue.js를 설치한다.

3. 터미널에서 npm install -g @vue/cli 입력

4. vue create [프로젝트 이름] 입력

5. Default Vue 2 선택하여 설치(Vue 2는 템플릿 기반, Vue 3는 플러그인 기반)

6. cd [프로젝트 이름]을 통해 경로 이동 후 npm run serve로 실행

 

실행에 성공한 모습

• <template> : 컴포넌트 템플릿 정의
• <script> : 스크립트 작성
• <style> : 스타일링 정보 작성

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',	// 컴포넌트 이름
  components: {	// 컴포넌트 등록
    HelloWorld
  }
}
</script>

 

---

알아보기

el 옵션

<div id="app">
</div>

new Vue({
    el: "#app"	// el: "css 선택자" 또는 HTML Element. Vue가 적용될 요소 지정
});

 

data 옵션

<div id="app">
	<h1> {{msg}}</h1>	// mount시 value 값으로 변경
</div>
new Vue({
    el: "#app",
    data: {		// 객체 또는 함수(함수일경우 data(), return 사용). Vue에서 사용되는 정보 저장
    	msg : "Hello,"
    }
});

 

텍스트

• {{ }} : 데이터 바인딩의 기본 형태. 문자열 보간법, 인터폴레이션, 문자열 표현
• v-once: 데이터에 대한 것을 딱 한번만 수행하고 반영하지 않음

vue가 갖는 directive

• v-once: 데이터에 대한 것을 딱 한번만 수행하고 반영하지 않음
• v-text: 데이터 속성의 html을 escape 처리
• v-html: 데이터 속성의 html을 파싱하여 처리
• v-model
  • 양방향 바인딩 처리를 위한 사용
    - 양방향: 화면 입력을 스크립트로, 스크립트의 변화를 화면으로

<div id="app">
	<input type="text" v-model="msg">	//양방향: model의 값을 가져온 뒤 사용자 조작을 통해 값이 변경되면 뷰의 인스턴스에 직접 접근하여 변경
    <div>{{msg}}</div>	// 단방향: msg의 값을 표시, 직접 바꿀 수 없다.
</div>
<sciprt>
    const v = new Vue({
    	el: "#app",
        data: {
        	msg: 'Hello'
        }
    });
</script>

 

• v-bind
  - Element 속성 바인딩 처리를 위한 사용
  - 속성값이 문자열인 경우 v-bind를 생략할 수 있다. Vue 인스턴스인 경우 작성
  - []는 Vue 인스턴스로 간주

<div id="app">
    <div v-bind:id="id"></div>
    <div v-bind:[key]="btnId"></button>
</div>
<script>
    const v = new Vue({
    	el: "#app",
        data: {
            id:'test',
            key:'id',
            btnId: 'btn'
        }
    });
</script>

 

• v-show
  - 조건에 따라 엘리먼트를 화면에 표시
  - style 속성의 display를 변경

<div id="app">
    <div v-show='view'>컨테이너</div>
</div>
<script>
    const v = new Vue({
    	el:"#app",
        data: {
        	view: 'true'
        }
    });
</script>

 

• v-if/esle
  - 조건에 맞는 경우 화면에 요소들을 랜더링

 

• v-for
  - 배열이나 객체의 반복에 사용
  - v-for: "요소변수 이름 in 배열"
  - v-for: "(요서변수 이름, 인덱스) in 배열"

 

 

다음 장에는 상태를 관리하는 Vuex에 대해 포스팅할 예정이다.

 

---

 

#References

모델–보기–뷰모델 - 위키백과 (wikipedia.org)

Model–view–viewmodel - Wikipedia

시작하기 — Vue.js (vuejs.org)

시작하기 — Vue.js