5장 화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성

05-1 뷰 템플릿

뷰 템플릿이란?

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

템플릿 속성을 사용하는 방법은 두 가지
1. ES5에서 뷰 인스턴스의 template의 속성을 활용하는 방법
template: <p>Hello {{message}}</p>와 같은 코드가 템플릿을 의미한다.

템플릿 속성은 사용자가 볼 수 없지만 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다.

2. 싱글 파일 컴포넌트 체계의 <template>코드 활용

데이터 바인딩

데이터바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것
{{}} 이나 v-bind 속성을 이용

{{}} - 콧수염 괄호

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

<div id="app">
  {{ message }}
</div>

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

data 속성의 message 속성 값인 Hello Veu.js를 <div>태그 안의 {{message}}에 연결하여 화면에 나타낸다.

v-bind

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

<div id="app">
  	<p v-bind:id="idA">아이디 바인딩<p>
	<p v-bind:class="classA">클래스 바인딩<p> 
    <p v-bind:style="styleA">스타일 바인딩<p>
</div>
<script>
  new Vue({
  	el: '#app',
  	data: {
  		idA: 10,
  		classA: 'container',
  		styleA: 'color: blue'
  	}
  })
</script>

HTML의 기본 속성인 id, class, style 의 앞에 v-bind:를 붙여 뷰 인스턴스에 정의한 데이터 속성과 연결하여 화면에 나타낸다.

v-bind: 는 :로 간소화 할 수 있다. v-bind:id 와 :id는 같은 동작을 함

자바스크립트 표현식

뷰의 템플릿에서도 자바스크립트 표현식을 쓸 수 있다.
콧수염 괄호 안에 자바스크립트 표현식을 넣으면 사용할 수 있다.

{{ message + "!!!"}}
{{ message.split('').reverse().join('')}}

등으로 사용할 수 있다.

디렉티브

뷰 디렉티브란 HTML 태그 안에 v-접두사를 가지는 모든 속성을 의미
디렉티브는 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능
뷰의 데이터 값이 변경되었을 때 화면의 요소들이 리액티브하게 반응하여 변경된 데이터 값에 따라 갱신됨.

디렉티브 이름	역할
v-if	지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시 하지 않음.
v-for	지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력
v-show	v-if 와 유사하게 데이터의 진위 여부에 따라 해당 태그를 표시하는데 v-if는 태그를 완전히 삭제하지만 v-show는 css효과만 주어 실제 태그는 남아 있다
v-bind	HTML 태그의 기본 속성과 뷰 데이터 속성을 연결
v-on	화면 요소의 이벤트를 감지하여 처리할 때 사용.
v-model	폼에서 주로 사용되는 속성, 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다

이벤트 처리

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

<button v-on:click="clickBtn">클릭</button>
...
<script>
  	methods: {
  	clicBtn: function() {
  		alert('clicked');
  	}
  }
</script>

위 코드는 < button>태그에 v-on:click 디렉티브를 추가하여 버튼을 클릭하면 clickBtn() 메서드가 실행된다.

고급 템플릿 기법

computed 속성

데이터를 가공하는 등의 복잡한 연산은 뷰 인스턴스 안에서 하고 최종적으로 HTML에는 데이터를 표현해야만 한다.
computed 속성은 이러한 데이터 연산들을 정의하는 영역이다.

...
<div id="app">
	<p>{{ reversedMessage }}</p>
</div>
...
<script>
	new Vue({
    	el: '#app',
        data: {
        	message: 'Hello Vue.js!'
        },
        computed: {
        	reversedMessage: function() {
            	return this.message.split('').reverse().join('');
            }
        }
     });
 </script>

HTML에 바로 {{ message.split('').reverse().join('') }}를 정의할 수 도 있지만 앞의 코드처럼 computed 속성인 reversedMessage를 활용하면 HTML 표현단의 코드가 더 깔끔해진다.

computed 속성의 장점
1. data 속성 값의 변화에 따라 자동으로 다시 연산한다.
2. 캐싱, 동일한 연산을 반복해서 하지 않고 미리 저장하고 있다가 필요할 때 불러올 수 있다.

computed 속성과 methods 속성의 차이점

일단 methods 속성과 computed 속성의 가장 큰 차이는 methods는 호출할 때만 해당 로직이 수행되고, computed는 데이터의 값이 변경되면 자동적으로 수행한다는 것,
수동적으로 데이터를 갱신하느냐, 능동적으로 데이터를 갱신하느냐의 차이

...
<div id="app">
  <p>{{ message }}</p>
</div>
...
<script>
  new Vue({
  	el: '#app',
  	data: {
  		message: 'Hello Vue.js!'
  	},
  	methods: {
  		reverseMsg: function() {
  			this.message =this.message.split('').reverse().join('');
  			return this.message;
  		}
  	}
  });
</script>

위 코드는 위의 computed 속성으로 문자열 순서를 바꾼 코드와 동일한 결과를 낸다.

캐싱 면에서 두 속성을 보면 methods 속성은 수행할 때마다 연산을 하기 때문에 별도로 캐싱을 하지 않지만, computed 속성은 데이터가 변경되지 않는 한 이전의 계산 값을 가지고 있다가 필요할 때 바로 반환을 한다.
반복해서 화면에 나타내야한다면 computed 속성을 이용하는 것이 성능면에서 효율적이다.

watch 속성

watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다.
computed 속성과 유사하지만 computed 속성은 내장 API를 활용한 간단한 연산 정도로 적합한 반면에,
watch 속성은 데이터 호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합하다.

...
<div id="app">
  <input v-model:"message">
</div>
...
<script>
  new Vue({
  	el: '#app',
  	data: {
      message: 'Hello Vue.js!'
    },
  	watch: {
      message: function() {
        console.log("message의 값이 바뀝니다 : ", data);
      }
    }
  });
</script>

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

05-2 뷰 프로젝트 구성 방법

HTML 파일에서 뷰 코드 작성 시의 한계점

뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하고, 페이지 사이를 이동할 때는 라우터를 사용해야한다.
하지만 다음과 같은 상황에서 파일 구조에 한계점을 느낀다.

...
<div id="app">
  <my-component></my-component>
  <your-component></your-component>
</div>
...
<script>
  Vue.component('my-component', {
  	template: '<div><h5>complex markup</h5><ul><li><button>can you figuer this syntax out?</button></li><li><p style="color:blue;">this is the second list item</p></li><li><strong>continue on adding more items</strong></li></ul></div>'
  });

  Vue.component('your-component', {
    template: '<div><span style="font-size:1.2em;"><button>{{ message }}</button></span></div>'
  });

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

HTML 파일에 뷰 컴포넌트 2개를 등록하고, < script>태그 안에 컴포넌트의 template 속성을 추가한 코드이다.
마크업에 익숙한 사람이 아니면 두 컴포넌트의 template 속성에 작성된 HTML 코드를 바로 분석해서 예상하기는 쉽지 않다.

싱글 파일 컴포넌트 체계

이런 문제점을 해결하는 방법이 싱글 파일 컴포넌트 체계
싱글 파일 컴포넌트 체계란 .vue 파일로 컴포넌트 구조를 구성하는 방식이다.
확장자 .vue 파일 1개는 뷰 어플리케이션을 구성하는 1개의 컴포넌트와 동일

.vue 파일은 아래와 같은 기본 구조를 가지고 있다.

<template>
  <!--HTML 태그 사용 -->
<template>
  
<script>
export default {
 // 자바스크립트 코드
}
</script>

<style>
  /*CSS 스타일 내용*/
</style>

뷰 CLI

싱글 파일 컴포넌트 체계를 사용하기 위해서는 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해 주는 웹팩이나 브라우저리파이와 같은 도구가 필요하다.
웹팩은 웹 앱의 자원들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러
브라우저리파이도 웹팩과 유사한 성격의 모듈 번들러지만 웹팩과 다르게 웹 자원 압축이나 빌드 자동화 같은 기능이 없다.

뷰 개발자들이 편하게 프로제그를 구성할 수 있도록 뷰 코어팀에서 CLI 도구를 제공

npm install vue-cli -global

을 이용해 설치

뷰 CLI 명령어

템플릿 종류	설명
vue init webpack	고급 웹팩 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init webpack-simple	웹팩 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑용
vue init browserify	고급 브라우저리파이 기능을 활용한 프로젝트 구성 방식, 테스팅, 문법 검사 등을 지원
vue init browerify-simple	브라우저리파이 최소 기능을 활용한 프로젝트 구성 방식, 빠른 화면 프로토타이핑 용
vue init simple	최소 뷰 기능만 들어간 HTML 파일 1개 생성
vue init pwa	웹팩 기반 프로그레시브 웹 앱 기능을 지원하는 뷰 프로젝트

템플릿의 내용은 각기 다르지만 전체적인 맥락에서볼 때 2가지는 비슷

첫째, 웹팩이나 브라우저리파이 같은 모듈 번들러를 프로젝트 자체에 포함하여 바로 사용가능.
둘째, vue 파일을 HTML, CSS, 자바스크립트 파일로 변환해 주기 위한 뷰 로더를 포함
.vue 파일 방식으로 애플리케이션을 개발하려면 뷰 로더와 이를 지원하는 웹팩, 브라우저리파이 같은 모듈 번들러가 필요하다

뷰 프로젝트 구성

• node_modules : npm install 명령어로 다운받은 라이브러리가 존재하는 위치
• src : .vue 파일을 비롯하여 애플리케이션이 동작하는 데 필요한 로직이 들어갈 위치
• index.html : 뷰로 만든 웹 앱의 시작점. npm run dev 실행 시 로딩되는 파일
• package.json : npm 설정파일, 뷰 애플리케이션이 동작하는 데 필요한 라이브러리들을 정의하는 파일
• webpack.config.js : 웹팩 설정 파일, 웹팩 빌드를 위해 필요한 로직들을 정의하는 파일

vue init 명령어로 프로젝트를 생성할 때 package.json 파일도 함께 생성
package.json 파일은 프로젝트 정보를 담고 있는 설정 파일임과 동시에 npm 명령어 및 뷰로 애플리켕시ㅕㄴ을 제작하는 데 필요한 라이브러리 정보들을 포함하고 있다.

npm install 명령어를 실행하면 package.json의 라이브러리 목록이 전부 프로젝트의 node_modules 폴더 밑에 설치가 된다.
웹팩을 빌드하기 위한 바벨 및 여러가지 로더 , 웹팩 데브 서버 등의 라이브러리와 뷰를 구현하기 위한 뷰 코어 라이브러리 등이 설치된다.

뷰 로더

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

App.vue 파일에서 < template>,< script>,< style>의 내용이 각각 HTML, 자바스크립트, CSS 코드로 인식될 수 있도록 뷰 로더가 변환 작업을 수행

이 기능은 웹팩에서 맡고 있다. 그 중에서도 웹팩에 설정된 뷰 로더가 변환 기능을 수행
웹팩은 자바스크립트 모듈만 인식할 수 있기 때문에 뷰 로더가 .vue 파일을 일단 자바스크립트 모듈로 변환한다.
하지만 필요에 따라 웹팩의 추가 플러그인을 사용해 웹팩으로 변환된 자바스크립트 모듈을 CSS나 HTML로 분리 가능

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

webpack.config.js 파일을 보면

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
        }
        // ohter vue-loader options go here
      }
    }
  ]
}

module과 rules는 웹팩의 로더를 설정하는 속성이다
test는 로더가 적용될 대상 파일을 지정하는 속성
loader는 적용할 로더의 종률르 지정하는 속성이다
위 코드는 프로젝트 폴더 내에서 .vue 확장자를 가진 파일을 모두 선택하여 뷰 로더를 적용하는 코드이다.

뷰 CLI로 프로젝트를 구성하는 과정

뷰 CLI 설치 -> 프로젝트 생성 -> 관련 라이브러리 설치 -> 프로젝트 구동