[Do it! Vue.js] Vue.js 란 무엇인가?

Do it! Vue.js 입문

 

Vue.js 현업 개발자이자 국내 최초 Vue.js 전문 강사의 핵심 노하우 대공개!

실무자 3일 완성! 입문자 7일 환성!

 

• 장기효 저자
• 이지스퍼블리싱
• 2018.01.27

front 작업이 필요해서 급하기 스터디를 진행했다.

react 보단 vue가 러닝 커브가 낮다는 소문으로,,, 선택!

 

 

---

UI

뷰는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.

 

 

※ MVVM 패턴

MVVM 패턴이란 화면을 Model - View - ViewModel로 구조화하여 개발하는 방식을 의미한다.

화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수가 편하다.

- View : 사용자에게 보이는 화면

- DOM : HTML 요소의 정보를 담고 있는 데이터 트리

- DOM Listener : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치

- Model : 데이터를 담는 용기, 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

- Data Binding : 뷰에 표시되는 내용과 모델의 데이터를 동기화

- ViewModel : 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역

컴포넌트 기반 프레임워크

뷰는 컴포넌트 기반 프레임워크이다.

 

컴포넌트란 마치 레고 블록과 같다.

 

레고 블록을 잘 조합해서 쌓으면 원하는 모형을 만들 수 있듯이 뷰의 컴포넌트를 조합하여 화면을 구성할 수 있다.

 

리액트, 앵귤러 모두 컴포넌트 기반의 개발 방식을 추구한다. 그 이유는 코드 재사용이 쉽다.

 

리액트와 앵귤러의 장점을 가진 프레임워크

뷰는 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다.

 

양방향 데이터 바인딩

화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것

 

단방향 데이터 흐름

컴포넌트의 단방향 통신을 의미한다. 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있다.

 

빠른 화면 랜더링