Vue.js

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

MVVM 패턴

Model, View, View Model
화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있음
유지보수 용이

View

사용자에게 보이는 화면

DOM

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

DOM Listener

돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치

Model

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

Data Binding

View에 표시되는 내용과 모델의 데이터를 동기화

View Model

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

Vue 인스턴스

new Vue({
    el:    ,
    data: {
       ///
    }
});

Vue 생성자

뷰 라이브러리를 로딩하고 나면 접근 할 수 있음.
뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의

생성자

객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 더불어 기존 기능을 쉽게확정하여 사용하는 기법

Vue 인스턴스 옵션 속성

data

미리 정의되어있는 속성

미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점, 뷰 인스턴스로 화면을 랜더링할 때 화면이 그 려질 위치의 돔 요소를 지정 ex: el: '#id'

template

화면에 표시할 HTMl, CSS등의 마크업 요소를 정의하는 속성

methods

화면 로직 제어와 관련된 메서드를 정의하는 속성

created

뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 잇는 속성

Vue 인스턴스의 유효범위

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타남.

뷰 인스턴스 라이프 사이클

beforeCreate

인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 data, methods속성 정의x, 돔 화면 요소에 접근x

created

data, methods속성 정의, 정의된 값 접근o/돔요소 접근x

beforeMount

template 속성ㅇ레 지정한 마크업 속성을 render() 함수로 변환 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출되는 단계

render() : 자바스크립트로 화면의 돔을 그리는 함수

mounted

el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출 화면 요소 제어 로직 사용 용이

beforeUpdate

인스턴스에 정의한 속성들이 화면에 치환, 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시(데이터관찰)

update

데이터 변형 후 가상 돔으로 다시 화면을 그리고나면 실행되는 단계

beforeDestory

뷰 인스턴스가 파괴되기 직전에 호출, 뷰 인스턴스의 데이터를 삭제하기 좋은 단계

destroyed

뷰 인스턴스가 파괴되고 나서 호출되는 단계

컴포넌트

조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)

전역 컴포넌트 등록

Vue.conponent('컴포넌트 이름', {
    // 컴포넌트 내용
});

지역 컴포넌트 등록

new Vue({
    components: {
        '컴포넌트 이름': 컴포넌트 내용
    }
});

props 속성

'상위 컴포넌트'에서 '하위 컴포넌트'로 데이터를 전달할 때 사용하는 속성

Vue.component('child-component', {
    props: ['props 속성 이름'],
});

<child-component v-binding:props 속성이름 = "상위 컴포넌트의 data 속성">

new Vue 인스턴스 생성
Vue.component로 하위 컴포넌트 child-component 등록
child-component의 내용에 props 속성으로 propsdata 정의
HTML에 컴포넌트 태그 추가
태그 v-bind propsdata="message"는 상위 컴포넌트의 message 속성 값인 텍스트를 하위 컴포넌트의 propsdata로 전달

이벤트 발생과 수신

'하위 컴포넌트'에서 '상위 컴포넌트'로 데이터를 전달할 때 사용하는 속성

$emit() / v-on 속성 사용

이벤트 발생

this.$emit('이벤트명');
- 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부 this = 하위 컴포넌트

이벤트 수신

<child-component v-on:이벤트명="상위 컴포넌트의 메서드명">

*상위->하위 = props / 하위->상위 = 이벤트

------------------------------

같은 레벨의 컴포넌트 간 통신

옆 컴포넌트에 값을 전달하려면 하위에서 공통 상위 컴포넌트로 이벤트를 전달한 후 공통 상위 컴포너트에서 2개의 하위 컴포넌트에 props를 내려보내야 함.

이벤트로 상위컴포넌트 전달
상위 컴포넌트에서 하위 컴포넌트로 props -> 상위 컴포넌트가 필요 없음 강제로 두어야 함. -> 해결책 : 이벤트 버스

관계 없는 컴포넌트 간 통신 - 이벤트 버스

상위 하위 관계를 유지하고 있지 않아도 컴포넌트간 데이터 전달 가능

로직을 담는 인스턴스 + 새 인스턴스 이벤트를 보내고 받음

보내는 컴포넌트 - .$emit()
받는 컴포넌트 - .$on()

--------------------------------------------------------------------

뷰 라우터

라우팅이란?

웹 페이지 간의 이동 방법

뷰 라우터란?

뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리.

네스티드 라우터

라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.

상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조

-> URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시됨.

----------------------------------

네임드 뷰

특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식

같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시

뷰 HTTP 통신

HTTP : 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜

1. 제이쿼리

2. ajax : 서버에 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법

뷰 리소스

특정 데이터를 받아옴.

엑시오스

뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리

Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현 할 수 있다.

Promise 기반의 API

서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체
자바 스크립트는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려주지 않는다.
데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise 활용

axios.get('URL 주소').then().catch() -> GET 요청 -> 서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행 
                                    -> 오류가 발생하면 catch()에 정의한 로직 수행 

axios.post('URL 주소').then().catch() -> POST 요청 -> 위와 동일 

axios({ 
    methods: 'get',
    url: 'URL 주소',
    ``` 
   
}) 
-> 요청에 대한 자세한 속성들을 직접 정의하여 보낼 수 있음. 
ex) 요청 보낼 URL, HTTP 요청 방식, 보내는 데이터 유형 등등

뷰 템플릿

HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성

<script>
    new Vue({
        // 템플릿
        template: '<p>Hello {{ message }} </p>'
    });
</script>

render()

사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환
변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 함.
변환 과정에서 뷰의 반응성이 화면에 더해짐.

template 속성을 사용하지 않은 경우


// 먼저 <h3>를 화면에 표시하고, 인스턴스가 생성되면 message의 값을 치환
<div id="app">
    <h3>{{ message }}</h3>
</div>

'''

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js'
        }
    });
</script>

template 속성을 사용한 경우


// 아무런 내용이 없다가 인스턴스가 생성되면 <h3>가 화면에 달라 붙어서 표시
<div id="app">
</div>

'''

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js'
        },
        template: '<h3>{{ message }}</h3>'
    });
</script>

ES6 : 싱글 파일 컴포넌트 체계

<template>
    <p>Hello {{ message 
</template>

템플릿에서 사용하는 뷰의 속성과 문법

데이터 바인딩
자바스크립트 표현식
디렉티브
이벤트 처리
고급 템플릿 기법

1.데이터 바인딩

HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것

ex) {{}} 문법, v-bind 속성

{{ }} - 콧수염 괄호
- 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식

{{ }}를 이용한 데이터 바인딩

// data 속성의 message 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신
<div id="app">
    <h3>{{ message }}</h3>
</div>

'''

<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js'
        }
    });
</script>

v-once 속성을 이용한 1회 바인딩

// v-once 속성을 이용한 1회 바인딩
// 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않다면 v-once 속성 사용
<div id="app" v-once>
    {{ message }}
</div>

v-bibd
- 아이디, 클래스, 스타일 등의 HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식
- v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙임.

2. 자바스크립트 표현식

뷰의 템플릿에서도 자바스크립트 표현식을 사용할 수 있음.

!주의점!

1. 자바스크립트의 선언문과 분기 구문은 사용할 수 없다.

2. 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 한다.

3. 디렉티브

HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미

<a v-if="flag">두잇 Vue.js</a>
-> 뷰 인스턴스 데이터 속성에 정의된 flag 값에 따라 보이기도하고 안보이기도 함.

화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능
뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신

디렉티브 이름	역할
`v-if`	지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않음. *태그 완전 삭제*
`v-for`	정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력
`v-show`	v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않는다. *css display:none 처리*
`v-bind`	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결
`v-on`	화면 요소의 이벤트를 감지하여 처리할 대 사용 ex) v-on:click 해당 태그의 클릭 이벤트 감지하여 특정 메서드 실행
`v-model`	폼(form)에서 주로 사용되는 속성. 입력한 값을 뷰 인스턴스의 데이터와 즉시 등기화. 화면에 입력된 값을 저장하여 서버에 보내거나 watch같은 고급 속성을 이용하여 추가 로직을 수행할 수 있음. ex) input, select, textarea 태그에만 사용할 수 있음.

4. 이벤트 처리

화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 활용

5. 고급 템플릿 기법

실제 애플리케이션을 개발할 때 유용한 속성.

데이터 바인딩, 디렉티브와 같은 기본적인 문법과 함께 사용.

computed 속성

데이터 연산들을 정의하는 영역

장점

data 속성 값의 변화에 따라 자동으로 다시 연산.
캐싱(동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러옴)

methods 속성과 computed 속성의 차이점

methods 속성은 호출할 때만 해당 로직을 수행(수동적으로 데이터 갱신)
computed 속성은 대상 데이터의 값이 변경되면 자동적으로 수행(능동적으로 데이터 갱신)

watch 속성

데이터 변화를 감지하여 자동으로 특정 로직을 수행
- 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합

싱글 파일 컴포넌트 체계

.vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일

<template>
<!-- HTML 태그 화면에 표시할 요소들을 정의하는 영역 -->   ex) HTML+뷰 데이터 바인딩
</template>

<script>
export default{
    //뷰 컴포넌트의 내용을 정의하는 내용 ex)template, data, methods
}
</script>

<style>
/* 템플릿에 추가한 HTML 태그의 CSS 스타일 내용 */ 
</style>

예시

<template>
    <div>
        <span>
            <button> {{message}} </button>
        </span>
    </div>
</template>

<script>
export default {
    data: {
        message: 'click this button'
    }
}
</script>


<style>
span{
    font-size: 1.2em;
}
</style>

뷰 로더

웹팩에서 지원하는 라이브러리
싱글 파일 컴포넌트 체계에서 사용하는 .vue 파일의 내용을 브라우저에서 실행 가능한 웹페이지의 형태로 변환해줌.

sosoKim9966/vue