Day 1. Vue.js 란?

간단히 말하자면, 웹 페이지 '화면' 을 만들기 위한 Front-end 프레임워크 이자 라이브러리이다.

항상 헷갈리는 프레임워크, 라이브러리를 알고가자!
프레임워크 란, 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것. 많이 사용되는 프레임워크 중에는, 스프링 프레임워크 (Spring Framework), 앵귤러 JS (Angular JS), 장고 프레임워크 (Django Framework) 등이 있다. 나는 스프링 프레임워크를 사용해왔기에 이를 예를 들어보겠다. 스프링 프레임워크는 JAVA개발에 대표적인 프레임워크로, JDBC를 비롯하여 ibatis, JPA등 DB처리를 위해 널리 사용되는 라이브러리와 연동을 지원하고 있다. 보안, 인증, 트랜잭션 등에 신경쓰지않고(메모리 관리 등) business logic개발에 전념할 수 있도록 제공한다. 그래서 프레임워크는 큰 뼈대를 만든다고 생각하면 된다.

하지만 뼈대 안에 기능을 담당하는 부품 즉, 연장 도구 부분이 필요하다. 그러한 역할을 하는 것이 바로, 라이브러리 이다. 사람들이 자주 사용하는 어떠한 기능을 만들어두어 가져다가 어디에든 사용할 수 있게 만들어 놓은 것이다.

하지만, 여기서 혼돈하면 안되는 것이 라이브러라와 API는 조금 다르다 API (Application Programming Interface는, 프로그래밍 언어에서 라이브러리를 사용할 수 있도록 소스코드 수준에서 인터페이스를 노출시긴 것이다. 하지만 라이브러리는 동작하는 완전한 프로그램은 아니지만, 어떠한 특정 기능만을 수행하도록 제작되어 존재하는 프로그램이다. 

너무 서론이 길었다. 

다시 Vue.js로 가보자. Vue.js는 Front-end 즉 화면단 데이터 표현에 관한 기능을 중점적으로 지원하는 라이브러리 이지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉡게 결합하는 형태로도 제공되기 때문에 라이브러리 뿐만아니라 프레임워크 역할도 할 수 있다.

---

MVVM 패턴의 뷰 모델에 해당하는 Vue.js

MVVM 패턴이란, 화면을 모델 (Model) - 뷰 (View) - 뷰 모델 (View Model)로 구조화. 

모델 (Model) : 데이터를 담는 용기, 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩 (Data Binding) : 뷰 (View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델 (View Model) : 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역.

간단히 구조 흐름을 설명하면, 검색을 생각해보자.

검색창에 검색어를 입력하고 '검색' 버튼을 클릭한다 -> 돔 리스너 (DOM Listener)에서 클릭을 감지 -> 데이터 바인딩이 관여하여 데이터를 모델 (Model)에서 가져와 화면에 나타냄

여기서, 뷰는 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여 주는 역할을 함.

 

반응형