4. Vue.js 인스턴스, 데이터 바인딩

1. Vue.js

2014년 중국인 개발자 Evan You에 의해 새로운 자바스크립트 프레임워크인 Vue.js가 발표된다. Angular와 React는 분명 많은 개발자들의 인기를 끌며 많은 프론트엔드 개발자들의 선호를 받았다. 하지만, 사람들은 여전히 두 언어에 대한 불만이 많았다.

우선 Angular.js의 경우 모든 개발 방식을 Angular화 해야하는 불편함이 있었다. 이는 많은 개발 도구 사용에 제약이 걸릴 뿐만 아니라 프로그램이 무거워지는 불편함이 존재했다. 프론트엔드 개발자들은 좀더 가볍고 범용성이 좀더 큰 개발 방식에 대한 요구사항이 존재핬다.

Vue.js는 이러한 배경으로 탄생하게 되었다. Vue.js의 가장 큰 장점은 우리가 흔히 사용하는 개발 도구 들을 자유롭게 쓸 수 있다. 가령 유지보수를 하기 위해서 Angular보다 더 쉬운 툴을 제공한다. 그리고 모든 소스를 Angular화 하지 않아도 되는 이점이 있어 우리가 원하는 부문만 Vue.js로 개발할 수 있다. 자연스럽게 프로젝트의 다양성을 가져오게 된 것이다.

Vue.js 강의

위의 사이트에 가면 Vue.js에 대한 강의를 들을 수 있다. 영어로 되어 있지만 영상으로도 코드에 대해 잘 설명이 되어 있으니 충분히 참고해 볼만한 자료다. 앞으로 소개할 개념 역시 해당 강의에서 많은 부분을 참고했다. Vue.js 개발자들이 직접 작성한 자료이므로 더욱 신뢰도와 퀄리티가 높은 자료이므로 많은 사람들이 보았으면 한다.

Vue.js 개발자도구

그리고 Vue.js 개발에 앞서 중요한 개발 도구 중 하나가 바로 Vue.js 크롬 개발자도구이다. 이 툴을 활용해 크롬에서 Vue.js의 디버깅을 사용할 수 있다.

2. Vue.js 인스턴스 생성

Vue.js에서 사용되는 객체를 인스턴스 라고 부른다. 인스턴스 안에 속성값을 집어넣어 웹 클라이언트를 구축하게 된다. 우선 Vue.js를 사용하기 위한 준비를 해보자. Vue.js를 사용하기 위한 속성값은 아래와 같다.

이 태그를 추가하여 html을 작성하면 Vue.js를 사용하기 위한 준비는 끝난다. 아직 인스턴스를 생성하기 이전에 사용 준비를 마친 코드이다.

1 2 3 4 5 6 7 8 9 10 11 12 < !DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >클라이언트 구축 1 < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < body > Vue.js를 활용한 클라이언트 구축 Colored by Color Scripter cs

이제 Vue.js 인스턴스를 생성해보자.

Vue 인스턴스를 생성하기 위한 javascript 객체는 var app = new Var() 으로 생성할 수 있다. 해당 객체 안에 우리는 Vue.js 객체의 속성을 정의하면 된다.

HTML에서 Vue.js 인스터스와 연결되는을 선언하는 방법은 '{{ }}' 키워드 안에 담으면 된다. 만일 변수명을 text라고 태그 id를 instance로 선언한다면 HTML 코드에 위와 같이 작성한다.

- HTML

{{ text }}

이제 태그 id와 변수 명을 연결해야 한다. 이는 Vue.js 인스턴스 안에 선언 해주면된다.

- Vue.js

var app = new Vue({ el: '#instance', data: { text: 'hello world' } })

이를 코드로 정리하면 다음과 같다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 < !DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >클라이언트 구축 1 < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < body > < h2 >Vue.js 인스턴스 생성 < div id = "instance" > {{ text }} < script type = "text/javascript" > var app = new Vue({ el: '#instance' , data: { text: 'Hello world' } }) Colored by Color Scripter cs

위 코드로 아래와 같은 웹 사이트를 구축할 수 있다.

Vue 인스턴스에서 el은 태그의 아이디를 지정해준다.

data의 경우 화면에 띄울 앱 어플리케이션의 동작을 지정해준다.

3. 데이터 바인딩

위와 같이 Vue.js에서는 데이터를 바인딩 하기 위해서 {{ }}를 사용한다. 앞서 text라는 태그를 통해서 데이터 바인딩을 실행했다. 즉, 이 변수를 바꿔줌에 따라 바인딩 되어 들어가게 될 새로운 변수를 지정해줄 수 있다. 데이터 바인딩을 통해 우리는 매우 손쉽게 데이터를 관리 할 수 있다.

바인딩이 된 변수를 통해 새로운 텍스트를 집어넣는 다면 반응형으로 작동하는 웹 애플리케이션 구축이 가능하다. 자바스크립트 객체명app에 지정된 바인딩 데이터 변수 이름은 text를 통해 선언이 가능하다.

app.text = 'Welcome to Vue.js'

크롬 개발자 도구를 활용해 이를 진행해보자.

- 변수 변경 전

- 변수 변경 후

위처럼 데이터 바인딩을 활용한다면 쉽게 데이터 변경을 만들어 낼 수 있다.

그리고 텍스트 형식의 변수에만 데이터 바인딩이 적용 되는 것은 아니다. a 태그나 이미지 파일등 다양한 방식으로 데이터 바인딩을 할 수 있다. a태그와 이미지 파일에 데이터 바인딩을 적용해보자.

Vue 인스턴스 안에 들어가게 하기 위해서 태그 id 'instance'안에 각각의 태그를 넣어 주어야 한다. 그리고 바인딩으 아래와 같이 "v-bind:" 를 붙여주고 연결하고 싶은 속성 명을 그 뒤에서 써야 한다.

src 속성과 연결한 데이터 바인딩 -> v-bind:src

href 속성과 연결한 데이터 바인딩 -> v-bind:href

그 뒤에 변수 이름을 연결 하여 Vue 인스턴스와 연결해준다. 종합적인 코드는 아래와 같이 작성된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 < !DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >클라이언트 구축 1 < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < body > < h2 >Vue.js 인스턴스 생성 < div id = "instance" > < img v-bind:src = "img" width = "150px" height = "150px" >< br > < a v-bind:href = "link" >Vue.js 웹 사이트 이동 < div >{{ text }} < script type = "text/javascript" > var app = new Vue({ el: '#instance' , data: { img: 'https://kr.vuejs.org/images/logo.png' , link: 'https://kr.vuejs.org/' , text: 'Hello world' } }) Colored by Color Scripter cs

결과는 다음과 같고 Vue.js 웹 사이트 이동 을 눌러 'https://kr.vuejs.org/'웹 사이트로 이동이 가능하고 이미지 파일은 'https://kr.vuejs.org/images/logo.png'에서 가져오게 된다. 즉, 데이터 바인딩을 사용하면 Vue 인스턴스의 수정으로 손 쉽게 웹 애플리케이션 유지보수가 가능하다.

from http://adrian0220.tistory.com/172 by ccl(S) rewrite - 2020-03-06 02:54:29