Vue란?

Vue.js(이하 Vue) 란?

SPA의 웹 페이지 화면 개발을 위한 프론트엔드(Front-end) 프레임워크중 하나입니다.

SPA란?

MPA (Multi Page Application) - 기존 웹 페이지

• UI 변경시 새로운 HTML으로 DOM 생성 (멀티 페이지)
• 서버 사이드에서 HTML을 렌더링하기 때문에 브라우저는 최소한의 기능만 요구
• 서버의 상황에 따라 요청에서부터 응답까지 지연될 수 있음
• 접속하는 브라우저가 많을 경우 대규모 서버사이드 인프라 스트럭처 필요

SPA (Single Page Application)

• 최초 HTML을 받고 DOM 생성 (싱글 페이지)
• 이후 UI 변경은 AJAX로 DOM의 일부만 추가, 수정, 삭제
• 프레임워크를 이용해서 일관된 코드 작성이 필요(Angular, React, Vue)
• 자바스크립트 코드량이 증가, 초기 로딩 속도가 늦음

Vue의 특징

• 컴포넌트 기반 프로그래밍 모델 제공
• 선언적 렌더링
  Vue는 JavaScript 상태를 기반으로 HTML 렌더링을 선언적으로 설명하는 템플릿 구문 사용
• 반응성
  Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생할 때 DOM을 효율적으로 업데이트

Component 란?

• 재사용 가능하고, 조립 가능한 독립적인 UI 객체
• HTML조각(<template>) + JavaScript(<script>) + CSS(<style>) 의 결합체

View와 Component

• View: 화면 하나(페이지)를 말하며, View는 재사용이 어려운 컴포넌트
  //views 폴더에 작성
• Component: 여러 화면(페이지) 안에 배치될 수 있는 재사용 UI 컴포넌트
  //components 폴더에 작성
• 파일 확장명이 모두 .vue 로 작성되는 컴포넌트
• 싱글 파일 또는 폴더 형태로 작성가능
  

모듈(Module) 이란?

• 변수, 함수, 클래스, 인스턴스의 집합으로 독립된 파일(~.js)로 만든 것
  모듈로 만들면 여러 프로그램에서 재사용 가능
  

##모듈의 종류

• CommonJs 모듈: Node.js 기본 module.exports 및 exports 를 이용해서 내보내기 작성 require() 함수를 이용해서 가져옴 ,require()를 여러 번 실행 하더라도 모듈은 한번만 실행 따라서 리턴된 객체 또는 함수는 동일
  

- EcmaScript 모듈: EcmaScript 2015(ES6)에서 지원 export default와 export를 이용해서 내보내기 작성 impor문을 이용해서 가져옴

• 모듈 파일 작성
  

• Vue.js는 webpack을 이용해서 ES6 모듈 파일들을 가져와서 하나의 전체 파일 또는 몇개의 파일들로 합침(번들링)