1. 프로그레시브 프레임워크 Vue.js - part 2

Vue.js 의 특징

Vue.js는 그 자체로는 뷰만을 다루는 단순한 라이브러리다. Vue.js 본체 뿐만 아니라 관련 라이브러리도 Vue.js 공식 프로젝트의 일부로서 개발 및 관리 된다. 이 때문에 몇가지 라이브러리를 조합하면 마치 종합적인 프레임워크처럼 사용 할 수 있다.

낮은 학습 비용

Vue.js 가 제공하는 API는 매운 단순하다. UI를 구성하는 데는 HTML을 기반으로 하는 평범한 템플릿을 사용한다. HTML이나 자바스크립트에 이미 익숙하면 Vue.js 에 대해 특별히 더 배우지 않고서도 라이브러리를 사용할 수 있다. 기본적인 사용만 한다면 빌드 도구나 패키징, EC2015 이후 문법에 대한 지식이 없어도 바로 동작하는 코드를 작성할 수 있다. Vue.js 는 앞서 언급한 모던 웹 프런트 엔드 개발의 어려움을 잘 극복했다. HTML5 이후 고도화된 개발 스타일에 부응하면서도 개발 환경 구축이 쉬워서 개발을 바로 시작할 수 있으며 자바스크립트에 대한 사전지식과 라이브러리 고유의 문법을 학습하지 않아도 라이브러리를 사용할 수 있다.

컴포넌트 지향을 통한 UI 구조화

Vue.js 는 구조화해 컴포넌트로 재사용할 수 있다. UI 구성 요소를 컴포넌트로 만들면 시스템 전체를 컴포넌트의 집합 형태로 개발 할 수 있다. 개발에 컴포넌트를 적용하면 컴포넌트 분리에서 오는 유지보수성 개선 및 컴포넌트 재사용 등 여러 장점이 있다.

리액티브 데이터 바인딩

Vue.js 는 DOM요소와 리액티브 데이터 바인딩을 통해 자바스크립트 데이터를 연결해 준다. 리액티브 데이터 바인딩이란 HTML 템플릿 안에서 대상 DOM 요소에 바인딩 을 지정해 Vue.js 가 해당 데이터의 변화를 감지할 때마다 바인딩된 DOM 요소에 표시되는 내용도 함께 업데이트하는 것을 말한다. 값은 자바스크립트에서 DOM요소로 일방적으로 전달된다. 이것을 단방향 바인딩이라고 한다. 자바스크립트쪽에서 위치한 데이터 값이 변경되면 변경된 값이 웹 페이지에도 자동으로 반영되는 기능이다. input 요소등 사용자의 입력을 받는 DOM요소는 요소에서 받아온 데이터와 자바스크립트 데이터를 서로동기화하는 바인딩을 지정한다. 이런 경우 자바스크립트의 데이터 값이 변경될때마다 DOM요소의 표시 내용이 수정되며, 사용자의 입력이 감지될때마다 자바스크립트 데이터가 수정된다. 이런 방법으로 자바스크립트 데이터와 DOM요소 데이터의 동기화 상태를 유지한다. 이 방법은 자바스크립트와 DOM요소가 서로 최신 데이터를 주고받으므로 양방향 바인딩이라고 한다. 바인딩을 이용함으로써 귀찮은 표시 내용 업데이트 처리와 DOM 요소와 자바스크립트 간 데이터 동기화 상태 유지로부터 해당됐으며 데이터 중심 웹 애플리케이션 설계 및 구현이 가능해졌다.

Vue.js의 설계사상

Vue.js는 사용성 면에서도 뛰어난 라이브러리지만, 성능적인 측면을 비롯해 다른 장점도 많은 라이브러리다. 그러나 이와 비슷한 장점이 많은 라이브러리도 있다. Vue.js 가 이런 다른 라이브러리와 분명이 차별화 되는 점이 있다. 바로 밑바탕이 되는 설계사상이다. Vue.js의 설계 밑 바탕에는 프로그래시브 프레임워크(Progressive framework) 라는 아이디어가 깔려있다.
‘프레임워크는 어떤 경우든지 규모와 상관없이 단계적으로 유연하게 사용할 수 있어야 한다.’ 라고 Vue.js를 만든 에반유가 처음 주창했다.

프레임워크의 복잡성

웹 프런트 엔트 분야에는 React와 Angular 등 라이브러리와 프레임워크가 여러 가지 있다. 프레임워크는 애플리케이션 개발의 복잡성을 해소해주는 도구다. 그러나 애플리케이션과 마찬가지로 프레임워크에도 프레임워크 자체의 복잡성이 있다. 프레임워크라는 도구를 사용하려면 도구 자체의 복잡성에서 오는 비용과 애플리케이션 개발의 복잡성에서 오는 비용이 균형을 이루도록 적합한 프레임워크를 선택하는 것이 중요하다.

요구 사항의 변화를 수용할수 있는 프레임워크

사이트 및 애플리케이션의 요규사항은 끊임없이 변화한다. 프레임워크도 이렇게 변화하는 요구사항에 맞춰 가치를 제공하려면 그만큼 유연하지 않으면 안 된다. 애플리케이션이 최초 완성되고 나면 변화하는 요구사항에 대응하기 위해 애플리케이션의 규모가 지족해서 커지게 마련이다. 대부분 애플리케이션 개발을 지원하는 라이브러리나 도구를 추가로 도입해 새로운 비즈니스 요구사항을 만족시키게 된다. 그러나 이렇게 새로운 요소를 덧붙이는 방법은 생각대로 되지 않는 경우가 많다. 웹 프런트엔드 생태계는 최근 끊임없이 변화하고 있기 때문에 애플리케이션에 도입한 프레임워크나 개발 환경이 얼마 지나지 않아 시대에 뒤떨어지게 되고 다시 어떤 프레임워크로 갈아타야 하는지조차 알 수 없는 상황에 직면하게 된다. 이런 상황에 대처하려면 요구 사항 변과에 단계적으로 대응해야 한다. 이러한 아이디어를 반영한 것이 바로 프로그래시브 프레임워크다. 프로그래시브 프레임워크는 무제를 해결할 수 있는 적합한 라이브러리를 적시에 도입해 문제를 해결한다. Vue.js는 뷰 계층에 초점을 맞춘 라이브러리다. Vue.js 프로젝트가 제공하는 부가적인 라이브러리와 개발환경 도구를 사용하면 프로그래시브 프레임워크가 된다.

프로그레시브 프레임워크가 제공하는 단계적 영역

선언적 렌더링

이 영역은 선언적 DOM 렌더링과 관련된 영역이다. HTML 템플릿에 렌더링 대상을 선언적으로 기술해 데이터가 변경될 때마다 DOM을 반응적으로 렌더링하고 사용자 입력 데이터를 동기화 할 수 있다,
Vue.js 본체가 제공하는 기능이다.

컴포넌트 시스템

UI를 모듈화해 재사용할수 있게 해주는 영역 이 영역 역시 UI 를 컴포넌트로 만들어주는 Vue.js 본체가 제공하는 기능이다.

클라이언트 사이드 라우팅

단일 페이지 애플리케이션이 동작하기 위해 필요한 영역이다. 라우팅이란 간단히 말해 애플리케이션의 URL 설계, 지시와 같은 것이다. Vue.js의 공식 라우팅 라이브러리인 Vue Router를 사용하면 기존에 개발한 컴포넌트로 당일 페이지 애플리케이션을 만들 수 있다.

대규모 상태관리

컴포넌트 간에 상태를 고유하는 방법을 필요로 하는 영역이다. Vue.js의 공식 데이터플로 아키텍처를 따라 만든 상태관리 라이브러리인 VUEX 를 사용하면 이 영역의 문제를 해결할 수 있다, 기존 컴포넌트를 확장하는 형태로 상태를 중앙에서 관리 할 수 있다.

빌드시스템

웹 애플리케이션을 구성하는 컴포넌트 관리, 운영환경배포, 프로젝트 구성등과 관련된 영역이다. Vue.js의 공식 개발지원 도구를 이용해 이 영역의 문제를 해결할 수 있다, 프로젝트의 환경구축, 구성관리에 수고를 들이는 대신 개발에 집중할 수 있다. (Vue Cli)

클라이언트-서버데이터 퍼시스턴스

웹애프리케이션의 복잡한 데이터는 클라이언트 사이드와 서버사이트 양쪽 모두에서 퍼시스턴스 데이터로 유지돼야 한다. 이 책을 쓰는 시점에는 이러한 분야의 문제를 해결해 주는 Vue.js공식 라이브러리가 아직 없으며 서드파티 라이브러리 사용자들이 직접 작성한 라이브러리를 사용해 구현한다.

Vue.js의 기반 기술

컴포넌트 시스템

Vue.js는 컴포넌트를 쉽게 다루기 위한 라이브러리다. 컴포넌트 시스템에서 특기할 만한 기능은 단일 파일 컴포넌트다. Vue.js는 단일 파일에 HTML과 유사한 방식으로 컴포넌트를 작성할 수 있다. 이 파일은 .vue라는 독자적인 확장자를 사용한다. Vue.js 컴포넌트는 기존 웹 표준을 구성하는 기술과 유사한 형태로 정의되기 때문에 학습비용이 매우 낮은것이 특정이다. 파일하나에 컴포넌트의 모든 요소를 함께 담을 수 있다는 점은 큰 장점이다. 컴포넌트의 요점은 언어의 역할과는 별도로 기능이나 관심사를 기준으로 코드를 분리하는 것이기 때문이다. 하나의 관심사만을 같은 GUI 컴포넌트를 분리하려고 할때 HTML/CSS/JavaScript 3가지 요소를 하나의 파일로 합쳐 컴포넌트로 분리 할 수 있으므로 이해하기 쉽다.

리액티브 시스템

Vue.js의 리액티브 시스템은 옵저버 패턴을 기반으로 구현 좀더 쉽게 셜명하면 상태의 변화를 Vue.js가 감지해 자동으로 그 변화를 DOM에 반영하는 구조라고 할 수 있다. DOM 을 더욱 정교하고 잦은 비도로 조작해야 하는 애플리케이션에서는 데이터 바인딩이 매우 유용하다. 라이브러리에 이러한 기능이 없다면 값의 변화에 따라 변화해야 하는 곳을 직접 변경하거나 갑의 변경에 따른 사이드 이펙트를 완전히 파악하지 못하고 임시변통으로 틀어막게 되기 쉽다. 뒤에 설명할 계산 프로퍼티는 이러한 리액티브 시스템 덕을 가장 크게보는 사례다. 계산 프로퍼티란 값의 변화를 탐지해 자동으로 업데이트 되는 프로퍼티를 말한다. Vue.js 템플릿에서 빼놓을 수 없는 기능이다. 리액티브 시트템은 리액티브 프로퍼티와 와처가 한 쌍을 이뤄 구현된다.

리액티브 시스템의 내부

계산프로퍼티에서는 와처 내부의 게터가 계산 프로터티로 정의하는 함수 역할을 한다. 계산프로퍼티를 처음 참조하면 와처내부에 잇는 게터를 거쳐 리액티브 프ㄹ퍼티의 계산 결과가 와처에 캐싱되며 이와 함께 리액티브 프로퍼티의 의존관계 추적도 완료된다. 그 다음 이 계산 프로퍼티가 다시 참조될 때는 캐싱된 값을 반환해 계산 비용을 절약할 수 있다, 이후에 계산 프로퍼티에서 이 값이 의존하는 리액티브 프로퍼티의 일부가 대입 등의 이유로 변경되면 후크 처리를 통해 와처에 이 변경이 통지되면 내부 게터가 이 통지를 전달받아 프로퍼티 값을 다시 계산해 그 결과가 와처에 새로 캐싱된다. 반면 컴포넌트 렌더링에서는 와처 내부의 게터가 컴포넌트를 렌더링하는 함수 역할을 한다. 모든 컴포넌트가 와처를 갖고 있기 때문에 컴포넌트의 모든 데이터를 래액티브 프로퍼티로 모니터링 한다. 컴포넌트 렌더링은 모니터링 대상 중 어떤 리액티브 프로퍼티가 값이 변경됐다는 통지를 보내면 그때마다 와처의 게터가 실행돼 컴포넌트가 렌더링되는 구조다.

렌더링시스템

Vue.js는 가장 DOM을 이용해 DOM을 고속으로 렌더링한다. 가상 DOM은 DOM을 간편하고 빠르게 제어하기 위한 기술이다. 더 편리하고 빠르게 다룰 수 있는 DOM 구조의 대체물을 만든 다음 이 대체물을 조작하고 그 결과를 실제 DOM에 반영한다. 다른라이브러리와 다른 점은 템플릿이 HTML과 유사해 개발이 쉽고 최적화가 잘 돼 있어 빠른 렌더링이 가능하다는 점이다.

Vue.js의 생태계

Vue.js는 뷰 계층에 초점을 맞춘 라이브러리이므로 엄밀히 말해 프레임워크는 아니다. 단일 페이지 애플리케이션을 구현하기 위한 라우팅 기능처럼 UI외적인 기능을 이용하는 웹애플리케이션을 개발하려면 추가 라이브러리가 필요하다. 웹애플리케이션 테스트 및 빌드, 개발 환경역시 직접 구축하지 않으면 안 된다.

  • Vue Router : 단일 페이지 애플리케이션을 구현하기 위한 라우팅 기능을 제공하는 플러그인
  • Vuex : 대규모 웹 애플리케이션을 구축하기 위한 상태 관리 플러그인
  • Vue Loader : 컴포넌트의 고급 기능을 이용하기 위한 webpack 용 로더 라이브러리
  • Vue CLI : 웹 애플리케이션을 구축하기 위한 템플릿 프로젝트 생성 및 프로토타입을 추가 설정없이 빌드하기 위한 명령해
  • Vue DevToolls : Vue.js 애플리케이션을 브라우저의 개발자 도구로 디버깅할 수 있게 해주는 도구
  • Nuxt.js : 단일 페이지 애플리케이션과 서버 사이드 렌더링을 지원하는 Vue.js 애플리케이션을 개발하기 위한 프레임워크
  • Weex : Vue.js 문법을 사용해 IOS 및 안드로이드 애플리케이션을 개발할 수 있는 프레임워크
  • Onsen UI : 모바일 웹 애플리케이션을 개발하기 위한 프레임워크

커뮤니티에서 추천 플러그인, 라이브러리, 도구 등의 정보를 얻을 수 있다.

  • Awesome Vue : Vue.js와 관련된 오픈 소스 프로젝트나 Vue.js가 사용된 웹 사이트 및 애플리케이션 정보를 공유하는 사이트
  • Vue Curated : Vue.js 코어 팀에서 엄선한 플러그인, 라이브러리, 프레임워크 등을 검색 할수 있는 공식 사이트

Vue.js 첫걸음

1
2
3
4
5
6
7
8
9
10
11
12
<DOCTYPE html>
<title>Vue.js 시작하기</title>
<script src=“https://unpkg.comvue@2.5.17”></script>
<div id=“app”></div>

<script>
new Vue({
template: ‘<p>{{ msg }}</p>’,
data : { msg: ‘hello world!’ }
}).$mount(‘app’)
</script>
</html>
  • Vue.js 참조문서 - 공식사이트 참고(https://vuejs.org)
  • Vue.js 사용자 커뮤니티
  • Vue.js 포럼 : Vue.js 를 사용하다가 발생하는 트러블이나 질문 사항을 논의하는 사이트
  • Vue Land : Vue.js 사용자와 코어 팀 멤버 및 컨트리뷰터가 채팅을 커뮤니케이션 하는 커뮤니티
  • Vue.js 밋업 : 한국 Vue.js 사용자들이 Vue.js 지식과 정보를 공유하는 밋업 이벤트

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×