Vue.js #1 시작하기
Vue.js 란?
Vue.js를 시작하기에 앞서 공식 페이지 https://kr.vuejs.org 를 방문하면 다음과 같이 설명하고 있습니다.
Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 single page 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 single page application을 완벽하게 지원할 수 있습니다.
간단히 말해 SPA(Single Page Application) 용 프런트엔드 개발을 위한 프레임워크 라고 정의할수 있습니다.
< Vue.js 프레임워크 구조 >
Vue.js의 프레임워크 구조를 보면 화면의 데이터 표현에 대한 선언적 렌더링을 중점적으로 제공하고 프레임워크 관련한 컴포넌트, 클라이언트 라우팅 기능을 제공하여 라이브러리가 아닌 프레임워크 역할을 수행합니다.
Vue.js 장점
일단 초창기에 웹으로 SPA를 개발하기 위해 Angular 및 Ionic을 사용해보았으나 일단 Typescript라는 언어를 새로배워야 하고 초기 기동 시 무겁다는 장점을 발견할 수 있었습니다. 다음으로 Vue.js의 장점을 나열하면,
- 배우기가 쉽다. HTML, CSS, JavaScript 기초 지식만 있으면 손쉽게 배울수 있스빈다.
- Angular, React 보다 동일케이스 수행시 더 빠르다고 합니다. 공식페이지에서 나온 내용이지만 일단 체험상 속도는 빨라 보입니다.
- Angular, React 장점이 랜더링 과 가상돔을 동일하게 이용할수 있습니다.
UI 라이브러리
Vue.js 는 UI화면 개발 방법 중 하나인 MVVM 패턴의 화면단 라이브러리 입니다.
< MVVM 라이브러리 구조 >
MVVM 패턴이란 화면을 Model-View-ViemModel 로 구조화하여 개발하는 방식을 의미합니다. 화면제어와 데이터 제어를 분리하여 유지보수성과 재사용성이 높은 코드를 작성할 수 있습니다.
뷰(View)
사용자에게 보이는 화면, HTML
돔(DOM)
HTML Item(태그, 클래스, 속성 등)의 정보를 담고있는 데이터 트리
돔 리스너(DOM Listener)
돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행
모델(Model)
데이터를 보관서, 데이터를 자바스크립트 객체로 저장
Directives
뷰에 표시되는 내용과 모델의 데이터를 바인딩
뷰모델(View Model)
뷰와 모델의 중간 영역. 데이터 바인딩을 처리하는 영역
컴포넌트 기반 프레임워크
컴포넌트란 레고 블록 처럼 화면을 구성할때 조합해서 만드는 방식 입니다. 최신의 프레임워크 Angular, React 모두 컴포넌트 기반 방식이며,
재사용성이 높으며, HTML 코드를 컴포넌트로 구조화하여 이해하기 쉽습니다. 끝.
댓글
댓글 쓰기