Vue.js 스터디 2편(Vue.js 란?) (Vue.js 프로젝트 일주일 전)

저번 포스팅에서는 Vue.js로 주제 선정을 한 이유에 대해서 써보았습니다.  [Vue] - Vue.js 스터디 1편(주제 선정) (Vue.js 프로젝트 일주일 전)

 

요번 글은 Vue.js 프로젝트 일주일 전 책의 첫 번째 챕터! 바로 Vue.js 란? 에 대한 정리입니다.

 

프론트 엔드에 대한 짧은 생태계.

프론트 엔드의 세계는 정말 알 수 없고, 항상 패셔너블하게 환경이 다이나믹하게 바뀝니다. 

 

프론트 엔드 공부하기가 힘든 이유이기도 하지요.

 대표적인 라이브러리 및 프레임 워크에는 React, Angular, Vue가 자리 잡고 있습니다. (servlet도 있지만, 아직 수면 위로 나타나지 않은 것 같습니다.)

 

Vue.js란? 

대표적인 라이브러리 및 프레임 워크에는 Vue.js가 들어가 있습니다.

 

Vue.js는 사용자 인터페이스 개발을 위한 Progressive Framewokr라고 합니다.

 

여기서 Progressive Framework는 웹과 네이티브 앱의 이점을 모두 수용하고 표준 패턴을 사용해 개발하는 것을 말합니다.

 

요즘 인기 있는 PWA(Progressive Web Applictation)을 위한 Framework입니다.

 

PWA에 대해서 알고 싶으면 아래 더보기를 클릭하여 영상을 봐주시길 바래요. 가장 잘 설명된 영상입니다.

https://www.youtube.com/watch?v=FEBkne7Nyu4&t=147s 

https://www.youtube.com/watch?v=NMdnzvPsGu8 

좋은 영상 만들어 주신 엘리님, 얇코님 감사합니다.

 

Vue.js의 목표하는 것은 무엇일까요?

• 웹의 장점과 앱의 장점을 모두 수용할 수 있는 진화된 웹앱 애플리케이션을 만들 수 있는 프레임 워크 제공
• SPA(Single Page Application) 개발을 위한 프론트 엔드 프레임워크

 

첫 번째 목표는 위의 더보기의 영상을 보면 알 수 있습니다. 하지만 두 번째 목표인 SPA 개발을 위한 프론트 엔드 프레임워크는 무엇을 뜻하는 걸까요? 

 

Vue.js를 공부할 때 빠질 수 없는 SPA. 정의를 꼭 봐야 합니다.

SPA란?

대부분의 사이트는 전부 페이지를 매번 이동할 때마다 페이지 전체를 다시 로딩하게 됩니다.

 

이때 해당 페이지에서 이용하는 다양한 자바스크립트 파일, CSS 파일, 이미지 파일 등 전체를 서버에서 가져와 로딩을 하게 됩니다.

 

그런데, 항상 페이지를 이동할 때마다 다 새로 가지고 와야 할까요? 이것을 보완하기 위해서 만든 것이 바로 SPA(Single Page Application)입니다.

 

SPA은 말 그대로 단일 페이지 애플리케이션입니다. 즉 페이지 하나로 동작합니다.

 

SPA는 제일 처음 웹 사이트에 접속했을 때, 웹사이트 전체에 필요한 모든 웹 자원을 서버로부터 로딩하게 됩니다.

 

즉 이동할 때마다 새로 자원을 가지고 오는 게 아닌, 처음부터 가지고 오는 것을 말합니다.

 

즉, 웹 자원을 효율적으로 관리할 수 있도록 하는 것이지요.

 

하지만, 지금 필요하지 않은 데이터까지 모두 가지고 오기 때문에, 화면 로딩이 느려질 수 있다는 단점을 가지고 있습니다.

Vue.js의 장점

Vue.js의 장점은 3가지가 있습니다.

• 직관적이고 배우기 쉽다.
• 재사용을 통하여 개발 기간 단축 및 양질의 코드를 생산할 수 있다.
• Angular의 장점인 데이터 바인딩과 React의 장점인 Virtual Dom을 모두 가지고 있다.

직관적이고 배우기 쉽다.

 Vue.js는 직관적이고, 배우기 쉬운 장점을 가지고 있으며, React, Angular보다 낮은 러닝 커브를 가지고 있다고 합니다.

 

재사용을 통하여 개발 기간 단축 및 양질의 코드를 생산할 수 있다.

 Vue.js는 컴포넌트(Component)라는 개념을 통하여, 재사용성을 극대화할 수 있다고 합니다.

 

Angular의 장점인 데이터 바인딩과 React의 장점인 Virtual Dom을 모두 가지고 있다.

 Vue.js는 데이터 바인딩과 Virutal Dom을 모두 가지고 있다고 합니다.

 

데이터 바인딩이란?

 

자바스크립트의 객체와 화면에 있는 데이터를 일치화 시키는 것을 말합니다.

 

Virtual Dom이란?

 

Html Dom을 반복적으로 직접 조작하면 화면 렌더링이 자주 일어나서 PC의 자원을 많이 쓰게 됩니다. 그래서 가상의 돔을 만들어서, 

 

변경된 Dom만 변경하는 것을 말합니다.

 

Vue.js의 특징

• MVVM 패턴 사용
• 컴포넌트(Component)를 사용한 높은 재사용성

MVVM 패턴 사용

Vue.js는 MVVM 패턴을 사용하여 데이터 바인딩 및 Virtual Dom을 사용하기 쉽게 만들었습니다.

 

컴포넌트(Component)를 사용한 높은 재사용성

Vue.js는 컴포넌트를 사용하여 재사용성을 극대화시켜놓았습니다. 바로, input, link, image등과 같은 요소부터 UI 단위까지 말이죠.

 

이상 Vue.js 란 무엇인가에 대해서였습니다.

 

회고

Vue.js 프로젝트 일주일 전 챕터 1을 읽으면서,  고승원 저자님이 정말로 엄청난 책을 낸 것 같다!라는 생각을 하게 되었습니다.

 

Vue.js에 대해서 짧고 간결하고 정확하게 설명해주었습니다.

 

하지만 이 설명에서도 많은 개념들이 있었고, 저에게 많은 숙제를 내주신 것 같습니다.

 

Virtual Dom은 무엇인가? MVVM 패턴은 무엇인가? Component는 무엇인가? Vue.js로 PWA는 어떻게 구현하는 것인가? 데이터 바인딩은 무엇인가? 등등 알아야 할 지식들이 많아졌습니다.

 

아직까지 위에 말한 개념들을 모르는 저에게 부끄러움까지 주셨습니다.

 

하하.. 하나씩 하나씩 찾아보고 포스팅을 해봐야 될 것 같습니다.

 

이상입니다. 

 

오늘은 다른 포스트에 비해 많이 기네요. 읽어주셔서 너무 감사합니다. 전 요가하러 가보겠습니다.