Vue.js 시작

발표준비 겸 배우다가 중도포기했던 자바스크립트 프레임워크를 배워보려고합니다.

 

 

 

 

 

처음에는 리액트를 준비했지만 라라벨을 준비하면서

더 어울리는건 Vue가 더 어울린다고 생각해서 공부하게 되었습니다.

 

일단 자바스크립트 프레임워크는 자바스크립트로 작성된 애플리케이션 프레임 워크입니다. 

여기서 프레임워크는 복잡한 코드나 내용을 간단하게 해주면서 미리 규격화 모듈화 되어있는 도구를 말합니다.

 

라이브러리는 단순 활용가능한 도구들의 집합을 말하고 프레임워크는 뼈대나 기반구조를 떠올리면 됩니다.

 

이제 Vue를 사용하려는 이유에 대해서 말하자면 

 

자바스크립트의 유연함 때문인지 코드가 조금씩 복잡해지기 시작했고 이는 유지보수에 큰 악영향을 미쳤습니다. 

이렇게 자바스크립트의 인기가 내려갈때 쯤 이 문제점들을 해결해주는 프레임워크들이 출시되었습니다.

 

Angular, React , Vue.js 등 이 말입니다. 최근에는 Svelte(스벨트)라는 프레임워크도 생겼네요.

 

이제 자바스크립트 프레임워크에 대해서 알았으니 Vue.js로 들어가보려고합니다.

 

Vue.js 는 일단 흔히들 알고있는 MVC패턴이 아니라 MVVM패턴의 뷰 모델에 해당하는 화면단 프레임워크입니다.

 

MVC는 모델 , 뷰 , 컨트롤러로 구분되어있는 반면에 MVVM은 모델 , 뷰 , 뷰모델로 구조화하여 개발하는 방식입니다.

 

여기서 View는 유저 인터페이스이며 HTML/CSS등으로 구성되어있습니다.

 

View Model 은 상태와 연산, 실제논리 및 데이터 흐름을 담당하고 상태 데이터가 변경되면 즉시 View에 반영합니다.

 

Model은 순수 자바스크립트 객체들로 이루어져있습니다.

이로서 뷰와 뷰모델(컨트롤러)의 의존성을 줄일 수 있기에 이는 곧 MVC 패턴과 가장 큰 차별점이기도 합니다.

 

그럼 이제 Vue.js에 대해서 알아보자면 

 

Vue같은 경우에는 다른 프레임워크랑은 다르게 배우기가 굉장히 쉽습니다. 

다른 프레임워크는 타임스크립트,es6,웹팩 등을 함께 학습해야 합니다.

 

그리고 Vue는 Angular의 장점 데이터 바인딩과 React의 Virtual DOM(가상돔)과

같은 필수적인 요소들만 화면을 구현하기 때문에 속도가 빠르고 가볍다고 보시면 됩니다.

 

오늘은 일단 Vue 에 들어가기전에 기본 개념을 알아보고 공부했습니다.