Vue.js 소개, 공부, 정리

한국 뷰 포럼

https://kr.vuejs.org/

소개

• 대화형 웹 인터페이스 개발하는데 사용하는 자바스크립트 프레임워크
• 자바스크립트로 서버의 부담을 줄이기 위해 사용
• 2014 Evan You가 만들어 발표
• MVVM 디자인 패턴(Model - View - ViewModel)

특징

• 리액트, 앵큘러JS 비해 작고 가볍다
• 속도가 빠르다
• 가상DOM을 사용한다.
• 컴포넌트(재사용)
• 라우팅
• 애니메이션효과 
• 양방향 데이터 바인딩(v-model), 단방향 데이터 흐름 장점을 모두 결합한 프레임워크(양방향:화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다.)
• 컴포넌트기반 프레임워크(레고블럭과 같다. 뷰의 컴포넌트를 조합하여 화면을 구성할 수 있다.)

용어

• HTTP(HyperText Transfer Protocol) : 브라우저와 서버간 데이터를 주고받는 통신 프로토콜. 요청(Request),응답(Response) '해당 데이터를 보내주세요' = HTTP요청
• Reactivity(리액티비티) : 뷰의 반응성
• ajax : 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부부만 변경할 수 있게 하는 자바스크립트 기법.
• 뷰에서는 ajax 지원하기 위한 라이브러리는 액시오스(axios)이다.
• 액시오스(axios) : 현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP통신 라이브러리
• Promise 기반의 API : 서버에 데이터를 요청하여 받아오는 동작과 같이 비동기 로직 처리에 유용한 자바스크립트 객체
• 뷰(View) : 사용자에게 보이는 화면
• 돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
• 돔 리스너(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하는 특정 로직을 수행하는 장치
• 모델(Model) : 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
• 데이터 바인딩(Data Binding) : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
• 뷰 모델(ViewModel) : 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역
• 인스턴스(Instance) : 레고에서  기본판 new Vue();를 말한다.
• 컴포넌트(Component) : 레고에서 블럭을 의미한다. 조합하여 화면을 구성할 수 있는 블록을 의미.
• 템플릿(template) : 화면에 표시할 HTML,CSS등의 마크업 요소를 정의하는 속성,뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
• 메소드(method) : 화면 로직 제어와 관계괸 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가 할 수 있다.
• created : 뷰 인스턴스가 생성되자마자 실행할 로직의 정의 할 수 있는 속성.
• 라이프사이클 : 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명주기
• 트리 : 컴퓨터 자료구조 중 하나로, 노드끼리의 연결이 부모 - 자식의 구조를 따릅니다. 전체적인 모양이 나무와 비슷해서 트리라고 부릅니다. 트리는 윈도우 파일 시스템 체계를 비롯하여 각종 데이터베이스에 활용되고 있고 뷰에서도 컴포넌트를 이해할때 필요한 개념
• 지역(Local)컴포넌트 : 특정 인스턴스에서만 유효한 범위(인스턴스를 생성할때 마다 등록)
• 전역(Global)컴포넌트 : 여러 인스턴스에서 공통으로 사용할 수 있다.(한번 등록하면 어느 인스턴스에서든지 사용)
• 와치(Watch) : data속성에서 정의한 변수를 감시하고 있다가 변수가 가지고 있는 값이 변경되면 이를 감지해 동작하는 요소
• 컴퓨티드(computed) : HTML을 랜더링할 때 필요한 겂을 생성하는 함수의 일종. methods속성에서 함수를 정의하는 것 대신 사용한다.
• methos 와 computed 차이 : 메섣는 반환하는 값이 계속 같아도 함수가 계속 호출되고, 컴퓨티드는 반환하는 값이 변하지 않았다면 이전에 반한한 값을 기억해 두었다가 그 값을 그대로 사용한다.
• 컴퓨티드의 set : computed에 값을 설정할 때 호출한다.
• 컴퓨티드의 get : computed로 지정된 값을 사용할 때 호출한다.
• v-html : 지정된 데이터를 html 코드로 인식하여 바인딩한다.
• v-bind : 속성명 : 지정된 데이터를 지정된 속성 값으로 설정한다. v-bind는 생략이 가능하다. (v-bind: => : ) id, class, style등 HTML속성 값을 뷰 데이터 값을 연결할 사용하는 데이터 연결방식
• 디렉티브: 뷰디렉티브란  HTML 태그안에 v- 접두사를 가지는 모든 속성을 의미한다. (v-if="loding")
• css 클래스 바인딩 : HTML의 class 속성에 css클래스를 바인딩할 수 있다.
• Inline Style   바인딩 : HTML의 style속성을 통해 설정하는 Inline style 속성의 값을 v-bind로 설정할 수 있다.
• props속성: 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성 
• 이벤트 버스 : 최하위에 있는 컴포넌트에서 상위 컴포넌트로 데이터를 전달하려면 버스를 활용하여 데이터를 편리하게 전달할 수 있다. 대신 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않는 문제가 발생됨. 이문제를 해결하려면 뷰엑스(vuex)라는 상태관리도구필요
• 라우터 :  웹 페이지 간의 이동방법. 라우팅을 이용하면 화면 간의 전환이 매끄럽고 애플리케이션의 사용자 경험을 향상 시킬 수 있다. 
• 뷰라우터 : 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다.
• 네스티드 라우터(Nested Router) : 페이지를 이동할 때 최소2개 이상의 컴포넌트를 화면에 나타낼 수 있음
• 네임드 뷰(Named View) : 특정 페이지로 이동 했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식
• 뷰로더(Vue Loader) : 웹팩에서 지원하는 라이브러리. 싱글 파일 컴포넌트 체계에서 사용하는 .vue파일의 내용을 브라우저에서 실행가능한 웹 페이지의 형태로 변환해 준다.

Vue객체

• VueJS 애플리케이션은 Vue 객체를 생성하는 것으로 시작된다.
• Vue 객체는 VueJS 애플리케이션에서 사용되는 데이터, 함수 등 다양한 요쇼들을 관리하는 객체이다.

el

• 웹 애플리케이션 내의 html 요소 중 Vue객체가 관리할 태그를 설정한다.

data

• 웹 애플리케이션에서 사용하는 데이터를 설정한다.

$mount()

• el 속성과 동일하게 인스턴스를 화면에 붙이는 역활을 한다.
• 인스턴스를 생성할 때 el속성을 넣지 않았더라도 생성하고 나서 $mount()를 이용하면 강제로 인스턴스를 화면에 붙일 수 있다.

v-bind → : 바인딩 약어 ex) :value

v-on → @ 이벤트 약어  ex) @keyup

Vue Cli명령어 (빠르게 개발툴을 만들어주는 툴)

뷰 cli 전역 설치 : sudo npm install -g @vue/cli  (노드모듈이 설치되어 있어야함)

뷰 버전 확인 : vue --version

새로운 프로젝트 만들기 vue create [프로젝트이름]  ex)vue create new-cli-project

웹팩 프로젝트 만들기 vue init web-pack-simple [프로젝트명]

관련 라이브러리 설치 : npm install

프로젝트 구동 : npm run dev

-Vue Cli 템플릿 종류-

• vue init webpack : 고급 웹팩 기능을 활용한 프로젝트 구성 방식. 테스팅,문법 검사 등을 지원
• vue init webpack-simple : 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용
• vue init browserify : 고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식. 테스팅, 문법 검사 등을 지원
• vue init browserify-simple : 브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토 타이핑용
• vue init simple : 최소 뷰 기능만 들어간 HTML 파일 1개 생성
• vue init pwa : 웹팩 기반의 프로그레시브 웹 액(PWA, Progressive Web App) 기능을 지원하는 뷰 프로젝트

프로젝트 생성 후 필수 설정

-반응형 웹 디자인 태그 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0"> : 기기 너비만큼 웹 페이의 너비를 지정하라는 의미

-어썸 아이콘 CSS 설정

<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css"> :  어썸아이콘CSS

-폰트와 파비콘 설정

 <link rel="shortcut icon" type="text/css" href="src/assets/favicon.ico" type="image/x-icon">

 <link rel="icon" href="src/assets/favicon.ico" type="image/x-icon">

 <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">