Overview
Vue.js 학습을 진행하면서 맨 먼저 나오는 용어인 Progressive Framework 에 대해 파고들어가 보려고 한다. Progressive Framework 가 무엇인가, 왜 Vue.js 가 Progressive Framework 라고 얘기하는가 등에 대해 우선 알아보고자 한다.
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries
출처: https://v3.vuejs.org/guide/introduction.html
Framework와 Library
Progressive Framework 에 대해 정의하기 전에 먼저 Framework 에 대한 명확한 정의가 먼저 선행되어야 할 것같다. 또한 Framework 하면 항상 따라오는 용어가 바로 Library 인데 이 둘을 비교해 정의를 하면 더욱 이해가 빠를듯하다.
라이브러리(Library)와 프레임워크(Framework) 모두 누군가 효율적이고 편하게 개발을 하기 위해 이미 만들어둔 코드들의 뭉치이다.
먼저 라이브러리는 개발자가 자신의 코드에 호출해서 컨트롤할 수 있다. 즉, 개발자가 필요할때 라이브러리를 불러서 개발을 진행한다. 그렇기때문에 라이브러리는 쉽게 대체가 가능하고, 라이브러리가 없거나 다른것으로 대체를 한다고 해도 프로젝트가 망가지지는 않는다.
반면에 프레임워크의 경우 개발자는 프레임워크를 자신의 코드에 호출하지 않고 프레임워크가 정한 규칙에 따라서 자신의 코드를 개발해 나가야만 한다. 즉, 프레임워크가 개발자의 코드를 호출하여 컨트롤하게 되는 것이다.
Progressive Framework 의 정의
Progressive 의 기본 개념은 작은 것에서 시작하여 점차적으로 더 큰 것을 구축한다는 것이다. 이는 Framework 가 Layer 혹은 Component 단위로 구성되어 전체 Framework 의 일부만을 사용할 수도 있고 또한 추가적인 기능이 필요한 경우 점진적으로 더 많은 부분을 추가하는 등 프레임워크의 기능을 넣거나 뺄수도 있음을 의미한다.
또한, 느슨하게 결합된 코드베이스를 제공하여 코드 간의 상호 의존성 및 종속성을 낮추어 각 Layer 혹은 Component 들의 재사용성을 높이고, 유연하고 확장가능한 애플리케이션을 만들어 유지관리가 용이하도록 만들어 준다.
어떤 부분이 Vue.js 를 Progressive 하도록 만드는지?
Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.
우선 Vue.js 는 다른 Monolithic Framework 와는 다르게 "incrementally adoptable(점진적으로 채택가능한)" 형태로 설계되어 다른 라이브러리 및 프로젝트와 쉽게 통합 가능하고 사용할 수 있도록 설계되었다.
Vue.js 의 코어 라이브러리는 다른 기능과 완벽히 분리되어 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하고, 필요한 경우 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로 제공된다. 가령, 라우팅 기능이 필요하다면 include 해서 사용할수 있고, Vue에서 제공하는 라우터가 필요하지 않다면 직접 만들거나 다른 개발자들이 만들어둔 것들로 대체해서 사용할수도 있다.
그래서 Vue.js 로 만들어지지 않은 기존 프로젝트에도 부분 적용이 가능하고, 점진적으로 필요한 기능들을 도입할 수도 있다. Angular 의 경우에는 Monolithic Framework 이고, Monolithic Framework 가 모두 한조각으로 구성되어 있기 때문에 Vue.js 처럼 부분적으로 기존 프로젝트에 도입하는 것은 어려울 것이다.
또한 프레임워크에 직접 포함되어 있지는 않지만 Vue.js 의 Echo System 에 포함되어 있는 Vuex, Vuetify, Vue SSR(Server Side Rendering), Vue Test Utils(Jest, Mocha), Build System 등의 많은 기능들을 필요한 경우 가져다 사용할 수 있다.
이러한 특징들로 인해 Vue.js 를 Progressive Framework 라고 표현할 수 있다.
Monolithic Framework 의 정의
Monolithic 의 기본 개념은 모든 것이 한조각으로 구성된 것을 의미하는데 서로 다른 구성요소가 단일 플랫폼 상에서 하나의 프로그램으로 결합된 단일 계층 소프트웨어 애플리케이션으로 설명된다.
Monolithic 프레임워크는 일반적으로 코드가 서로 상호 작용을 하도록 밀접하게 결합된 코드베이스를 제공하여 애플리케이션이 빠르게 시작하고 실행되도록 하기 위한 것이다. 밀접하게 결합된다는 의미는 코드가 서로 의존하는 정도, 즉 상호 의존성이 높고 더욱 조직적이라는 것이다. 반대로 느슨하게 결합된 코드는 상호 의존성이 낮고 덜 조직적이게 된다. (그렇다고 이게 더 나쁘다는 의미는 아니다.)