오늘해야할일들
- Vue.js 강의듣기 30개[20개...]
- Vue.js 공부하기
Vue 는 무엇인가?
MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
Reactivity 란?
=> 반응성이라고하며 데이터의 변화를 라이브러리에서 감지해서 화면에서 자동으로 그려주는것!
Code
<script>
let div = document.querySelector('#app');
let viewModel = {};
//객체의 동작을 재정의하는 api이다.
//동작을 마음대로 바꿀수 있다.
//Object.defineProperty(대상 객체, 객체의 속성, {
//정의할 내용
})
Object.defineProperty(viewModel,'str', {
get: function() {
console.log('접근');
},
set: function() {
console.log('할당',newValue);
div.innerHtml = newValue;
}
</script>Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환합니다.
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 JavaScript Function 를 말한다.
(function() {
statements
}()이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다.
첫 번째 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.
두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.
(function() {
let aName = "Barry";
})()
//IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.인스턴스의 속성
인스턴스에서 사용할 수 있는 속성과 API는 다음과 같습니다.
new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch: ,
})el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그)
template : 화면에 표시할 요소(HTML,CSS)
data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성
methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
created : 뷰의 라이프 사이클과 관련된 속성
watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
뷰 컴포넌트
컴포넌트는 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능입니다.
컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있습니다.
