Vue.js 입문 (1일차)

- Vue.js로 프로젝트를 만드는 회사가 많아짐에 Vue.js를 입문해야겠다는 생각이 들어 Vue.js를 입문하기 부터 프로젝트를 생성하여 하나의 앱을 만들기까지의 과정을 작성해보고자 한다.

- 금일은 Vue.js가 무엇인지 알아가고 개발환경을 셋팅하는 시간을 가져본다.

 

Vue.js란 

Vue.js는 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크이다. 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있다.

 

뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 

즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다. 

 

Vue의 장점

1. 배우기가 쉽다 

2. 리액트와 앵귤러에 비해 성능이 우수하고 가볍고 빠르다. Vue가 가장 빠름.

3. 리액트의 장점과 앵귤러의 장점을 갖고있다. 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔 기반 렌더링 특징을 모

   두 가지고 있다.

 

Vue.js의 특징

UI 화면단 라이브러리

MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리

 

모델 - 뷰 - 뷰모델로 구조화하여 개발하는 방식을 의미

--> 화면의 요소들을 제어하는 코드와 데이터 제어로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수가 편해지기 때문에 위 방식으로 개발한다. 

 

[용어/설명]

뷰(view) : 사용자에게 보이는 화면

돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고있는 데이터 트리

돔 리스너(DOM LIstener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치

모델(Model) : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

데이터바인딩 (Data Binding)  : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화

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

 

MVVM 구조의 처리 흐름 

뷰는 사용자에게 비춰지는 화면 전체를 의미

돔은 구글로 예를 들면 구글 로고, 검색창, 키보드와 미이크 아이콘, [Google 검색] 버튼 등 화면에 나타나는 HTML 문서 상의 모든 요소를 의미.

 

[Google 검색] 버튼을 클릭하면 돔리스너에서 버튼의 클릭을 감지하고 버튼이 동작하면 검색 결과를 보여주는 로직이 처리되는데, 이 처리과정에서 데이터 바인딩이 관여한다. 검색결과에 해당하는 데이터를 모델에서 가져와 화면에 나타내준다. 뷰는 화면의 요소가 변경되거나 조작이 일어날때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여주는 역할을 한다. 화면의 표현에 주로 관여하는 라이브러리이기 떄문에 화면단 라이브러리라고도 한다. 

 

MVVM(Model - View - ViewModel) 패턴이란?

마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴

'프론트 엔드의 화면 동작과 관련된 로직과 백엔드의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다' 라는 것이다. 

 

[비즈니스 로직]

● 회원이 작성한 아이디 값 저장하기 ->

● 회원정보가 있는 데이터베이스 연결 ->
● 데이터베이스에 회원이 작성한 아이디 값이 있는지 Select -> 

● 회원의 아이디가 이미 있는지 없는지 여부를 데이터화 하여 저장 -> 

● 데이터베이스 연결 끊기 -> View영역에게 가공된 데이터 전달

 

 

컴포넌트 기반 프레임워크

vue가 가지는 큰 특징은 컴포넌트 기반 프레임워크라는 점이다.

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

컴포넌트 기반 방식으로 개발하는 이유는 코드를 재사용하기 쉽기 때문이다. 그리고 뷰의 경우 컴포넌트를 썼을 때 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있다. 

 

컴포넌트 : 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다.

 

리액트와 앵귤러의 장점을 가짐

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

양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다. 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미한다.

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

 

빠른 화면 렌더링을 이해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹화면에 적합한 동작 구조를 갖추고 있다.  가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. 브라우저 입장에서는 성능부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다. 

---

프레임워크 : 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구.

라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집.

바인딩 :  바인딩(Binding) 이란 프로그램의 어떤 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것을 말한다.

렌더링 : HTML,CSS,JavaScript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다.

              브라우저에서 웹페이지를 그려내는 동작

타입스크립트 : 기존 자바스크립트에 엄격한 타입 체크를 도입한 언어. 앵귤러2의 표준.

ES6 : 자바스크립트의 최신 스펙, 아크마 스크립트 2015와 동일한 언어.

웹팩 : 웹 모듈 번들러. 최신 프런트엔드 프레임워크에서 권고하는 필수 웹 성능 개선 도구