Vue.js Overview
23 Sep 2019 | Vuejsvue 기초
아래 책을 공부하면서 중요하다고 생각한 부분을 정리했습니다. 공부하면서 추가되는 내용이 있을 수 있습니다.
- 책 제목 : Do it! Vue.js 입문
- 저자 : 장기효
개요
라이브러리 : 자주 사용되는 기능을 모아 재활용하기 쉽도록 정리해놓은 도구 프레임워크 : 라이브러리라는 ‘도구’와 이를 활용하는 ‘규칙’이 합해진것.
Vue.js는 UI화면 개발 방법중 하나인 MVVM(Model–view–viewmodel - Wikipedia) 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다. 다시말해 화면을 모델 - 뷰 - 뷰모델로 구조화 하여 개발하는 방식이다. 이 방식의 장점은 화면의 요소들을 제어하는 코드와 데이터를 제어하는 로직을 분리하여 코드를 좀 더 직관적으로 이해하고 유지보수를 효율적으로 할 수 있다는것이다.
화면을 개발하기 위한 필수 단위
인스턴스
new Vue({
el : '#app',
data : {
message: 'hello',
}
})
여기서 new Vue는 인스턴스 el, data는 속성
이외에도 methods, template, created와 같은 미리 정의 되어있는 속성들이 있습니다. Adding Instance Properties — Vue.js
인스턴스가 생성되고 화면에 적용되는 과정
뷰 라이브러리 파일로딩 -> 인스턴스 객체 생성(옵션 속성 포함) -> 특정화면 요소에 인스턴스를 붙임 -> 인스턴스 내용이 화면 요소로 변환 -> 변환된 화면 요소를 사용자가 최종 확인
뷰 인스턴스 라이프 사이클
인스턴스가 생성되는 과정에서 호출되는 동작을 정의 하는 속성을 라이프 사이클 속성이라고 합니다. 그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅이라고 합니다. The Vue Instance — Vue.js
created
data속성과 methods속성이 정의 되어있는 단계이기 때문에 this.data, this.fetchData()와 같은 로직들을 이용하여 data, methods속성에 정의된 값에 접근하여 로직을 수행할 수 있습니다. 다만 인스턴스가 화면요소에 부탁되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없습니다.
data, methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋습니다.
beforeUpdata
el속성에서 지정한 화면 요소에 인스턴스가 부착되고 화면에 치환됩니다. 치환된 값은 뷰의 반응성을 제공하기위해 $watch속성으로 감시합니다. 이를 데이터 관찰이라고 합니다.
컴포넌트
컴포넌트는 조합하여 화면을 구성할 수 있는 블록입니다. 화면을 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. 흔히 내비게이션 바, 테이블, 리스트, 인풋박스 등으로 컴포넌트로 관리합니다.
컴포넌트 등록
컴포넌트를 등록하는 방법에는 전역과 지역 두가지가 있습니다.
지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 가지고 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있습니다.