vue.js 의 특징 및 기본개념

*이 포스트는 Vue.js 프로젝트 투입 일주일 전 (고승원 저) 을 보며 공부한 내용입니다.

*개인 공부용 Post이기 때문에 내용이 생략되거나 두서가 없을 수 있습니다.

 

Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framework 입니다.

 

Progressive라는것은 Web과 Native App의 장점을 모두 수용할 수 있다는 뜻이다.

 

Web의 장점 -  별도의 설치 없이 브라우저만 있으면 접속이 가능합니다(뛰어난 접근성)

Native App의 장점 - 웹보다 빠르며 더 뛰어난 사용자 경험을 제공합니다

 

Vue.js는 SPA(Single Page Application) 을 개발하기 위한 프론트엔드 프레임워크입니다.

 

SPA란?

기존의 Spring Framework(Boot포함) 을 작업했을때의 단점을 보완한 방식으로서, 페이지를 이동할 때 JavaScript, Css, Image등 필요한 자원을 서버에서 가져와서 다시 로딩을 하는 방식과 차이가 있습니다.

 

SPA는 Single page, 즉 하나의 페이지만을 사용해서 필요한 부분만 바꿔지는 방식입니다.

따라서 처음 웹사이트에 접속했을 때, 웹사이트 전체에 필요한 자원들을 모두 가져옵니다.

이 방식을 채택함에 따라 처음 로딩이 길어질 수 있다는 단점이 생기지만, 처음 로딩 후에는 가져온 자원들을 활용해서 모든걸 하기 때문에 기존 방식에 비해 자원을 효율적으로 쓴다고 합니다.(ex. 자원들의 중복호출이 없어짐)

그리고 이미 자원들을 다 로딩했기 때문에 페이지 전환속도가 매우 빨라집니다.

 

SPA방식을 사용하는 대표적인 프레임워크로는 Vue, React, Angular가 있습니다. (대충 대세라는 뜻 ㅎ)

 

Vue.js의 장점

 

1. 직관적이고 배우기 쉽습니다.

 

이 책의 저자는 React, Angular, Vue 를 모두 사용해봤다고합니다.(그것도 실무 프로젝트에서!)

위의 3가지 프레임워크중 정말 단기간에 익히면서 실무에 바로 적용할 수 있도록 직관적이고 쉽다고 합니다.

물론 기초적인 프로그래밍 지식은 갖추고 있어야 합니다. 자바스크립트도 모르는데 Vue.js 쉽나여? 하면 안됩니다ㅎ

 

2. 재사용을 통한 애플리케이션 개발 기간 단축 및 양질의 코드 생산가능합니다.

 

Vue에서는 컴포넌트(Component)라는것을 활용하여 재사용성을 극대화 할 수 있습니다. 앞서 배운 입문강의에서도 썼었는데, 저는 React를 조금이나마 해본 경험이 있어서 재사용성이라는게 얼마나 효율적이고 좋은건지 이미 깨달았었습니다 ㅎ

 

3. Angular의 장점인 데이터바인딩과 React의 장점인 가상 돔을 모두 가지고 있습니다.

 

여기서 말하는 데이터 바인딩은 Two-way 데이터 바인딩을 말하는 것입니다.

기존의 JavaScript는 사용자에게 보여주는 데이터, 사용자가 입력해서 변경되는 데이터 등을 선택자, 이벤트리스너 등으로 일일이 제어를 해야해서 코드의 양도 늘어나고 사용하기 어려웠었습니다.

입문 강의에서 이 데이터 바인딩을 써본 결과 Java환경에서 Getter와 Setter를 쓰는것만큼 단순하게 쓸수 있다는 것이 정말 좋았었다. 이것이 Angular가 처음 나왔을때의 엄청난 강점이었는데, 성능저하라는 단점이 컸다고 합니다.

웹 화면의 복잡도가 증가하자 HTML DOM의 트리구조가 너무 많아져서 DOM 갱신이 점점 느려진다는 것입니다.

 

이러한 단점을 극복하고자 나온게 React 라고합니다.

HTML DOM의 한계를 극복하고자 Virtual DOM 이라는 개념을 제공해주었습니다.

Virtual이라는 말 답게 가상의 DOM을 만들어 메모리에서 DOM을 처리한다음, 실제 DOM과 동기화 함으로서 기존의 단점을 극복했습니다.

 

Vue는 데이터 바인딩과 가상 돔을 모두 가지고 있습니다.

 

Vue는 MVVM 패턴을 가지고있습니다.

 

MVVM은 Model-View-ViewModel의 약자이다. 이는 프로그래밍 로직과 화면에 해당하는 View를 분리해서 개발하기 위해 설계된 패턴입니다. 일반적인 Model-View 사이에 ViewModel 을 추가해서 앞서말한 데이터 바인딩과 가상 돔을 활용하는 패턴입니다.

 

컴포넌트(Component) 

 

입문에서 써봐서 알겠지만 view를 재사용할 수 있는 구조로 개발하는 것을 컴포넌트라고 합니다.

.vue 파일 하나하나가 모두 컴포넌트이다. 컴포넌트는 한 화면을 이루는 작은 요소(Elements~~ UI정도?) 일수도 있고, 한 화면 전체를 구성하는 View 일수도 있습니다.

Vue에서 하나의 컴포넌트는 HTML+CSS+JS 로 이루어져 있고, 다른 컴포넌트에서 import해서 사용할 수도 있습니다.