웹 애플리케이션과 Vue.js

Vue.js 프레임워크

-Component

-Directive

-Router

-Vuex

 

1. 프론트엔드 웹 애플리케이션

-서버 사이드의 도움을 받지 않고도 스스로 무언가를 해결하고 제공할 수 있는 서비스를 가진 웹

-서버 사이드와 적절하게 연동하면서 기존에 서버 사이드에서 결정했던 많은 기능적인 측면이 클라이언트 사이드에서 구현되는 웹

-CS프로그램 환경처럼 독립적인 클라이언트 사이드앱인데 단지 실행환경이 웹으로 개발

 

클라이언트 사이드 = 브라우저

예전에는 클라이언트 사이드에서 서버에 요청한 다음에 클라이언트가 요청한 업무가 진행되어야 하는데 그 비즈니스 업무 로직이 대부분 서버사이드에서 수행되고, 그 업무 로직에 의해 발생한 데이터를 어느 화면에 준비해서 어디에 찍을건지도 모두 서버사이드에서 결정해서 클라이언트에게 넘겨줌. 클라이언트는 서버사이드가 넘겨준 것을 단순히 자신의 브라우저에 뿌려주는(렌더)역할만 했음

 

=> 시간이 지나면서 웹이 웹 애플리케이션으로 진화되니까 클라이언트 사이드도

서버사이드 결과를 렌더링하는것에 머물지 않고 애플리케이션적인 역할을 하게 됨.

=>과거에는 서버사이드에서 데이터의 위치가 결정되었는데 이를 클라이언트 사이드에서 하게 됨.

=>서버사이드의 도움을 받지 않고 데이터를 자체적으로 저장하는 기법

 

애플리케이션이다 = 브라우저에서 수행되는 것이긴 하지만 클라이언트 사이드 애플리케이션이 서버 사이드 애플리케이션과 적절히 네트워킹하면서 서비스를 제공해준다.

클라이언트 사이드 애플리케이션 = 프론트엔드 웹 애플리케이션

서버사이드 애플리케이션 = 백엔드 웹 애플리케이션

 

 

-화면만 화려한 클라이언트 사이드가 아닌 일정 정도는 애플리케이션 기능이 가능한 클라이언트 사이드 웹 애플리케이션의 요구가 발생 

 

3. 프론트엔드 웹 애플리케이션 기술 요소

 

4. HTML5와 자바스크립트 프레임워크

HTML5 적용 : 애플리케이션으로서의 다양한 기능 구현 필요

자바스크립트 프레임워크 적용 : 애플리케이션의 Base Architecture 필요

(더 이상 렌더가 아니고 애플리케이션이기 때문에 프레임워크 적용을 원함)

 

5. HTML5 기술 요소

• web socket : 연결 지향형 socket 통신
• web storage : 데이터 영속적 저장
• index db : 데이터 영속적 저장
• canvas : Graphic 요소
• audio, video : Multimedia 데이터 처리
• Responsive Web Design : 다양한 사이즈의 Device를 위한 Design

6. 자바스크립트 프레임워크

Angular

React.js

Vue.js

자바스크립트 프레임워크에는 다양한 종류가 있고, 목적이 비슷함

---

자바스크립트 프레임워크

: 자바스크립트를 이용한 웹 애플리케이션의 기본 Architecture 제공을 목적으로 함.

 

-UI Component 제공 : 동적 재사용 가능한 UI Widget

-Router : Hash Control과 이를 통한 SPA 구현

-State Management Framework : 앱의 상태 정보를 유지 프레임워크

 

AngularJS

-MVM Pattern(Model-View-Whatever)

model: 비지니스 업무 로직에 비즈니스 데이터를 표현하는 것

 

 

하나의 페이지에 자바스크립트 영역이 있고 HTML태그 영역(DOM)이 있음

자바스크립트가 서버랑 연동하여 데이터 발생 -> 이 데이터는 DOM에 찍혀야 함.

또 DOM에서 데이터 발생 -> 유저가 입력한 데이터가 업무 로직상 이용되려면 자바스크립트에 대입되어야 함.

 

Two-Way Data Binding
자바스크립트의 데이터 -> DOM에 대입
DOM의 데이터 -> 자바스크립트에 대입

 

Angular 2.0 발표 : 아키텍처적으로 단순화

AngularJS -> Angular

 

목적

-for web

-mobile web

-native mobile : 브라우저에서 수행되는 웹 애플리케이션이 아니라 그냥 모바일 기기에서 수행되는안드로이드 IOS 애플리케이션을 만들겠다는 목적. 

-native desktop

 

React.js

:facebook의 view부분을 위한 컴포넌트 라이브러리

-UI Component

-VIRTUAL DOM

-Unidirectional Data Flow

-JSX

 

Redux 

(vuex도 사실은 Redux부터 시작했던 것을 지원해주기 위해서 나온 것)

Isomorphic JavaScript

React Native

 

Vue.js

Vue.js 특징 

-'Evan you'에 의해 개발

-웹 UI를 빠르게 작성하기 위한 목적

 

 

 

-가상 DOM 지원

-Router

-Vuex