Do it Vue.js 입문 정리5

vue 템플릿은 

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

템플릿 속성을 사용하는 방법은 두가지

-ES5에서 vue 인스턴스 template 속성 활용

-싱글 파일 컴포넌트 체계의 <template> 코드를 활용하는 방법

ES5에서 template 속성

  <script>

      new Vue({

             template:'<p>HELLO{{message}}</p>'

      });

    </script>

template 속성에 대해 한가지 알아둘 특징

사용자가 볼수 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업+ vue 데이터를 가상 돔 기반의 render()함수로 변환합니다

변환된 render()함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 합니다

그리고 변환 과정에서 뷰의 반응성이 화면에 더해집니다

render()함수에 익숙하다면 직접 구현해도 됩니다

JSX기반의 render()함수에 더 익숙한 리액트 개발자라면 template속성을 이용하지 않고 render() 함수를 사용해 화면 요소를 동일하게 구현할 수 있습니다

하지만 vue 프레임워크 특징 자체가 JSX나 render()함수를 모르는 사람들도 쉽게 HTML를 이용하여 개발할 수 있게 하는 것을 목표로 하기 때문에 template 속성을 사용하도록 권하고 있습니다

추후에 뷰의 반응성과 가상 돔에 대해 충분히 이해하고 나면 render()함수를 직접 구현할 수 있습니다

그러면 화면 요소의 동작 하나에 직접 관여할 수 있기 때문에 더 빠르게 화면을 렌더링할 수 있을 것입니다

ES6 싱글 파일 컴포넌트 체계

<template>

      <p>HELLO {{message}} </p>

</template>

template에서 사용하는 vue의 속성과 문법은 다음과 같습니다

-데이터 바인딩

-자바스크립트 표현식

-디렉티브

-이벤트 처리

-고급 템플릿 기법

데이터 바인딩

:HTML 화면 요소를 vue 인스턴스의 데이터와 연결하는 것을 의미

주요 문법으로는 {{}}문법과 v-bind속성이 있습니다

{{}}는 vue 인스턴스의 데이터를 HTML태그에 연결하는 가장 기본적인 텍스트 삽입 방식입니다

vue 뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법입니다

v-bind

아이디, 클래스, 스타일 등의 HTML속성값에 vue 데이터 값을 연결할 때 사용하는 데이터 연결 방식입니다

형식은 v-bind속성으로 지정할 HTML속성이나 props속성 앞에 접두사로 붙여줍니다.

   <div id="app">

      <p v-bind:id="idA">아이디 바인딩</p>

      <p v-bind:class="classA">클래스 바인딩</p>

      <p v-bind:style="styleA">스타일 바인딩</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          idA: 10,

          classA: 'container',

          styleA: 'color: blue'

        }

      });

    </script>

vue 템플릿에서도 자바스크립트 표현식 쓸수 있습니다

   <div id="app">

      <p>{{ message }}</p>

      <p>{{ message + "!!!" }}</p>

      <p>{{ message.split('').reverse().join('') }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        }

      });

    </script>

자바스크립트 표현식에서 주의할 점

첫째, 자바스크립트의 선언문과 분기 구문은 사용할 수 없습니다

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

    <div id="app">

      <!-- 1. -->

      {{ var a = 10; }} <!-- X, 선언문은 사용 불가능 -->

      {{ if (true) {return 100} }} <!-- X, 분기 구문은 사용 불가능 -->

      {{ true ? 100 : 0 }} <!-- O, 삼항 연산자로 표현 가능 -->

      <!-- 2. -->

      {{ message.split('').reverse().join('') }} <!-- X, 복잡한 연산은 인스턴스 안에서 수행 -->

      {{ reversedMessage }} <!-- O, 스크립트에서 computed 속성으로 계산 후 최종 값만 표현 -->

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        },

        computed: {

          reversedMessage: function() {

            return this.message.split('').reverse().join('');

          }

        }

      });

    </script>

또한 반복적인 연산에 대해서는 미리 계산하여 저장해 놓고, 필요할 때 바로 불러오는 캐싱효과를 얻을 수 있습니다

디렉티브

:vue 디렉티브란 HTML 태그 안에 v-접두사를 가지는 모든 속성들을 의미합니다.

앞에서 배운 v-bind속성도 디렉티브에 해당합니다.

디렉티브 형식은 다음과 같습니다

<a v-if="flag">두잇 vue.js</a>

디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능

vue의 데이터 값이 변경되었을때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신됩니다

이런식으로 화면의 요소를 직접 제어할 필요없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작할 수 있습니다

동적인 웹 앱을 구현할때 자주 사용하는 주요 디렉티브

v-if

: 지정한 뷰 데이터의 값의 참, 거짓 여부에 따라 해당 HTML태그를 화면에 표시하거나 표시하지 않습니다

v-for

:지정한 뷰 데이터의 개수만큼 해당 HTML태그를 반복 출력합니다

v-show

:v-if와 유사하게 데이터의 진위 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않습니다

다만 v-if는 해당 태그를 완전히 삭제하지만 v-show는 css 효과만 display:none으로 주어 실제 태그는 남아있고 화면상으로만 보이지 않습니다

v-bind

:HTML태그의 기본 속성과 vue 데이터 속성을 연결합니다

v-on

:화면 요소의 이벤트를 감지하여 처리할 때 사용합니다. 예를 들어 v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메소드를 실행 할 수 있습니다

v-model

:폼(form)에서 주로 사용되는 속성입니다. 폼에 입력한 값을 vue 인스턴스의 데이터와 즉시 동기화합니다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있습니다. <input>, <select>, <textarea> 태그에만 사용할 수 있습니다

디렉티브 예제

   <div id="app">

      <a v-if="flag">두잇 Vue.js</a>

      <ul>

        <li v-for="system in systems">{{ system }}</li>

      </ul>

      <p v-show="flag">두잇 Vue.js</p>

      <h5 v-bind:id="uid">뷰 입문서</h5>

      <button v-on:click="popupAlert">경고 창 버튼</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          flag: true,

          systems: ['android', 'ios', 'window'],

          uid: 10

        },

        methods: {

          popupAlert: function() {

            return alert('경고 창 표시');

          }

        }

      });

    </script>

앵귤러 디렉티브와 vue 디렉티브

앵귤러에서 사용하는 디렉티브 역시 vue의 디렉티브와 비슷한 역할을 합니다

개발자가 돔 요소를 직접 제어하지 않고 프레임워크에 돔 요소 제어 권한을 위임하는 것

물론 필요에 따라 앵귤러나 뷰 모두 개발자가 직접 돔 요소에 접근할 수 있지만 프레임워크에서 권하지 않습니다.

또한 앵귤러와 vue 모두 형식과 기느을 직접 제작해서 사용할 수 있습니다.

이벤트처리

:v-on디렉티브와 methods속성을 활용

제이쿼리 못지않게 vue도 이벤트 처리가 매우 간단합니다

    <div id="app">

      <button v-on:click="clickBtn">클릭</button>

</div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        methods: {

          clickBtn: function() {

            alert('clicked');

          }

        }

      });

    </script>

v-on 디렉티브로 메스드를 호출할때 인자값을 넘기는 방법

    <div id="app">

      <button v-on:click="clickBtn(10)">클릭</button>

</div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        methods: {

          clickBtn: function(num) {

            alert('clicked ' + num + ' times');

          }

        }

      });

    </script>

event 인자를 이용해 화면 요소의 돔 이벤트에 접근

   <div id="app">

      <button v-on:click="clickBtn">클릭</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        methods: {

          clickBtn: function(event) {

            console.log(event);

          }

        }

      });

    </script>

고급 템플릿 기법

고급 템플릿 기법은 실제 애플리케이션을 개발할때 유용한 속성

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

computed 속성

데이터를 가공하는 등의 복잡한 연산은 vue 인스턴스 안에서 하고 

최종적으로 HTML에는 데이터를 표현만 해야 함

computed 속성은 이러한 데이터 연산들을 정의하는 영역임

computed 속성의 첫번째 장점

data 속성 값의 변화에 따라 자동으로 다시 연산한다는 점

computed의 속성의 두번째 장점

캐싱(동일한 연산을 반복해서 하지 않기 위해 연산의 결과 값을 미리 저장하고 있다가 필요할 때 불러오는 동작)

computed속성과 methods 속성의 차이점

methods속성은 호출할때만 해당 로직이 수행되고, 

computed속성은 대상 데이터의 값이 변경되면 자동적으로 수행된다는 것

다시 말해 수동적으로 데이터를 갱신하느냐, 능동적으로 데이터를 갱신하느냐의 차이점

methods는 캐싱을 하지 않고 computed는 캐싱을 함

따라서 복잡한 연산을 반복 수행해서 화면에 나타내야 한다면 computed 속성을 이용하는 것이 methods 속성을 이용하는 것보다 성능면에서 효율적임

<div id="app">

      <p>{{ message }}</p>

      <button v-on:click="reverseMsg">문자열 역순</button>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        },

        methods: {

          reverseMsg: function() {

            this.message = this.message.split('').reverse().join('');

            return this.message;

          }

        }

      });

    </script>

watch 속성

데이터 변화를 감지하여 자동으로 특정 로직을 수행합니다

computed속성과 유사하지만 computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면에

watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합

비동기처리란?

웹 앱에서 데이터를 호출할때 일반적으로는 서버에 http 요청을 보냅니다

그런데 자바스크립트 코드가 실행되는 시점에서는 서버에 보낸 요청이 언제 응답이 올지 알수 없습니다

따라서 다른 자바스크립트 연산에 영향을 주지 못하도록 별도의 영역에서 해당 데이터를 요청하고 응답을 기다립니다.

이를 자바스크립트 비동기 처리 로직이라고 합니다

인풋박스의 입력값을 v-model 디렉티브로 연결하여 입력 값에 변화가 있을때 마다 watch속성에서 변화된 값을 로그로 출력합니다

 <div id="app">

      <input v-model="message">

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        data: {

          message: 'Hello Vue.js!'

        },

        watch: {

          message: function(data) {

            console.log("message의 값이 바뀝니다 : ", data);

          }

        }

      });

    </script>

v-model 디렉티브는 앵귤러의 양방향 데이터 바인딩을 본따 만든 vue의 기능

앵귤러와 동일한 방식으로 화면단의 데이터를 스크립트단의 특정 데이터와 일치시켜 줍니다

싱글 파일 컴포넌트 체계

.vue 파일로 프로젝트 구조를 구성하는 방식

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

.vue 파일의 기본구조

<template>

//HTML 태그 내용 - 화면에 표시할 요소들을 정의하는 영역(html+vue 데이터 바인딩)

</template>

<script>

export default{

//자바스크립트 내용 - vue 컴포넌트의 내용을 정의하는 영역(template, data, methods 등)

}

</script>

<style>

//css 스타일 내용 - 템플릿에 추가한 HTML태그의 CSS 스타일을 정의하는 영역

</style>

***export default{} 코드는 ES6의 자바스크립트 모듈화와 관련된 문법

앞에서 배운 싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩이나 브라우저파이와 같은 도구가 필요합니다

웹팩은 웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러입니다

브라우저리파이도 웹팩과 유사한 성격의 모듈 번들러이지만 웹팩과 다르게 웹 자원 압축이나 빌드 자동화 같은 기능이 없습니다

웹팩 한글 강의

https://www.infleran.com/course/webpack-웹팩-강좌/

vue 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI도구(NODEJS가 설치되어 있어야함)를 제공

CLI 설치

npm install vue-cli -global

vue CLI 명령어 템플릿

-vue init webpack

고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사등을 지원

-vue init webpack-simple

웹팩 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑용

-vue init browserify

고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사등을 지원

-vue init browserify-simple

브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식, 바른 화면 프로토타이핑용

-vue init simple

최소 vue 기능만 들어간 HTML 파일 1개 생성

-vue init pwa

웹팩 기반의 프로그레시브 웹 앱 기능을 지원하는 vue 프로젝트

vue CLI 명령어 템플릿들의 공통점

첫째, 웹팩이나 브라우저리파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용할 수 있습니다

둘째, .vue 파일을 HTML, CSS, 자바스크립트 파일로 변환해 주기 위한 vue 로더를 포함하고 있습니다.

결론적으로 .vue 파일 방식으로 애플리케이션을 개발하려면 vue 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요하다는 것을 알 수 있습니다

언급한 템플릿 중 웹팩과 기타 기능에 신경쓰지 않고 vue 프레임워크 자체에 가장 집중할 수 있는 템플릿은 webpack-simple

webpack 템플릿은 웹팩의 여러가지 기능과 함께 테스팅 라이브러리, 문법 검사 라이브러리를 모두 포함하고 있기 때문에 프로젝트 구성방식을 파악하는데 상당한 시간이 소요

그리고 까다로운 문법 검사로 인해 화면을 빠르게 구현하기 어려움

반면에 webpack-simple 템플릿은 vue로 개발하기 위한 웹팩의 최소 기능들만 있어 프로젝트 구성 자체가 간단합니다

vue-cli로 프로젝트 만들고 웹페이지 띄우기

0)vue-cli 설치

1)vue init 템플릿

2)npm install

3)npm run dev

vue 로더는 웹팩에서 지원하는 라이브러리입니다.

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

웹팩 설정 파일의 vue 로더 속성 확인

weback.config.js파일

test는 로더가 적용될 대상파일 지정

loader는 적용할 로더의 종류를 지정

프로젝트 폴더내에서 .vue확장자를 가진 파일을 모두 선택하여 vue 로더를 적용하는 코드

그리고 .vue 파일을 선택하기 위해 자바스크립트 정규 표현식을 사용