Taran

Vue.js 개인 프로젝트 진행 중, 이전에 v-bind의 true-value, false-value 속성을 사용한 분기만 있는 것이 별로 도움이 되지 않아 다른 방법을 작성한다. 

이전 작성글 (v-bind 바인딩)

https://chainbell.tistory.com/entry/Vuejs-6-v-model%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%9C-%EC%9E%85%EB%A0%A5-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94%A9?category=784113

* 작성 코드가 이전 글과 다르게 vue 파일로 되어있다. 

1. 목표 

기능 구현 목표는 [로그인 페이지에서 아이디/비밀번호가 미기재 상태일 때, 입력을 유도하기 위한 표시]를 하는 것이다. 

새로운 글자를 출력할 필요 없이, input type text의 테두리에 빨간 테두리를 표시만 해줄 것이다. 

2. 템플릿 

input_box와 input_box_invalid는 vue 파일 하단에 기재된 css class 명이다. 

3. Vue instance 

아이디/패스워드 각 입력칸이 별도로 움직일 것이기 때문에, 그를 위한 변수를 하나씩 생성해준다. 

class_id_input_box는 아이디, class_pw_input_box는 비밀번호에 적용시킬 것이다. 

위 함수는 로그인 버튼 클릭 시 호출되는 함수이다. (로그인 버튼 관련 내용은 언급하지는 않았다.)

간단하게 각 입력값이 빈 문자열이라면, 각 data 인자를 false로 바꿔 템플릿에서 다른 css가 적용된 class를 받아가도록 되어있다. 

4. 결과

미입력 후 로그인 실행 시, 이렇게 빨간색으로 테두리가 생긴다. 

1. v-for 반복문 바인딩

v-for 지시자는 list, map과 같은 다수의 데이터를 포함한 객체형 변수를 반복하여 출력할 때 사용된다. 

먼저 상단의 Template을 보면,

(1) 상수값 5에 따라 인덱스를 출력하는 반복문

(2) list형 변수의 값을 전체 출력하는 반복문

(3) map형 변수의 key, value를 받아 동시에 출력하는 반복문 

총 세 종류를 확인할 수 있다. 

최초 페이지 출력 상태를 보자. 

(1) 상수값 5에 따라 인덱스를 출력하는 반복문

보통 개발 언어의 인덱스는 0 base(zero base) indexing에 따라 0부터 시작하기 마련이지만, v-for을 이용한 출력에서는 1 base 방식인 것을 확인할 수 있다. 

(2) list형 변수의 값을 전체 출력하는 반복문

list의 경우, 처음에는 값이 비워져 있어 버튼만 출력된 것을 볼 수 있다.

여기서 버튼 이벤트를 실행해보자.

( * 실행 순서는 push, push, pop, push, pop 이다. [push : 1 된 숫자 추가, pop : 목록의 마지막 숫자를 제외] )

화살표 순서를 따라 보면, list 변수값에 따라 양방향 바인딩을 통해 목록이 동적으로 변하는 것을 확인할 수 있다.

(3) map형 변수의 key, value를 받아 동시에 출력하는 반복문

map형 변수의 경우, 예시 데이터를 보면 순서가 고의적으로 바뀌어 있는 것을 알 수 있다.

key 4가 두 번째 위치에 있는 상태로 반복 출력을 실행한 상태이다. 결과를 보면 알 수 있듯이, 값의 입력 순서를 기준으로 출력되고 있다. 

1. v-model 모델 바인딩

v-model 지시자는 주로 값을 입력하고, 그 값을 활용할 때 사용된다. 

위 코드는 HTML input tag와 vue instance의 data를 맵핑 시켜놓은 것이다. 

데이터 모델 numberModel, textModel을 입력받고 바로 아래에 출력하도록 하였다. 

vue의 양방향 데이터 바인딩 정책에 따라 입력과 동시에 하단에 출력이 이루어질 것이다. 

[ input element 입력 -> vue instance data 업데이트 -> HTML 값 출력 element 반영 ]

위 상태에서 input에 입력을 하면 

이렇게 바로 적용이 된다. 

2. v-bind 속성 바인딩

v-bind 지시자는 HTML element의 속성에 바인딩 할 때 사용한다. 

input type checkbox의 경우, 체크가 되어있는지 여부에 따라 값을 결정하게 된다. 이럴 때 v-bind 하위 속성인 true-value와 false-value를 사용하여 값을 지정한다. 

HTML 파일을 호출하면, 위와 같이 기본값으로 출력된 상태로 출력된다.

이 상태에서 체크박스를 체크하게 되면 

이렇게 model에 bind된 값이 입력되며 출력까지 수정되는 것을 볼 수 있다. 

checkbox 이외에도 img tag에서 v-bind:src로 이미지 파일을, v-bind:class로 HTML class를, v-bind:value로 HTML element의 지정값을 바인딩 시킬 수 있다.

1. v-show & Computed

v-show 지시자는 HTML 요소를 조건부로 출력하고 싶을 때 사용한다. 일단 예시 코드를 보자

일단 v-show와 computed가 새롭게 추가되었다. 

(1) v-show 지시자는 받는 결과값이 true일 때, 출력을 하게 된다. 

(2) Vue instance내에 포함된 computed는 data의 값이 바뀌면 수정된 것을 감지하여 실행되는 함수를 가진다. 앞서 나왔던 filter와 비슷한 역할을 하지만, 더 동적으로 데이터를 처리할 수 있게 해준다. 

위 코드에서 showComputed는 clickConfig의 값이 변경되면, 변경사항을 감지하여 결과값을 반환하게 된다. 

실행 순서는

[버튼 이벤트 실행 -> clickMethod 함수 실행 -> clickConfig 값 수정 -> computed 감지 -> showComputed 실행 -> v-show 지시자가 결과를 받음 -> 화면 출력]

이다.

화면 첫 로딩 시, default true로 되어있기 때문에 출력되는 것을 알 수 있다. 이 상태에서 "클릭 이벤트 버튼"을 누르게 되면, 

이렇게 "보여주겠습니다!" 문구가 출력되지 않게 된다. 

(참고 1) v-show는 보여줄지 말지를 선택하는 지시자다. 기본 원리는 display: none을 해주는 것으로 데이터 자체는 잔류하게 된다. 보안상이나 임의 조작을 막아야 하는 경우에 사용하는 것은 바람직하지 못하다. 

2. v-if & v-else

v-show와 다르게 HTML element 자체를 제거시키는 방법이 필요할 때는 v-if를 사용하면 된다. 

실행 순서와 구현 내용은 v-show와 동일하다. 다른 점이 있다면, v-show가 있던 자리에 v-if와 v-else가 있다는 점이다. 

v-if 역시 받는 결과가 true일 때 실행된다.

처음 실행 되었을 때, 두 버튼이 모두 활성화 되어있는 것을 볼 수 있다. 여기서 "클릭 이벤트 버튼"을 클릭하면

이렇게 클릭이 비활성화된 버튼으로 바뀌게 된다. 

v-on 지시자는 UI에서 사용할 event와 실행할 Vue instance내의 mehtod를 등록한다.

예시 코드를 보면, HTML 구간에 v-on:click="clickMethod" 라고 작성되어있다. 읽는 그대로 click이벤트가 발생을 하면, instanceElement라는 이름의 Vue instance내에 구현된 clickMethod를 호출하겠다는 의미이다.

위 예시는 

[button 클릭 -> 클릭 이벤트 실행 -> clickMethod 함수 실행 -> Vue instance내 data "clickConfig"값이 수정] 

순서로 실행된다.

최초 페이지 실행 시에는 

버튼 하나와 default 값 true로 된 clickConfig가 출력되고 있다. 그리고 버튼을 클릭하게 되면 

clickMethod 함수가 실행되면서 clickConfig의 값이 false로 수정되고, 화면 출력값도 바뀌는 것을 알 수 있다. 

(참고 1) 위 예시 코드에서 값을 출력할 때, v-text나 v-html과 같은 출력용 지시자를 사용하지 않았다. 위 방법은 Vue instnace내 data 값을 그대로 출력시키는 방식으로 {{data-key}} 과 같은 방식으로 출력한다.

(참고 2) data의 값이 수정되는 과정은 소스 코드의 동작 상에 있지만, 수정된 값을 HTML에 update하는 과정은 없었다. 이것은 Vue.js의 데이터 관리에 대한 기본 철학이 데이터 양방향 바인딩을 따르고 있기 때문이다. 순수 Javascript로 개발하거나 Jquery로 개발할 때는 단방향 바인딩으로, 데이터의 수정과 HTML로의 수정을 별도로 개발하는 것과 다르게 data의 수정을 통해 바로 수정되도록 하는 것이 Vue.js가 가지는 프레임워크로서의 차별점이다. 

1. 지시자 및 인스턴스 객체 설명 

(1) v-text

    - Vue 인스턴스 data의 값을 text로 출력한다. data 값이 html tag를 포함하고 있다면, tag 역시 text로 그대로 출력한다.

(2) v-html

    - Vue 인스턴스 data의 값을 출력하는데, 값에 html tag가 포함되어 있다면 tag를 인식하여 출력된다. 

(3) filter

    - data의 값을 입력 파라미터로 사용하여, filter로 등록한 함수의 결과값을 반환한다.

2. 예시 소스 코드 

예시 코드에서 신경 써서 볼만한 것은 v-html과 filter 정도이다. 

data에 sample이라는 객체 아래 선언된 tagData는 <h1> 헤더 태그를 포함한 텍스트 값이다. tagData가 v-html로 출력되면 출력 결과를 보면 헤더 효과가 적용된 것과 그 밑에 v-text로 호출된 것은 <h1> 태그를 텍스트 그대로 출력하는 것을 볼 수 있다. 

filter의 경우, filters 아래 numberCheck 라는 콜백 함수가 선언되어 있고, {{ 데이터 변수 | filter 함수 }} 로 호출되어 해당 함수의 반환값이 출력되는 것을 알 수 있다. 예시에서는 함수 입력 파라미터가 int값인지 아닌지를 구별하여 문자열을 반환하고, 출력값에서 동작하는 것을 확인할 수 있다.

1. Vue instance

Vue는 Javacript 객체 인스턴스와 HTML 요소(element)가 맵핑되어 동작하게 된다. 

위 코드는 

HTML에서 id가 instnaceElement인 요소를 생성하고 

Javacript에서 Vue instance를 선언한 후 el(element)가 '#instanceElement'인 요소를 보도록 등록한 것이다.

2. Vue instance 굴러가는 걸 보자

굴러가는 것을 보기 위해

HTML 요소에 Vue에서 제공하는 v-text 지시자를 사용해 name value를 받아오고

Javascript의 Vue instance에 data 프로퍼티를 구성한다. 

* Vue instance에서 HTML과 Javascript에서 사용할 데이터를 data 프로퍼티에 구성한다. 

위와 같이 작성하면, 

이렇게 출력된다. 

3. 생명주기(LifeCycle)

간단한 출력문을 봤으니 생명주기를 확인해보자

Vue Instance는 각각 별도로 4단계의 생명 주기를 갖는다. 

   (1) 인스턴스 생성  

           - 인스턴스가 생성된다. 데이터 관찰자와 사용할 이벤트를 생성하고 초기화한다.

   (2) 템플릿 & 가상 DOM 생성

           - 렌더링 함수를 통해 템플릿을 컴파일한다. 그리고 가상 DOM을 만들고 결과를 HTML DOM에 마운트(mount) 한다.

   (3) 이벤트 루프

           - view-model의 Data를 감시(monitoring)한다. 값에 변화가 있을 때 다시 랜더링한다.

   (4) 인스턴스 소멸

           - 앱 소멸이 시작되면, 모든 관찰자/리스너/자식 컴포넌트들이 삭제된다. 

* 각 생명 주기 단계 별 간단한 설명을 작성했지만, 당장 이해하기에는 나오지 않은 기능 및 요소들이 있다. 개발에 있어서 가장 중요한 생명 주기인 만큼 지속적으로 보면서 나오는 내용들과 함께 겹쳐 봐야 할 것 같다. 

3. LifeCycle Hook

만약 안드로이드 개발을 한 적이 있다면, onCreate나 onResume과 같은 각 생명 주기를 감지해서 특정 시점에 원하는 함수를 실행하는 개발에 익숙할 것이다. 

Vue 역시 생명주기를 기반으로 개발을 할 수 있고, 그것을 도와주는 것이 Hook이다. 

생명주기 4단계에 따라 [create, mount, update, destroy]가 있고 각 주기별 [전/후]로 나누어 총 8개의 Hook이 있다. 

- 인스턴스 생성 : beforeCreate, created

- 템플릿 & 가상 DOM 생성 : beforeMount, mounted

- 이벤트 루프 : beforeUpdate, updated

- 인스턴스 소멸 : beforeDestroy, destroyed

* 코드가 길어져서 파일로 넣습니다. 

개발자 도구를 키고 해당 페이지를 호출하면, beforeCreate, created, beforeMount, mounted

네 개의 Hook이 호출되어 로그가 남는 것을 알 수 있다. 

* update와 destroy의 경우, 위 코드 중에서 데이터의 수정 및 인스턴스 소멸이 발생하지 않아서 호출이 안된 것이다. 

* 개발자 도구에서 생명 주기를 강제 호출할 수도 있지만, 당장 필요한 내용도 아니니 지나가겠다. 

현재 웹 프레임워크 시장은?

최신 웹 프레임워크의 파이는 크게 

- 죽어가는 Angular

- 현재 웹 프레임워크의 주연 React (정확히는 프레임워크가 아닌 라이브러리라고 한다.)

- React의 바로 뒤를 쫓고 있는 Vue.js

세 가지가 있다. 

세 가지 중 Vue를 꺼낸 이유는?

셋 모두 SPA(Single Page Application)을 지향하고 인지도 있는 웹 프레임워크였지만, 재작년부터 그 희비가 뚜렷하게 갈렸다.

- Angular는 메이저 버전 업그레이드 이후 아예 다른 프레임워크로 바뀌어 버렸다고 한다. 실제로 웹 프레임워크 시장에서 하향세를 타고 있다. 버전 업그레이드가 되었다고 기존 개발자도 사용 못 할 정도로 바뀌었다면 프레임워크로서 역할을 못한 것이니 제외 했다.

- React는 공부해보겠다고 책 사서 한번 봤었는데, 지나치게 어렵다. 당장 실무에서 사용하는 것도 아닌 개인 공부용으로 보는 수준에서 보기에는 필요 이상으로 복잡해서 때려쳤다. 

- Vue는 어떤 방식인가 하고 블로그 글을 찾아 따라해봤을 때 약간 따라해봤다. 문법이 JQuery에서 개선되었다고 생각될 정도로 친숙했고, 작성된 코드가 React에 비해서 이해하기 쉬웠다. 

그렇다. 쉬워보여서 골랐다. 

Vue.js란?

Vue 공식적인 설명은 "사용자 인터페이스 구성에 집중한 프로그래시브 프레임워크"이다. 

여기서 말하는 프로그래시브 프레임워크(progressive framework)가 Vue의 최대 장점이다. 이름대로 점진적으로 적용이 가능한 프레임워크라는 것이다. 운영/개발 중이던 기존 환경(HTML과 Javascript)에서 개발을 이어서 진행할 수 있다. 

근데 다들 튜토리얼 잘되어있다고 그거 보고 공부하면 된다고 했는데 역시 돌머리라 잘 이해를 못하겠어서 책 한권 사서 보고 있다.