Vue.js를 이용한 Todo리스트 예제 만들기(2)

저번 포스트에 이어서 카테고리, 검색어 입력을 통한 검색 기능/보기 방식 변경/정렬 방식 변경/완료한 항목 체크 기능을 구현하면서 사용한 vue 기능을 정리해보려고 합니다.

3. 카테고리, 검색어 입력을 통한 검색 기능

* 결과 화면

* html(form부분만)

<form class="s-form">
    <select v-model="option" class="form-group" v-on:change="filter">
        <option value="all">All</option>
        <option v-for="c in categories" v-bind:value="c">{{ c }}</option>
    </select>
    <input v-model="search" v-on:keyup="filter" type="text" placeholder="search..." class="form-group">
</form>

* js(데이터&사용한 함수 부분만)

var app = new Vue({
el: "#app",
data: {
option: 'all',
search: '',
categories: [],
todos: [],
viewType: 'list',
sortType: 'sort-numeric-up',
buttons: {
'view': [
{'class':'list', 'title':'view in list', selected:true},
{'class':'th-large', 'title':'view in thumbnail', selected:false}
],
'sort': [
{'class':'sort-numeric-up', 'title':'sort by deadline', selected:true},
{'class':'sort-alpha-down', 'title':'sort by alphabet', selected:false},
{'class':'star', 'title':'sort by stars', selected:false}
]
}
},
methods: {
filter: function(){
var isFiltered = false;
var todoObj = {};

for(var i = 0; i < this.todos.length; i++){
isFiltered = false; // init
todoObj = this.todos[i];

// -- filter by category
if(this.option !== 'all' && todoObj.category !== this.option){
isFiltered = true;
}

// -- filter by search keyword
if(!isFiltered && todoObj.title.toUpperCase().indexOf(this.search.toUpperCase()) == -1){
isFiltered = true;
}

if(isFiltered){
todoObj.filtered = "y";
} else {
todoObj.filtered = "n";
}
}

}

검색 조건이 복잡하지 않고, 항목이 많지 않아서 재조회를 하는 대신에 검색 조건에 맞지 않는 항목을 필터링해서 v-show 지시어를 사용해서 화면에서 잠시 감춰주는 방식으로 구현하였습니다. 검색 버튼을 별도로 두지 않고 select 태그에서 change 이벤트가 발생할 때, input 태그에서 keyup 이벤트가 발생할 때 바로 검색을 하도록 구현해보았습니다. filter라는 함수가 입력한 검색 조건에 맞지 않는 항목을 필터링하는 역할을 합니다.

3-1. v-model

v-model 지시어는 form 요소에 데이터 바인딩을 할 때 사용합니다. 위의 예제에서는 select 태그에 option 데이터를 바인딩하고, input 태그에 search 데이터를 바인딩하였습니다. 이렇게 하면 초기에 렌더링할 때 해당 데이터의 value가 각 태그의 value로 바인딩되는 것을 확인할 수 있습니다. 그 후 화면에서 select의 옵션을 바꾸거나 input 태그에 글자를 입력하면 데이터도 사용자가 선택/입력한 것으로 업데이트 됩니다.

v-model 지시어를 통해 form 요소에 사용자가 선택/입력한 value로 데이터를 업데이트 하면, filter라는 함수에서 이 데이터를 받아 기존 todo 리스트에서 카테고리 혹은 타이틀이 검색 조건과 맞지 않는 요소를 걸러내는 작업을 합니다.

3-2. Reactive Data

이 부분을 구현하다가 주의할 점 하나를 발견했습니다. 반응하는 데이터가 되기 위해서는 vue 인스턴스를 생성할 때부터 있는 데이터여야 한다는 점입니다. 쉽게 전달하기 위하여 제 경우를 들어 설명해보겠습니다. 맨 처음에 todo 리스트 아이템이 가지고 있던 속성은 다음과 같았습니다.

{
    "thumbnail": "/data/images/vegetables.jpg",
    "category": "shopping",
    "title": "Buying some healthy food",
    "startDate": "20180310152031",
    "deadline": "20180315180000",
    "endDate": "",
    "important": "3"
}

추후 검색어를 입력하거나 카테고리를 선택할 때 실행되는 filter 메소드에서 todo 리스트 아이템 객체에 filtered라는 속성을 추가해줄 생각이었습니다. 그래서 마크업에서는 리스트 항목이 보일 지 정하는 조건을     v-show="item.filtered!=='y'"라고 작성하였습니다. 그런데 이게 작동을 하지 않았습니다. 분명 콘솔에 찍어봤을 때는 객체가 filtered라는 속성을 갖고 있음에도 불구하고 작동하지 않았습니다. 왜냐면 처음에 데이터를 세팅할 당시에는 객체에 filtered라는 속성이 없었기 때문입니다. 결론적으로, 저는 샘플 데이터 json파일에서 각 아이템에 filtered라는 속성을 추가해줬습니다.

이 부분과 관련해서 vue js 가이드 문서에도 명확히 언급하고 있습니다. '나중에 추가한 property는 화면 업데이트를 촉발시키지 않을 것이다. 만약 추후에 사용할 속성이라면 처음부터 어떤 초기 값을 세팅해야 한다.' 라고 말이죠.(vue 가이드 문서-Data and Methods)

4. 보기 방식 변경&정렬 방식 변경

* 결과 화면

* html(전체)

<div id="app">
    <form class="s-form">
        <select v-model="option" class="form-group" v-on:change="filter">
            <option value="all">All</option>
            <option v-for="c in categories" v-bind:value="c">{{ c }}</option>
        </select>
        <input v-model="search" v-on:keyup="filter" type="text" placeholder="search..." class="form-group">
    </form>
    <div class="content">
        <div class="button-group">
            <div class="buttons">
                <span>view</span>
                <button v-for="b in buttons.view" v-bind:title="b.title"
                        v-bind:class="viewType == b.class?'selected':''"
                        v-on:click="toggleList('view',b.class)">
                    <i class="fas" v-bind:class="'fa-'+b.class"></i>
                </button>
            </div>
            <div class="buttons">
                <span>sort</span>
                <button v-for="b in buttons.sort" v-bind:title="b.title"
                        v-bind:class="sortType == b.class?'selected':''"
                        v-on:click="toggleList('sort',b.class)">
                    <i class="fas" v-bind:class="'fa-'+b.class"></i>
                </button>
            </div>
        </div>
        <ul class="todo-list list" v-if="viewType === 'list'">
            <li v-for="(item,index) in todos"
                v-bind:class="[substring(item.deadline, 0, 8) == getTodayDate? 'deadline':'', item.endDate? 'done':'']"
                v-show="item.filtered!=='y'"
                v-on:click="checkTodo(index)">
                <i class="far" v-bind:class="item.endDate? 'fa-check-square':'fa-square'"></i>
                <span class="title">{{ item.title }}</span>
            <span class="stars">
                <i v-for="n in toNumber(item.important)" class="fas fa-star"></i>
            </span>
            </li>
        </ul>
        <ul class="todo-list thumbnail" v-else>
            <li v-for="(item,index) in todos" v-show="item.filtered!=='y'"
                v-bind:class="item.endDate? 'done':''" v-on:click="checkTodo(index)">
                <div class="label">
                    <span class="category">{{item.category}}</span>
                    <span class="stars">
                        <i v-for="n in toNumber(item.important)" class="fas fa-star"></i>
                    </span>
                </div>
                <img v-bind:src="item.thumbnail">
                <p class="info">
                    <span class="title">{{ item.title }}</span>
                    <span class="deadline">
                        <i class="far" v-bind:class="item.endDate? 'fa-check-square':'fa-square'"></i>
                        until {{ formatDate(item.deadline) }}
                        <i v-if="substring(item.deadline, 0, 8) == getTodayDate" class="fas fa-bell"></i>
                    </span>
                </p>
            </li>
        </ul>
    </div>
</div>

* js(보기 방식 변경, 정렬 방식 변경 관련 일부)

var app = new Vue({
el: "#app",
data: {
option: 'shopping',
search: '',
categories: [],
todos: [],
viewType: 'list',
sortType: 'sort-numeric-up',
buttons: {
'view': [
{'class':'list', 'title':'view in list'},
{'class':'th-large', 'title':'view in thumbnail'}
],
'sort': [
{'class':'sort-numeric-up', 'title':'sort by deadline'},
{'class':'sort-alpha-down', 'title':'sort by alphabet'},
{'class':'star', 'title':'sort by stars'}
]
}
},
methods: {
toggleList: function(type, className){
switch (type){
case 'view':
this.viewType = className;
break;
case 'sort':
this.sortType = className;

if(className === 'sort-numeric-up')
this.todos.sort(function(a,b){return a['deadline']>b['deadline']});
else if(className === 'sort-alpha-down')
this.todos.sort(function(a,b){return a['title']>b['title']});
else if(className === 'star')
this.todos.sort(function(a,b){return a['important']<b['important']});

break;
}
},
...

버튼 마크업은 static으로 하지 않고, vue 데이터에서 buttons 속성으로 보기 방식과 관련된 버튼 정보는 view라는 이름의 배열로, 정렬과 관련된 버튼 정보는 sort라는 이름의 배열로 구성하여, 각각 이 항목만큼 반복을 하여 버튼이 렌더링 되도록 구성하였습니다. 버튼의 개수만큼 직접 태그를 작성하면, 태그마다 조건에 따른 클래스의 변경과 관련한 v-bind:class 속성과 클릭 이벤트 속성인 v-on:click, v-bind:title 속성을 각 요소마다 똑같이 적어야 하는 번거로움이 발생하는데, 이 점을 피하고 싶었습니다.

4-1. 클래스 toggle하기

화면 개발을 하다보면 사용자가 선택한 탭이나 버튼의 스타일을 변경하는 처리를 자주 하게 됩니다. 이 때는 선택된 요소만이 갖는 클래스에 스타일을 정하여, 선택한 요소에는 해당 클래스를 부여하고 이전에 클래스를 가지고 있던 요소에서는 클래스를 삭제하여 처리를 하곤 합니다. 이렇게 클래스를 토글하는 것도 vue를 사용하면 아주 간단하게 처리할 수 있습니다.

jQuery를 사용하여 처리할 때는 기존 요소를 찾아 removeClass()를 통해 클래스를 지워주고, 선택된 요소를 찾아 addClass()로 클래스를 부여하는 식으로 처리를 합니다. 어렵지는 않지만 선택자를 통해 이전에 선택된 요소와 새로 선택된 요소를 찾아야 하므로 조금 번거롭게 느껴졌습니다.

vue를 사용한 위의 예제에서는 data에서 정의한 viewType과 버튼 data가 가지고 있는 'class'라는 값과 비교하여 같은 경우 선택되었다는 의미의 'selected'라는 클래스를 부여하도록 버튼 태그에 조건을 부여하였습니다. 그리고 버튼을 클릭했을 때, toggleList 함수에서 인자로 넘긴 버튼 자신의 class값으로 viewType 데이터를 업데이트 해줍니다. 그러면 데이터의 업데이트를 감지하여 클래스가 toggle됩니다.

4-2. 리스트 정렬방식 변경하기

리스트 정렬방식 변경도 vue를 사용하면 아주 간단하게 처리할 수 있습니다. 정렬 방식 변경을 위해서 기존의 노드를 삭제하거나 노드 순서 변경 등의 노드 조작을 할 필요가 없습니다. 단지 해야할 일은 todo 리스트를 구성하는 todos 라는 배열의 순서를 변경해주는 것입니다. vue가 데이터의 업데이트를 감지하여 화면에서 리스트를 다시 구성해줍니다.

정렬 방식 변경을 위해서 실질적으로 작업한 부분은 배열 순서를 key값에 따라 정렬하는 이 로직 뿐입니다.

5. 완료한 항목 체크

* 결과 화면

* html(리스트 아이템 부분만)

<li v-for="(item,index) in todos"
    v-bind:class="[substring(item.deadline, 0, 8) == getTodayDate? 'deadline':'', item.endDate? 'done':'']"
    v-show="item.filtered!=='y'"
    v-on:click="checkTodo(index)">
    <i class="far" v-bind:class="item.endDate? 'fa-check-square':'fa-square'"></i>
    <span class="title">{{ item.title }}</span>
<span class="stars">
    <i v-for="n in toNumber(item.important)" class="fas fa-star"></i>
</span>
</li>

* js(체크 부분만)

methods: {
  checkTodo: function(index){
      var todoObj = this.todos[index];

      if(todoObj.endDate){
          todoObj.endDate = '';
      } else {
          var d = new Date();
          this.todos[index].endDate = this.getTodayDate + d.toTimeString().replace(/[^0-9]/g, '').substr(0, 6);
      }
  },
  ...

}

항목을 체크했을 때 체크박스에 체크가 되면서 글자 가운데 선을 넣는 것도 위에서 사용한 class toggle 방법을 사용하였습니다. 우선 리스트 아이템을 구성하는 <li> 태그에 v-on:click 속성으로 클릭 시 checkTodo를 호출하도록 하고, v-for 구문에서 얻은 index를 파라미터로 보내도록 하였습니다.

클릭을 하면 checkTodo가 호출되면서 내부에서 파라미터로 넘어온 index값을 받아 리스트 중 해당 인덱스의 endDate 값을 설정해줍니다. 이미 체크가 되어 endDate가 있는 경우에는 endDate를 공백으로 만들어서 체크가 해제되도록 하였습니다.

그리고 이 endDate값에 따라 클래스가 바뀌도록 합니다. <li> 태그에는 item에 endDate가 있을 경우, done이라는 클래스를 부여합니다. font awesome을 사용한 체크 아이콘 역할을 하는 <i> 태그에는 item에 endDate가 있을 경우 'fa-check-square'라는 체크가 된 박스 아이콘을, 아닌 경우에는 'fa-square'라는 빈 박스 아이콘을 나타내는 클래스를 부여합니다. 이렇게 하면 vue가 endDate 값이 업데이트되는 것을 감지해 태그가 반응하여 클래스를 toggle 하도록 해줍니다.

 이렇게 2편의 포스트에 걸쳐서 간단한 예제로 vue 기능을 살펴보았습니다. 사실 간단한 예제여서 화면 개발에서 주로 쓰이는 필수 기능들만 다뤘는데, vue에는 이 외에도 component를 비롯한 강력한 기능들이 많습니다. vue에 관심이 있으시면, 가이드 문서가 잘 정리되어 있으니 쭉 읽어보시면서 예제 코드를 만들어보시면서 vue의 강력한 기능들을 경험해보시면 좋을 것 같습니다.

Vue.js 시리즈 1편에 대한 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요.

▶ Vue.js를 이용한 Todo리스트 예제 만들기(1)

Vue.js를 이용한 Todo리스트 예제 만들기(1)

프론트엔드 개발에 관심이 있으시다면 Vue.js를 한 번 쯤은 들어보거나 이미 프로젝트에서 사용하신 경험이 있으시리라 생각합니다. 저는 실무에서 Vue.js를 사용해볼 경험이 없어서, 'Vue.js라는 javascript 프레임워크가 있다.' 정도만 알고, 공식 사이트에 가서 대충 내용만 훑어본 적이 있습니다.

그런데 최근에 주위에서 실시간 데이터 바인딩이 필요한 프로젝트에서 Vue.js를 사용한다는 이야기를 들었습니다. 저도 머지않아 실무에서 사용할 일이 있을 것이라는 생각이 들어, 개인적으로 공부를 해보기로 하였습니다. 가이드 문서가 아주 잘 정리되어 있어서, 가이드 문서만 쭉 읽어내려가다보니 이론적으로만 접근하는 것은 무언가 부족한 느낌이 들었습니다.

아주 간단한 것이라도 예제를 만들어보아야 실무에서도 좀 더 잘 활용할 수 있을 것 같아서 간단한 'Todo 리스트'를 Vue.js를 사용하여 만들어 보았습니다. 목적없이 문서를 읽을 때보다 예제를 만들면서 읽으니 필요한 기능을 더욱 적극적으로 익힐 수 있었습니다. 이 포스트를 포함하여 두 번의 포스트에 걸쳐 예제를 만들면서 각각의 기능에서 사용한 vue.js의 사용법을 소개해보려고 합니다.

우선 1차적으로 완성된 화면입니다. 느낌 가는대로 만들어서 디자인은 약간 정돈되지 않아 보일 수도 있습니다.(저에게는 최선입니다.ㅎㅎ) 필요한 기능만 간단하게 만들거라서 모바일 화면 사이즈에 맞게 크기를 잡았습니다. 현재 구현된 기능은 다음과 같습니다.

1. todo 리스트 구성하기
2. 카테고리, 검색어 입력을 통한 검색 기능
3. 보기 방식 변경
4. 정렬 방식 변경
5. 완료한 항목 체크

vue.js를 설치하는 방법은 상황에 맞게 여러가지가 있으니, 골라서 사용하시면 됩니다.(Vue.js Installation guide)저는 minified된 소스를 다운받아서 화면에 직접 import하는 방식을 택했습니다.

그리고 예제 데이터를 json 파일로 만들어서 준비하였습니다. 예제 데이터는 영어로 해야 화면이 예쁘게 나오는 것 같아서 생각나는 항목들을 영어로 만들었습니다. 썸네일 방식을 위한 이미지도 구글에서 찾아두었습니다.

{"todos": [
  {
    "thumbnail": "/data/images/vegetables.jpg",
    "category": "shopping",
    "title": "Buying some healthy food",
    "startDate": "20180310152031",
    "deadline": "20180314180000",
    "endDate": "",
    "important": "3",
    "filtered":"n"
  },
  {
    "thumbnail": "/data/images/book.jpg",
    "category": "shopping",
    "title": "Buying some new books",
    "startDate": "20180310152031",
    "deadline": "20180317180000",
    "endDate": "",
    "important": "2",
    "filtered":"n"
  },
  {
    "thumbnail": "/data/images/cleaning.jpg",
    "category": "cleaning",
    "title": "Spring Cleaning",
    "startDate": "20180315120000",
    "deadline": "20180317120000",
    "endDate": "",
    "important": "5",
    "filtered":"n"
  },
  {
    "thumbnail": "/data/images/jogging.jpg",
    "category": "exercise",
    "title": "Jogging at the park",
    "startDate": "20180318093000",
    "deadline": "20180318130000",
    "endDate": "",
    "important": "3",
    "filtered":"n"
  },
  {
    "thumbnail": "/data/images/present.jpg",
    "category": "shopping",
    "title": "Buying mom's present",
    "startDate": "20180317120000",
    "deadline": "20180319120000",
    "endDate": "",
    "important": "4",
    "filtered":"n"
  },
  {
    "thumbnail": "/data/images/yoga.jpg",
    "category": "exercise",
    "title": "Enroll yoga class",
    "startDate": "20180320093000",
    "deadline": "20180330130000",
    "endDate": "",
    "important": "3",
    "filtered":"n"
  }
],
"category": ["shopping", "cleaning", "exercise"]
}

1. Vue 객체 만들기

<body>
    <div id="app">
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            option: 'all',
            search: '',
            categories: [],
            todos: [],
            viewType: 'list',
            sortType: 'sort-numeric-up',
            buttons: {
                'view': [
                    {'class':'list', 'title':'view in list', selected:true},
                    {'class':'th-large', 'title':'view in thumbnail', selected:false}
                ],
                'sort': [
                    {'class':'sort-numeric-up', 'title':'sort by deadline', selected:true},
                    {'class':'sort-alpha-down', 'title':'sort by alphabet', selected:false},
                    {'class':'star', 'title':'sort by stars', selected:false}
                ]
            }
        },
        created: function(){
            sendAjax({
                url: '/data/todo.json',
                method:'GET',
                success: function(resp){
                    var respObj = JSON.parse(resp);
                    app.categories = respObj.category;
                    app.todos = respObj.todos;
                }
            });
        }
    })
</script>

Vue 객체 만들기는 아주 쉽습니다. Vue를 사용하여 렌더링할 래퍼 태그를 만들고, new Vue()로 vue 객체를 만들면 됩니다. Vue 객체를 만들 때 파라미터로 object을 넘기는데, 몇 가지 속성을 설정할 수 있습니다.

1. el - vue를 사용할 엘리먼트
2. data - vue에서 데이터 바인딩에 사용할 데이터
3. created -  vue의 라이프사이클 중 인스턴스가 만들어진 후 단계의 콜백

데이터를 비동기로 호출하여 불러온다는 상황을 가정하여, 우선 data.categories와 data.todos를 빈 배열로 선언한 후 vue 인스턴스가 만들어진 후에 발생할 콜백(created) 함수에서 ajax로 데이터를 불러와 조회한 데이터로 다시 값을 할당해주었습니다.

2. todo 리스트 구성하기

* 결과 화면

* html(리스트만)

<ul class="todo-list list" v-if="viewType === 'list'">
    <li v-for="(item,index) in todos"
        v-bind:class="[substring(item.deadline, 0, 8) == getTodayDate? 'deadline':'', item.endDate? 'done':'']"
        v-show="item.filtered!=='y'"
        v-on:click="checkTodo(index)">
        <i class="far" v-bind:class="item.endDate? 'fa-check-square':'fa-square'"></i>
        <span class="title">{{ item.title }}</span>
    <span class="stars">
        <i v-for="n in toNumber(item.important)" class="fas fa-star"></i>
    </span>
    </li>
</ul>
<ul class="todo-list thumbnail" v-else>
    <li v-for="item in todos" v-show="item.filtered!=='y'" v-bind:class="item.endDate? 'done':''">
        <div class="label">
            <span class="category">{{item.category}}</span>
            <span class="stars">
                <i v-for="n in toNumber(item.important)" class="fas fa-star"></i>
            </span>
        </div>
        <img v-bind:src="item.thumbnail">
        <p class="info">
            <span class="title">{{ item.title }}</span>
            <span class="deadline">
                <i class="far" v-bind:class="item.endDate? 'fa-check-square':'fa-square'"></i>
                until {{ formatDate(item.deadline) }}
                <i v-if="substring(item.deadline, 0, 8) == getTodayDate" class="fas fa-bell"></i>
            </span>
        </p>
    </li>
</ul>

* js

var app = new Vue({
    el: "#app",
    data: {
        option: 'all',
        search: '',
        categories: [],
        todos: [],
        viewType: 'list',
        sortType: 'sort-numeric-up',
        buttons: {
            'view': [
                {'class':'list', 'title':'view in list', selected:true},
                {'class':'th-large', 'title':'view in thumbnail', selected:false}
            ],
            'sort': [
                {'class':'sort-numeric-up', 'title':'sort by deadline', selected:true},
                {'class':'sort-alpha-down', 'title':'sort by alphabet', selected:false},
                {'class':'star', 'title':'sort by stars', selected:false}
            ]
        }
    },
    methods: {
      toNumber: function(number){
          if(typeof number == 'string'){
            number = Number(number);
          }
          return number;
      },
      substring : function(str, startIdx, length){
          return str.substr(startIdx, length);
      },

      formatDate: function(str){
          var result = str.substr(0, 4)+'-'+str.substr(4, 2)+'-'+str.substr(6, 2);
          if(result.replace(/-/g, '') == this.getTodayDate){
              result = "today " + str.substr(8, 2)+':'+str.substr(10, 2)+':'+str.substr(12, 2);
          }
          return result;
      },
      checkTodo: function(index){
          var todoObj = this.todos[index];

          if(todoObj.endDate){
              todoObj.endDate = '';
          } else {
              var d = new Date();
              this.todos[index].endDate = this.getTodayDate 
                  + d.toTimeString().replace(/[^0-9]/g, '').substr(0, 6);
          }
      }
    },
    computed: {
      getTodayDate: function(){
          var d = new Date();
          var arr = d.toLocaleString().replace(/ /g, '').split('.');
          return arr[0]+(arr[1].length==1?"0"+arr[1]:arr[1])+(arr[2].length==1?"0"+arr[2]:arr[2]);
      }
    },
    created: function(){
        sendAjax({
            url: '/data/todo.json',
            method:'GET',
            success: function(resp){
                var respObj = JSON.parse(resp);
                app.categories = respObj.category;
                app.todos = respObj.todos;
            }
        });
    }
})

1-1. v-if, v-else-if, v-else

todo 항목 리스트는 ul 태그를 사용하였고, 리스트 방식과 썸네일 방식 두 가지 화면을 보여주려고 하는데, 각각 방식마다 보여주는 정보와 태그 구성이 달라서 ul 태그를 두 개로 나누었습니다. ul 태그의 v-if와 v-else지시어를 통해 사용자가 선택한 view 방식에 맞는 리스트를 보여줄 수 있습니다.

Vue.js에서는 값에 따라 렌더링 하는 태그를 지정할 때 v-if, v-else-if, v-else지시어를 사용합니다. 저는 이 방식이 아주 깔끔하다는 생각이 듭니다. 별도의 커스텀 태그를 추가하지 않고, 태그에 직접 attribute로 추가함으로써 깔끔하게 보여줄 수 있기 때문입니다. 다만, 같은 조건을 적용할 v-if, v-else-if, v-else 속성을 가진 태그는 바로 이전/이후 형제 노드로 구성되어야 하며, 그 사이에 다른 노드를 추가하면 인식하지 못하는 제약이 있습니다.

예제의 경우는 ul 태그 하나만 구분을 하면 되지만, 만약 다수의 태그가 조건에 따라 달라져야 한다면 불필요하게 div 태그 등으로 묶을 필요없이 아래와 같이 <template>태그로 해결할 수 있습니다.

1-2. v-for

반복을 해야하는 경우에는 v-for지시어를 사용합니다. 반복시킬 태그에 v-for attribute를 추가하고 value를 설정해주면 됩니다. value는 상황에 맞게 여러가지 방법으로 설정할 수 있습니다 반복을 돌릴 대상은 array도 되고 object도 가능합니다. 반복문을 설정할 때 영역 안에서 배열의 경우 index를, object의 경우 key, value, index 값을 사용할 수 있어 편리합니다.

• array 반복(items->array명, item->array 요소[사용자 지정]): item in items, (item, index) in items
• object 반복(object->object명): value in object, (value, key) in object, (value, key, index) in object

반복문을 array 혹은 object가 아니라 특정 숫자를 지정하여 사용하고 싶은 경우에는 v-for="n in 5"와 같은 식으로 사용할 수 있습니다. 저는 todo 리스트에서 각 아이템 마다 '중요도'라는 속성명으로 숫자를 부여하여 그 수만큼 별 아이콘을 생성하기 위하여 v-for="n in toNumber(item.important)"라는 구문을 사용하였습니다. toNumber는 Vue객체의 methods에 직접 정의한 문자열을 숫자로 바꿔 리턴하는 함수입니다.

1-3. v-bind

태그 attribute에 데이터를 바인딩할 때는 v-bind 지시어를 사용합니다. 위의 예제와 같이 v-bind:class="", v-bind:src="" 같은 식으로 사용할 수 있습니다. 단순히 데이터 바인딩을 할 수 있을 뿐만 아니라, 조건식을 넣어서 상황에 따라 다른 값이 바인딩되도록 할 수 있습니다.

예제에서 이런 식으로 class 바인딩을 해보았습니다. 바인딩 시킬 클래스가 2개라서 [ ] 괄호로 감싸고 각각의 조건식을 , 로 연결해서 작성합니다. substring과 getTodayDate는 위의 js 소스에서 각각 methods와 computed속성에 정의한 함수입니다. 이렇게 조건식 안에서 Vue 객체에 정의한 함수들을 사용할 수 있습니다.

이 식의 의도는 '마감일(item.deadline)에서 앞 8자리(yyyyMMdd)와 오늘 날짜(yyyyMMdd) 문자열이 같다면deadline이라는 클래스를 추가하고, item.endDate에 값이 있다면done이라는 클래스를 추가한다.'는 것입니다.

1-4. v-show

조건에 따라 요소를 보여주거나 감추고 싶을 때는 v-show 지시어를 사용합니다. value로 요소를 보여줄 조건을 작성합니다. 저는 사용자의 키보드 이벤트를 받아 입력한 문자열에 따라 리스트를 필터링할 용도로 v-show 지시어를 사용했습니다. 어떻게 보면 v-if와 하는 일이 비슷합니다. 조건에 따라 요소를 보여주거나 안보여주거나 하는 역할을 하기 때문입니다. 하지만, 화면 뒤에서 일어나는 동작 방식에 차이가 있습니다.

v-if는 조건에 따라서 요소를 보여주거나 감출 때 노드를 삭제하고 다시 생성하는 방식을 사용합니다. 조건이 false인 경우에는 아예 렌더링 자체를 안해버리는 것이죠. 반면에,v-show는 조건과 상관없이 렌더링을 합니다. 다만 css 기반의 토글(display:block; display:none;)을 통해 보여주거나 감춥니다.

따라서 두 가지 지시어는 상황에 맞게 써야합니다. v-if는 노드 자체에 변화가 일어나므로 작업의 비용이 크다고 볼 수 있습니다. 그러므로 렌더링 후 toggle이 자주 일어나는 경우보다는 조건에 따라 요소를 렌더링 할지 말지를 결정하는 경우 사용하는 것이 더 좋겠습니다. v-show는 노드 자체의 변화가 일어나는 것은 아니므로 보다 작동 방식이 가볍습니다. 그러므로 사용자의 클릭이나 키보드 이벤트를 받아 요소를 보이거나 감추는 등의 비교적 자주 일어나는 경우에 사용하는 것이 적합할 것 같습니다.

1-5. v-on

이벤트를 바인딩할 때는 v-on: 지시어를 사용합니다. v-on:click처럼 콜론 뒤에 이벤트명을 씁니다. value로는 함수명을 적습니다. 저는 Vue 객체를 생성할 때 methods라는 속성에 정의한 함수를 이벤트 핸들러로 사용했지만, 꼭 methods에 정의한 함수만을 쓸 수 있는 것은 아닙니다.

v-on:submit, v-on:keyup 처럼 click 이벤트 외에도 다양한 이벤트를 바인딩 할 수 있습니다. 이벤트 바인딩 시 사용하기 정말 편리하다는 생각이 드는 기능이 있습니다. 그 중 하나는 v-on:click.prevent 와 같은 방식으로 이벤트명 뒤에 수식어(Modifiers)를 쓸 수 있다는 점입니다. .prevent를 붙이게 되면 이벤트 발생 시 event.preventDefault()를 호출합니다. .stop을 붙이면 이벤트 발생 시 event.stopPropagation()을 호출합니다. 수식어는 keyup이벤트에도 붙일 수 있는데, v-on:keyup.enter 혹은 v-in:keyup.13 과 같은 식으로 특정 키에 이벤트를 걸 수도 있습니다. 수식어를 통해 이벤트 핸들러에 필요한 로직 이외에 이벤트 제어와 관련한 코드를 넣지 않아도 되어서 더욱 깔끔한 코드 작성이 가능합니다.

1-6. computed/methods

데이터 바인딩 시 단순하게 불러온 데이터를 바인딩 하는 경우도 있지만, 가끔은 로직에 의해 데이터를 변형할 필요가 있는 경우가 있습니다. 만약 mustache 표현식 안에 javascript 로직을 넣는다면 화면 구성을 위한 마크업에 로직이 섞여 알아보기도, 수정하기도 힘든 코드가 될 것입니다.

그래서 vue에서는 복잡한 로직을 위해 methods와 computed 속성을 제공합니다. 이 속성으로 함수들을 정의할 수 있는데, 차이점은 computed 속성은 의존성에 기반을 두고 캐시가 된다는 점입니다. 즉, computed에 정의한 함수에서 사용한 데이터가 업데이트 되지 않는다면, 함수를 다시 실행하지 않고 바로 이전에 계산된 값을 반환합니다.

computed와 methods의 차이점에 근거하여, 예제를 만들 때 어떤 함수는 computed로 어떤 함수는 methods에 정의를 하였습니다. getTodayDate는 오늘 날짜를 yyyyMMdd 형태로 반환하는 함수입니다. 오늘 날짜는 한 번만 계산을 하면 호출할 때 마다 매번 코드가 실행될 필요는 없으므로 computed의 속성으로 설정하였습니다.

todo 리스트를 구성하는 부분까지 사용한 vue 기능을 정리를 해봤습니다. 글이 너무 길어지는 것 같아서 다음 포스트에서 검색 기능 구현부터 이어서 작성하도록 하겠습니다.

Vue.js에 대한 더 자세한 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요.

▶ Vue.js를 이용한 Todo리스트 예제 만들기(2)

var myEvent = new process.EventEmitter();

이벤트 연결하기 (리스너 등록)

이벤트를 추가하려면, emitter.addListener(eventName, listener) 로도 등록 가능하지만, jQuery를 사용한다면 익숙할 emitter.on(eventName, listener)를 사용하면 된다.

노드 API문서의 예를 활용하면, 서버가 연결되면 콘솔창에 누군가 접속했음을 알리는 로그가 기록된다.

server.on('connection', (stream) => {
  console.log('someone connected!');
});
// 서버가 연결되면 console창에 'someone connected' 출력

마찬가지로, 최초 한번만 실행되고 이벤트를 제거할때는 .once(event, listener) 를 사용하면 된다.

server.once('connection', (stream) => {
  console.log('Ah, we have our first user!');
});
// 서버가 최초로 연결되면 console창에 'Ah, we have our first user!' 출력

기본적으로 EventEmmiters는 10개 이상의 리스너가 특정한 이벤트에 붙으면 메모리 누수를 막는것을 돕기위해 경고 메세지를 프린트해준다. 

특정개수의 리스너를 붙일 경우 emitter.setMaxListenrs(n) 매개변수에 개수를 입력해주면 된다. 
(무한개로 지정할 때는 매개변수로 0 또는 Infinity 작성)

연결된 리스너의 개수를 알고 싶을때는 emitter.listenerCount(eventName) 로 해당 이벤트에 등록된 리스너 개수를 반환해준다. 개수 말고 리스너 배열 자체를 반환할 때는 emitter.listener(eventName) 
사용하면 된다.

이벤트 삭제하기

이벤트 삭제할때는 emitter.removeListener(eventName, listener) 메서드를 사용하면 특정 이벤트의 이벤트리스너를 제거할 수 있다. 

const callback = (stream) => {
  console.log('someone connected!');
};
server.on('connection', callback);
// ...
server.removeListener('connection', callback);
// 연결되었던 callback함수가 삭제

 특정 리스너를 지울 수 도 있고 emitter.removeAllListeners([eventNam]) 메소드로 해당 이벤트에 모든 리스너를 제거할 수도 있다.

이벤트 호출하기

 emitter.emit(eventNam[, ...args]) 순서대로 각 리스너를 등록된 이벤트에 맞게 호출한다.
또한, 메소드가 존재하면 true, 존재하지 않으면 false를 반환한다. emit 메소드로 이벤트를 강제로 호출하게 되는 경우 리스너는 실행되지만 실제 이벤트가 발생하는것은 아니라는 것은 주의해야한다. 

다음번에는 외부모듈을 집중적으로 알아보겠습니다. 

Node.js의 대부분이 외부모듈 형태로 동작하는데 멋진 플러그인들이 많이 준비되있습니다.

웹 관련해서 EJS 모듈과 Jade 모듈과 다른 개발자들이 배포한 모듈 몇가지를 중점으로 살펴보도록 하겠습니다.

참조 - https://nodejs.org/docs/latest-v7.x/api/events.html#events_emitter_emit_eventname_args

Node.js 시리즈 1,2편에 대한 내용을 살펴보고 싶다면, 아래 링크를 클릭해주세요.

▶ Node.js 기초부터 튼튼히 (1) 시작하기

▶ Node.js 기초부터 튼튼히 (2) 내장 모듈