Vue.js란 MVVM패턴을 기반으로 한 화면단 라이브러리
특징
1. 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공, 관련 API를 지원하는데 궁극적인 목적을 지님
2. 단방향 데이터 흐름(부모->자식), 양방향 데이터 바인딩을 제공한다.
3. 컴포넌트 간 통신의 기본 골격은 단방향 데이터 흐름을 지님
4. Augular와 React 보다 가볍고 빠르며 문법이 단순하고 초기 학습 비용이 낮음
MVVM 패턴이란?
Backend 로직과 client 의 마크업과 데이터 표현단을 분리하기 위한 구조이며 MVC 패턴의 방식에서 기인함, 간단하게 생각하면 화면 앞단의 화면 동작 관련 로직과 뒷단의 DB 데이터 처리 및 서버 로직을 분리하여 뒷단에서 넘어온 데이터를 Model 에 담아 View 로 넘겨주는 중간지점
Vue.js 로 Hello Vue 출력
<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>Vue 인스턴스
Vue 인스턴스는 Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다.
가장 처음에 시작하는 기본 판이다.
위의 코드로 예시를 들어보면
<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', // el 태그
data : { // data 속성
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>Vue 인스턴스 생성자
- new Vue() 로 인스턴스를 생성할 때 생성자는 Vue이다.
- Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근이 가능하다.
- 생성자를 생성하는 이유는 Vue로 개발할 떄 필요한 기능을 미리 생성자에 정의, 사용자가 그 기능을 재정의하며 편리하게 사용하도록 하기 위해서이다.
인스턴스가 화면에 적용되는 과정
- 뷰 라이브러리 파일 로딩
- 인스턴스 객체 생성(옵션 속성 포함)
- 특정 화면 요소에 인스턴스를 붙임
- 인스턴스 내용이 화면 요소로 변환
- 변환된 화면 요소를 사용자가 최종 확인
ex)
1. Vue 라이브러리 파일이 로딩
2. new Vue() 로 뷰 인스턴스를 생성 (여백 종이) + 옵션 속성(el, data)
3. 생성한 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점 지정 => #app은 div id가 app 인 곳
4. data 속성에 message 값을 정의 하여 카멜기법을 사용 {{message}}를 선언해 연결한다.
5. 화면에 데이터가 뿌려지는것을 확인(message에 값이 뿌려지는지)
뷰 인스턴스 옵션 속성
- template : 화면에 표시할 HTML, CSS 등 마크업 요소를 정의
- methods : 화면 로직 제어와 관계된 메서드를 정의, 마우스 클릭 등 이벤트 처리와 관련된 전반적인 이벤트와 화면 동작과 관련된 로직 추가
- created : Vue 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
뷰 인스턴스의 라이프 싸이클 초기화
인스턴스가 생성될 때 아래의 초기화 작업을 수행한다.
- 데이터 관찰
- 템플릿 컴파일
- DOM에 객체 연결
- 데이터 변경시 DOM 업데이트
위의 초기화 작업 외에도 개발자가 의도하는 커스텀 로직을 아래와 같이 추가가 가능하다.
new Vue({
data: {
a: 1
},
created: function() {
// this 는 vm 을 가리킴
console.log("a is: " + this.a);
}
});
(1) 느낀점
자바와 스프링, 스프링부트 등을 공부를 하다가 JS 기반의 프레임 워크인 뷰를 공부하며 개발자를 희망하며 언젠간 JS언어도 공부를 해보고 싶다라고 생각을 했었는데, 이렇게 빠르게 찾아올줄은 몰랐다.
주로 자바를 공부를 하다가 JavaScript 언어를 다루게 되었고 이게 내 주 업무로 배정을 받는다면 노력과 열정으로 이 언어와 프레임워크를 능숙하게 다루고 싶은 욕심이 생겼다.
