티스토리 뷰
뷰 vue.js 란 ? 에반 유가 개발한 자바스크립트 프레임워크입니다. 또한 뷰는 인터랙티브 웹 인터페이스를 개발하기 위한 PWA 자바스크립트 프레임워크입니다. 프로그레시브란 프로그램 실행에 필요한 최소한의 모듈로부터 점점 확장해간다는 의미가 있습니다.
즉, 뷰는 웹에서 UI, 비즈니스 로직, 데이터 관리를 돕는 최고 성능의 콤팩트한 자바스크립트 라이브러리입니다.
뷰는 앵귤러, 리액트와 유사하며 가상돔을 제어하는 기능도 제어합니다.
핵심적인 장점은 다음과 같습니다.
뷰는 html와 css를 토대로하여 동작하므로 진입장벽이 낮습니다. 기존 웹 표준작업에 익숙하면 쉽게 적용가능합니다.
MVC 모델또한 지원합니다. 리액티브 양방향 데이터 바인딩을 지원하여 데이터의 변화를 자동으로 체크해서 화면을 바꾸는 동기화를 가능하게 해줍니다. 즉 DOM 작업에 집중 할 수 있도록 직관적으로 쓰기 편한 디렉티브를 제공합니다.
기존 프레임워크보다 설치하기 쉽고 필요한 파일 용량(23kb)이 작을뿐아니라 html,css,javascript 환경에서 연결해 사용하기 편리합니다. ( bestofjs.org/ 에서 참고하여 자바스크립트 간련 기술 트렌트 통계 확인)
1. 뷰 시작하기
VSCode를 열어 vue_test.html 파일을 만듭니다.
(VSCode를 사용하는 방법등은 marshmello.tistory.com/45?category=1158454 에 올려놨습니다.)
vue.js 사이트에 가면, CDN와 샘플 소스를 볼수 있습니다. kr.vuejs.org/v2/guide/index.html에서 복사하여 <head>태그사이에 CDN을 연결합니다.
위 vue.js 사이트에서 샘플 소스를 복사해서 차례대로 실행해봅니다.
최종 소스 vue_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 상용버전, 속도와 용량이 최적화됨. -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</body>
</html>위 소스에서 {{message}} 는 머스태시를 사용한 부분입니다.
뷰의 핵심 기능은 애플리케이션을 실행하면서 변수나 함수의 결과값을 HTML의 element값으로 변환해 브라우저에 출력하는 것입니다. 이러한 과정을 랜더링이라고 합니다.
뷰의 랜더링은 중괄호 2개를 겹쳐서 {{ }} 표현하는데, 콧수염 모양과 비슷해서 머스태시라고 합니다.
즉, 위 소스 중 {{message}}은 message라는 문자열 값을 <div> 앨리먼트값으로 변환해 화면에 표시한다는 뜻입니다.
뷰 앱을 처음 시작하려면 우선 뷰 객체를 생성해야합니다. 이때 HTML의 body 엘리먼트 중에서 뷰 화면이 표시될 영역을 el(element)속성에 선택자로 지정해야합니다. 그러면 지정된 부분(#app)에 뷰의 실행 내용이 랜더링됩니다.
data 속성은 뷰 안에서 사용할 데이터를 변수명으로 선언해서 관리하는 곳입니다. data 속성은 객체나 함수를 선언해 데이터를 읽고 저장하는 일을 돕습니다. 이러한 이유로 뷰는 리액티브(reactive)하다라고 표현합니다.
message: '안녕하세요 Vue! 는 문자열의 메시지를 저장하는 message라는 변수의 초기값으로 '안녕하세요 Vue!'라는문장을정의하는코드입니다.
이 변수값은 뷰에서 HTML 엘리먼트와 함꼐 머스태시 안에서 바인딩되어 자동으로 표시할때 활용됩니다.
위 소스를 Live server 실행하여 확인해봅니다.
2. 단방향 바인딩과 v-bind 디렉티브
데이터바인딩이란? HTML의 속상값을 수정할 때 , v-bind라는 디렉티브를 이용해서 데이터를 브라우저화면에 자동으로 반영하는 것을 의미합니다. 즉, 변수값을 HTML 속성값에 연결함으로써 변수가 새로운 값으로 바뀔 때마다, HTML 앨리먼트에 실시간으로 랜더링합니다. 다만, v-bind 디렉티브는 데이터가 한쪽으로만 바인딩되는 단반향 바인딩입니다.
HTML 앨리먼트의 속성값을 바꾸더라도 이와 연결된 변수값은 변경되지 않는다는 뜻입니다.
VSCode를 열어 v-bind.html 파일을 생성합니다.
실습용 소스 v-bind.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
/* 화면에 렌더링할 때 사용할 제목 색상을 파랑색으로 정의 */
.blue_style { color: blue}
</style>
</head>
<body>
<div id="main">
<!-- v-bind 안에도 자바스크립트 사용 가능하므로 변수와 문당을 연결하여 클래스이름을 완성하여 연결함 -->
<h1 v-bind:class="sColorName + '_style'">안녕하세요</h1>
<!-- 콜론(:) 앞은 생략 가능 -->
<input :value="sDate">
</div>
<script>
var app2 = new Vue({
el: '#main',
data: {
// Date 객체의 getFullYear() 메서드로 올해 년도 문장을 준비함
sDate: '올해 년도: ' + new Date().getFullYear(),
sColorName: 'blue'
}
})
</script>
</body>
</html>실행화면입니다.
제목의 글자 색상을 클래스 선택자를 사용해서 변경합니다. <h1> 태그안에서 class 어트리뷰트와 뷰의 속성을 바인딩할때는 v-bind 디렉티브를 활용합니다. v-bind를 입력한 후에 콜론(:)을 이어서 적고, 그다음에 바인딩할 뷰의 속성을 연결해주면됩니다. 여기서는 sColorName이라는 색상 문자열 제목과 _style을 연결해 하나의 완성된 클래스 선택자 이름을 class 어트리뷰트에 대입했습니다.
또한 <input :value="sDate" >에서 알 수 있듯이 v-bind는 콜론만 남기고 생략 가능합니다.
3. 양방향 바인딩과 v-model 디렉티브
데이터를 입력하면 동시에 데이터가 동기화되어 표시되는 기능을 수행하려면 양방향 데이터 바인딩을 사용해야합니다.
v-model 디렉티브는 HTML 어트리뷰트에 양방향 데이터를 수행합니다.
콜론(:)을 중심으로 왼쪽에는 v-model을 적고 오른쪽에는 HTML 앨리먼트의 속성이름을 작성합니다. 그러면 바인딩된 값이 해당 엘리먼트의 속성에 대입될 뿐만 아니라 현재 엘리먼트의 속성값이 변수와도 연동됩니다.
위와 같이 kr.vuejs.org/v2/guide/index.html에서 샘플소스를 복사하여 실행해봅니다.
v-model.html파일을 생성해 아래의 소스를 적어봅니다.
최종소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: '안녕하세요 Vue!'
}
})
</script>
</body>
</html>실행화면
위 실행화면에서 input 태그의 값을 변경해보세요. 값이 같이 변경되는것을 알 수 있습니다.
v-model 은 HTML 어트리뷰트의 값이 바뀌면 바인딩된 변수의 내용도 함께 동기화됩니다.
소스에서 message라는 문자열 변수값은 <p> 엘리먼트에 머스태시로 바인딩되어 HTML값을 표시합니다. 그리고 input 엘리먼트의 value 속성은 message라는 문자열 변수와 바인딩되어 input 앨리먼트안에 값을 표시합니다.
사용자로부터 입력받은 값은 value 어트리뷰트에 저장되며 이렇게 저장된 값은 실시간으로 message 변수와 연동되어 자동으로 저장됩니다.
그래서, 마지막으로 input 엘리먼트에 입력된 값은 message변수와 늘 똑같습니다.
또한 v-model은 뒤 속성을 생략가능합니다. (v-model:value 를 v-model로 표기가능)
4. 조건 판단과 v-if, v-else 디렉티브
v-if 디렉티브는 조건이 충족될때만 랜더링을 수행하도록 돕는 어트리뷰트입니다.
v-if.html파일을 생성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{bFlag}}</h1>
<p v-if="bFlag">당첨!!</p>
<p v-else="bFlag">꽝! 다음기회에</p>
</div>
<script>
var app3 = new Vue({
el: '#app',
data: {
//난수(0~1) 생성 후 0.5보다 크면 true 아니면 false로 지정
bFlag: Math.random() > 0.5
}
})
</script>
</body>
</html>
위 소스를 실행합니다.
5. 반복문과 v-for 디렉티브
v-for 디렉티브는 HTML안에서 반복문으로 배열값을 읽어서 목록의 항목과 인덱스 변수에 저장하도록 돕는 어트리뷰트입니다. v-for 디렉티브는 반복문으로 데이터를 하나씩 차례로 꺼내서 사용할 경우 유용합니다.
배열 변수를 중심으로 값을 하나 꺼내 저장해 두는 항목 변수를 활용해 원하는 데이터 속성에 접근하여 사용하는 방식입니다. 매우 자주 사용함으로 꼭 외워놓도록 합시다.!
또 kr.vuejs.org/v2/guide/index.html에서 샘플소스를 복사하여 실행해봅니다. ^^
v-for.html 파일을 생성합니다.
최종소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'JavaScript 배우기' },
{ text: 'Vue 배우기' },
{ text: '무언가 멋진 것을 만들기' }
]
}
})
</script>
</body>
</html>실행 결과
v-for 디렉티브는 데이터를 하나씩 차례로 읽어 원하는 항목만 선택해서 표시할떄 많이 사용됩니다. 특히 데이터는 배열 데이터를 주로 활용하는데, 처음부터 끝까지 값을 하나씩 읽고 원하는 로직으로 바인딩한 후 HTML로 랜더링하는 방식입니다.
여기서 todos라는 배열에 저장된 데이터를 v-for 디렉티브를 이용해서 값을 하나씩 차례로 꺼낸후 todo라는 변수에 대입합니다. 그리고 머스테시를 이용해서 순서 있는 목록을 만드는 <ol> 태그의 리스트항목인 <li> 로 하나씩 연결합니다.
할일 목록은 todo 변수의 text 문자열 변수에 저장되었으므로, 점(.)을 이용해서 접근할 수 있습니다.
todos는 할일 목록을 배열로 정의하기 위해 대괄호를 이용합니다.
'JavaScript 배우기' ,'Vue 배우기' ,'무언가 멋진 것을 만들기' 항목은 JSON 형식으로 저장할 것이므로 중괄호를 사용하고, 키(text)와 값(목록명)을 목록(:)으로 구분합니다. 그러면 todos에는 'JavaScript 배우기' ,'Vue 배우기' ,'무언가 멋진 것을 만들기' 라는 목록들이 저장됩니다.
6. 이벤트 핸들러 실행과 v-on 디렉티브
v-on 디렉티브는 뷰에서 발생하는 이벤트를 지켜보면서 DOM 엘리멘트를 제어할 수 있도록 도와주는 어트리뷰트입니다. v-on 디렉티브는 뷰 안에서 키보드나 마우스를 제어하는 형식의 이벤트가 발생했을 때 이에 해당하는 함수를 실행하는 방식으로, 사용자와 상호 작용 할 떄 스입니다. 콜론(:)을 중심으로 왼쪽에는 v-on을 오른쪽에는 click 같은 이벤트 명을 적어주면 됩니다. 이처럼 이벤트가 발생 했을 때 실행되는 함수를 이벤트 핸들러라고합니다.
v-on.html 파일을 생성합니다.
또!! kr.vuejs.org/v2/guide/index.html에서 샘플소스를 복사하여 실행해봅니다. ^^;;
최종소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: '안녕하세요! Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>실행화면
메시지 뒤집기 버튼을 누르면
위와 같이 텍스트가 반대로 되는 이벤트가 발생합니다.
사용자가 버튼을 누르면 click 이벤트가 발생합니다. 그래서 v-on 디렉티브를 이용해 버튼을 클릭 이벤트에 바인딩해서
reverseMessage() 함수를 실행하도록 선언하였습니다.
화면에 표시되는 값이 실시간으로 바뀌도록 message 변수를 정의하여 글자가 뒤집히는 이벤트를 대입하였습니다.
methods 속성은 사용자가 이벤트를 발생시키거나 뷰 안에서 어떤 기능을 수행하는 모듈 형식의 함수를 만들 때 사용합니다. 여기서는 reverseMessage() 함수를 정의했습니다.
이 함수는 사용자가 버튼을 클릭했을 때 이벤트 핸들러로 실행되는데 message 라는 변수에
this.message.split('').reverse().join('') 를 기입하면 뒤집힌 텍스트 !sj.euV !요세하녕안 이 새롭게 랜더링 됩니다.
여기서 this 키워드는 methods 속성의 소유자를 가리킵니다. 즉, this는 생성된 뷰 객체 자신을 의미하며 이것을 뷰의 인스턴스라고합니다. this를 사용하는 이유는 methods 속성의 소유자만이 바깥에 있는 data 속성에 접근하여 message값을 사용할 수 있기 때문입니다.
오늘 공부한 최종 실습 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!-- JSON 데이터를 읽어서 항목의 번호와 이름, 나이를 하나씩 표시함 -->
<ul v-for="(item, index) in aPersons">
<li>
<!-- index는 항목의 순서를 숫자로 표시 -->
<p>번호: {{ index }} </p>
<p>이름: {{ item.name }} </p>
<p>나이: {{ item.age }} </p>
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
// 고객의 이름, 나이를 값으로 하는 JSON 데이터 정의
data: {
aPersons: [{
name: '홍길동',
age: 27
},
{
name: '이순신',
age: 30
},
{
name: '김유신',
age: 40
}
]
}
});
</script>
</body>
</html>
실행결과
다음에는 vue 문법 심화편을 작성하도록 하겠습니다.
수고하셨습니다.
'WEB' 카테고리의 다른 글
| [PWA] 뷰티파이 기초편 (1) | 2020.10.28 |
|---|---|
| [PWA] 뷰 vue.js 고급 기능 (0) | 2020.10.26 |
| [PWA] 자바스크립트로 PWA 개발 (1) | 2020.10.26 |
| [PWA] 모던자바스크립트 ES6 입문 (1) | 2020.10.23 |
| [PWA] 프로그래시브 웹앱 입문 (0) | 2020.10.23 |
- Total
- Today
- Yesterday