Vue.js v3
Vue.js란?
Vue.js는 UI를 구축하기 위한 프로그레시브 프레임워크이다.
프로그레시브 프레임워크란 Evan You라는 사람이 제창한 어떠한 규모/단계의 웹 앱에도 대응할 수 있는 프레임워크의 개념을 말한다.
Vue.js를 사용하면 개발 효율성 향상과 중복 설명을 줄일 수 있다. 또한 다른 프레임워크보다 독자적인 규칙 등이 적고 자유도가 높다.
특징과 장점
Vue.js 의 몇 가지 특징과 장점에 대해서 설명한다.
Directive
Directive는 Vue.js 의 고유 속성 (v-oo)을 사용하여, 이를 사용하여 DOM 작업을 수행 할 수 있다.
이에 따라 DOM 조작의 기술을 줄일 수 있어 개발 속도가 향상된다.
양방향 데이터 바인딩
양방향 데이터 바인딩이란, JavaScript 데이터와 View, 양방향 데이터를 감시하고 항상 동기화하는 기능을 말한다. 즉, 데이터의 변경이 있으면 View를 갱신해, View의 변경이 있으면 데이터의 갱신을 실시하는 기능.
컴포넌트
컴포넌트는 애플리케이션의 다양한 기능을 역할에 따라 분할한 것이다. 컴퍼넌트를 사용해 파트화하는 것으로, 재이용성이나 디자인의 일관성이 높아져, 효율적으로 개발이나 메인터넌스를 실시할 수도 있다.
확장성
Vue.js 는 간단한 디자인으로 매우 확장 가능한 프레임워크이다.
다른 라이브러리와 조합할 수 있고, 단계적으로 규모를 확대하는 것도 가능하기 때문에, 다양한 규모의 개발에 이용할 수 있다.
SPA(Single Page Application)
Vue.js 는 SPA 개발이 쉽다.
SPA는 페이지 전환없이 단일 페이지 내에서 콘텐츠가 전환되는 응용 프로그램이다.
학습 비용
Vue.js는 단순하게 설계되었으므로 다른 프레임 워크보다 학습 비용이 낮다.
또한, 프레임워크로서 인기가 높기 때문에 기술 정보가 많다.
디렉티브(Directive)
HTML 태그 안에 v-접두사를 가지는 모든 속성을 의미한다.
주요 디렉티브
| 디렉티브 이름 | 역할 |
|---|---|
v-if |
지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않음. |
v-for |
지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력 |
v-show |
v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않음. 다만, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none;으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않음. |
v-bind |
HTML 태그의 기본 속성과 뷰 데이터 속성을 연결 |
v-on |
화면 요소의 이벤트를 감지하여 처리 할 때 사용. for example ! v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메시드를 실행 할 수 있음 |
v-model |
form에서 주로 사용되는 속성. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직 수행 가능.<input>, <select>, <textarea> 태그에만 사용 가능 |
created vs mounted
created
인스턴스가 작성된 후 동기적으로 호출된다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료한다. 그러나 마운트가 시작되지 않았으므로 $el 속성을 아직 사용할 수 없다.
mounted
el 이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출된다. 루트 인스턴스가 문서 내의 엘리먼트에 마운트 되어 있으면, mounted가 호출 될 때 vm.$el도 문서 안에 있게 된다.