Vue.js란?

웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크.

MVVM 패턴

마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴
-> 화면 앞단(프론트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다

모델(Model) - 뷰(View) - 뷰 모델(ViewModel)

• 뷰(View): 사용자에게 보이는 화면
• 돔(DOM): HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
• 돔 리스너(DOM Listener): 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
• 모델(Model): 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
• 데이터 바인딩(Data Binding): 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
• 뷰 모델(ViewModel): 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

컴포넌트 기반 프레임워크

리액트와 앵귤러의 장점을 가진 프레임워크

뷰 인스턴스

뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

뷰 인스턴스 생성

new Vue({
	...
});

• 뷰 인스턴스 생성자: 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서임.
  생성자는 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법.

뷰 인스턴스 옵션 속성

뷰 인스턴스 옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미함.
el 속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미한다.

// 인스턴스의 el 속성
<div id="app">
	{{ message }}
</div>

• template: 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성.
  뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
• methods: 화면 로직 제어와 관계된 메서드를 정의하는 속성.
  마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있음.
• created: 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성.
  뷰 인스턴스 라이프 사이클 부분에서 추가로 설명함.

뷰 인스턴스의 유효 범위

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타남.

// 인스턴스 옵션 속성 정의 및 인스턴스 생성
new Vue({
	el: '#app',
    data: {
    	message: 'Hello Vue.js!'
    }
});

• 뷰 인스턴스 라이프 사이클
  라이프 사이클(life cycle) 속성: 인스턴스의 상태에 따라 호출할 수 있는 속성들
  생성->부착->갱신->소멸
  • 인스턴스의 생성, 변경, 소멸과 관련되어 총 8개
    • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyed
• 훅(hook): 각 라이프 사이클 속성에서 실행되는 커스텀 로직

뷰 컴포넌트

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미함.
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.