Do it Vue.js 입문 정리

장기효

jangkeehyo@gmail.com

기술 블로그 : https://joshua1988.github.io

깃허브 : https://github.com/joshua1988

Vue.js의 초점은 더 많은 사람들이 쉡게 웹 앱을 만들 수 있도록 도와주는데 있다

-에반유(Vue.js 창시자)

프론트엔드 개발 실무자의 입장에서 Vue.js의 전망이 밝아 보이는 가장 큰 이유는 진입 장벽이 낮다는 것. 배우기도 쉽고 성능까지 우수

예제 다운로드

https://github.com/joshua1988/doit-vuejs

exam:예제코드

quiz:직접해보기

final:할일 관리 프로젝트

pwa:프로그래시브 웹 앱 프로젝트

Vue.js

명시적 렌더링(코어라이브러리) > 컴포넌트기반 > 클라이언트 사이드 라우팅(프레임워크 기능) > 상태관리

2014년 2월 처음으로 공식배포

2018년 현재 깃허브 별개수 80300개

Vue.js장점

-배우기가 쉬움

-리액트와 앵귤러에 비해 성능이 우수하고 빠름

-리액트의 장점과 앵귤러의 장점 가지고 있음(앵귤러의 데이터 바인딩 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있음)

https://vuejs.org/v2/guide/comparison.html

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

ES6 : 자바스크립트의 최신 스펙으로, ECMAScript 2015와 동일한 용어

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

Vue.js의 특징

1)UI 화면단 라이브러리

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

MVVM패턴(위키피디아)

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

뷰(view)                         뷰모델(view Model)                        모델(model)

돔(DOM)                         뷰(Vue.js)                                   자바스크립트 객체(Javascript objects)

------------------------>돔리스너(DOM listener)----------------------------->

------------------------<데이터바인딩(Data binding-------------------------<

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

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

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

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

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

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

2)컴포넌트 기반 프레임워크

리액트와 앵귤러도 모두 컨포넌트 기반의 개발 방식 추구

컴포넌트 기반방식으로 개발하는 이유는

:코드를 재사용하기 쉽기 때문, 그리고 Vue,js의 경우 컴포넌트를 썼을때 HTML코드에서 화면의 구조를 직관적으로 파악할 수 있음

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

뷰는 앵귤러의 양방향 데이터 바인딩과(two-way data binding)과 리액트의 단방향 데이터 흐름(one-way data flow)의 장점을 모두 결합한 프레임워크

양방향 데이터 바인딩이란

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

단방향 데이터 흐름이란

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

4) 그외

빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있습니다.

가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신합니다. 따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 바르게 화면을 그릴 수 있습니다.

Vue.js 개발환경

-크롬브라우저

-텍스트 에디터

-node.js

-Vue 개발자도구

node.js

서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경을 의미(Vue cli를 이용하려면 필요)

LTS버전을 다운로드 하는 하는 것이 더 좋음

Vue개발자 도구

구글에서 vue.js devtools로 검색

크롭 웹 스토어에 추가