TAEYO.NET

요즘은 개발을 하는 데 있어서 데이터 바인딩은 중요한 요소입니다. Knockout JavaScript 라이브러리는 HTML 및 JavaScript 개발에서 이러한 기능을 제공해 줍니다. 마치 Model-View-ViewModel(MVVM)와 같이 선언적 바인딩 구문의 단순함과 분리 패턴의 완벽한 통합은 유지보수 및 개선에 필요한 코드를 더 쉽게 만들어서 일반적인 푸시-앤-풀 관련 작업을 매우 쉽게 만들어 줍니다. 이번 칼럼을 통해서 저는 몇 가지 시나리오를 통해 Knockout 이 왜 이상적인지 설명하고, 그리고 예제를 통해서 Knockout을 시작하는 방법에 대해 설명하고 기본 기능을 사용하는 방법을 보여 드리겠습니다. 코드 샘플은 http://archive.msdn.microsoft.com/mag201202Client에서 다운로드 가능하며, 선언 바인딩의 사용방법을 다룰 뿐만 아니라 서로 다른 형식의 바인딩 개체를 생성하는 방법 및 MVVM과 같은 훌륭한 분리 패턴에 따라 데이터 중심적인 자바스크립트 코드를 작성하는 방법 등을 다루고 있습니다.

시작하기

Knockout은 Steve Sanderson 에 의해서 개발된 MIT license정책을 따르고 있는 작은 오픈소스 자바스크립트 라이브러리 입니다. Knockoutjs.com 에는 Knockout 를 지원하는 브라우저의 리스트가 게시되어 있습니다. (현재는 Explorer 6+, Firefox 2+, Chrome, Opera, Safari 등 거의 모든 주요 브라우저를 지원합니다.) 여러분께서 Knockout 을 개발을 시작하기 위해서는 몇 가지 필수적인 준비가 필요합니다. 먼저 최신 버젼의 Knockout을 얻어야 합니다(현재는 2.0.0). http://bit.ly/scmtAi에 방문하셔서 최신 버젼을 받으시고 여러분의 프로젝트에 추가해 주세요. 만약 여러분이 Visual Studio 2010을 사용하신다면, NuGet Package Manager를 사용하여 Knockout 을 설치하시기를 강력하게 추천합니다(그리고, 다른 라이브러리를 받는 경우에도 Nuget은 유용합니다). 왜냐하면, 이것을 통해 라이브러리를 설치하면 자동으로 버젼을 관리하여 새로운 버젼이 업데이트 될 경우 알림창을 통해 알려주기 때문입니다. NuGet은 Knockout을 다운로드 하고 두 개의 자바스크립트 파일을 여러분의 프로젝트 안의 scripts 폴더에 추가할 것입니다. 그 파일들은 생산성을 위해 최적화(minified) 되어 있으며, 파일명은 이러한 명명 규칙을 따릅니다. knockout-x.y.z.js(x는 주 버전, y는 부 버전, z는 개정 버전 번호). 사람이 읽을 수 있도록 최적화되지 않은 Knockout 소스 코드가 있는 knockout-x.y.z-debug.js 파일도 존재합니다. Knockout을 공부하거나 디버깅을 하고자 할 경우에는 이 파일을 참조하시기 바랍니다.

일단 위 파일들을 가지고 있다고 가정하고, HTML 파일을 열어 주세요 (아니면 ASP.NET MVC 를 사용하신다면 Razor 파일이 되겠네요) 그리고 아래와 같이 스크립트 블록을 추가하고 knockout 라이브러리를 참조시키세요

<script src="../scripts/knockout-2.0.0.js" type="text/javascript"></script>

바인딩의 장점

첫 번째 예제를 통해서 Knockout 이 기존 코딩 방식과 다른 점을 설명하겠습니다. 우선 Knockout을 사용하지 않고 데이터 소스 오브젝트에서 HTML 요소로 데이터를 넣는 방법을 설명할까 합니다(관련된 소스 코드는 다운로드 받으신 예제 페이지의 01-without-knockout.html 파일입니다). 그런 다음, 동일한 예제에 대해 Knockout을 사용하여 처리하는 것을 보여 드리겠습니다. 일단, 아래와 같이 몇 개의 HTML 개체를 가지고 있는 페이지가 있다고 가정하고, 그 페이지에 데이터 소스 개체로부터 데이터를 넣도록 하겠습니다.

<h2>Without Knockout</h2>
<span>Item number:</span><span id="guitarItemNumber"></span>
<br/>
<span>Guitar model:</span><input id="guitarModel"/>
<span>Sales price:</span><inputid="guitarSalesPrice"/>

만약, 여러분이 표준 HTML 요소에 데이터를 넣을 수 있는 데이터 개체를 가지고 있다면 아래와 같이 jQuery를 통해 데이터를 바인딩해야 합니다.

$(document).ready(function () {
var product = {
itemNumber: "T314CE",
model: "Taylor 314ce",
salePrice: 1199.95
};
$("#guitarItemNumber").text(product.itemNumber);
$("#guitarModel").val(product.model);
$("#guitarSalesPrice").val(product.salePrice);
});

이 코드 예제는 jQuery를 사용하여 해당 ID가 있는 HTML 요소를 찾아, 그 요소들의 속성 값을 설정합니다

이 코드에는 세 가지 주요 포인트가 있습니다. 첫째로, 값이 소스 개체로부터 넣어지기 때문에 원본 값을 대상 요소에 매핑해 줄 코드를 작성해야만 합니다. 만약, 더 많은 속성값이 있다면(아니면 배열과 개체 그래프라면), 코드가 더욱 복잡해 질 수 있습니다. 두 번째, 소스 개체의 값이 변경될 경우 HTML 요소는 값을 그 즉시 반영하지 못하며, 저러한 매핑 코드가 다시 호출되기 전까지는 변경사항을 반영하지 못합니다. 셋째, HTML 요소의 값을 변경하는 경우, 변경 사항은 소스 개체에 반영되지 않습니다. 물론, 많은 코드를 통해서 이 문제를 해결할 수도 있겠지만, 데이터 바인딩을 사용하면 이 문제는 쉽게 해결됩니다. 이제 이를 해결해 보도록 하겠습니다.

<h2>With Knockout</h2>
<span Item number</span><span data-bind="text: itemNumber"></span>
<br/>
<span>Guitar model:</span><input data-bind="value: model"/>
<span>Sales price:</span><input data-bind="value: salePrice"/>

id 속성이 data-bind 속성으로 대체 되었습니다. applyBindings 함수를 한번 호출해 주기만 하면 Knockout 은 주어진 개체(이 예제에서는 "product")를 페이지에 자동으로 바인딩 해 줍니다. 이 동작은 페이지를 위한 데이터 컨텍스트를 product 개체로 설정해 주는데, 이 때 대상 요소(HTML 요소)가 바인딩할 수 있는 데이터 컨텍스트의 속성을 식별할 수 있음을 의미합니다.

ko.applyBindings(product);

원본 개체의 값들은 이 페이지의 대상 요소에 푸쉬됩니다(모든 Knockout의 함수는 고유 네임스페이스인 ko와 함께 표시됩니다). 대상 요소와 원본 개체간의 결합은 data-bind 속성에 의해 선언됩니다. 앞쪽의 예제에서는 첫 번째 span 태그의 data-bind 속성의 텍스트 값이 Knockout에 의해서 product.itemNumber 속성과 바인딩 될 것으로 예상할 수 있습니다. 그리고 Knockout은product.itemNumber 의 값을 요소에 푸쉬합니다.

여러분은 이제 Knockout이 어떻게 해서 코드를 줄여 주는지 이해하실 수 있을 것입니다. 많은 값과 요소가 추가 되더라도 필요한 JavaScript 코드는 단지 applyBindings 입니다. 그러나, 아직 모든 문제들이 해결된 것은 아닙니다. 이 예제는 원본 개체가 변경될 경우 HTML 대상에 업데이트 사항이 반영되지 않고, HTML 대상의 내용이 변경될 때에도 원본 개체를 업데이트 해 주지 않습니다. 이러한 점들을 위해 우리는 관찰(observables) 기능이 필요합니다.

관찰성, 옵저버블(Observables)

Knockout 은 관찰을 통해 가지고 있는 값이 변경되었을 때 리스너에 통지할 수 있는 의존성 추적 기능을 개체에 부여합니다(이것은 XAML기술의 INotifyPropertyChanged 컨셉과 비슷합니다). Knockout 은 observable이라는 이름의 사용자 정의 함수와 래핑된 개체에 의해 관찰 항목을 구현합니다. 예를 들면, 다음과 같이 개체에 항목을 설정합니다

var product = {
model: "Taylor 314ce"
}

var product = {
model: ko.observable("Taylor 314ce")
}

속성들에 대해 일단 관찰성을 선언하게 되면, 그 즉시 데이터 바인딩은 실제로 이루어집니다. 그림1 의 자바스크립트는 두 개체가 Knockout에 의해 HTML 요소에 바인드되는 예를 보여줍니다. 첫 번째 개체(data.product1)는 단순한 리터럴 개체로 항목을 정의하고 있으며, 두 번째 개체(data.product2)는 Knockout 관찰 항목으로 정의하고 있습니다.

$(document).ready(function () {
var data = {
product1: {
id: 1002,
itemNumber: "T110",
model: "Taylor 110",
salePrice: 699.75
},
product2: {
id: ko.observable(1001),
itemNumber: ko.observable("T314CE"),
model: ko.observable("Taylor 314ce"),
salePrice: ko.observable(1199.95)
}
};
ko.applyBindings(data);
});

이번 예제 페이지의 HTML 은 그림 2에서 보이듯이 4 개의 바인딩 요소를 가지고 있습니다. 첫 번째 및 두 번째 div 태그 안에는 관찰이 적용되지 않은 항목들이 바인딩된 HTML 요소들을 들어 있습니다. 그렇기에 첫 번째 div의 값들이 변경된다 하더라도 아무 것도 변하지 않습니다. 세 번째와 네 번째 div 태그 안에는 관찰이 적용된 항목들이 바인딩 되어있는 HTML 요소들을 포함되어 있습니다. 그렇기에, 세 번째 div 안의 값들이 변경되면, 네 번째 div 안의 요소들이 업데이트 됩니다. 예제 파일 중 02-observable.html 파일을 통해서 이 데모를 실행시켜 보세요.

<div>
<h2>Object Literal</h2>
<span>Item number</span><span data-bind="text: product1.itemNumber"></span>
<br/>
<span>Guitar model:</span><input data-bind="value: product1.model"/>
<span>Sales price:</span><input data-bind="value: product1.salePrice"/>
</div>
<div>
<h2>Underlying Source Object for Object Literal</h2>
<span>Item number</span><span data-bind="text: product1.itemNumber"></span>
<br/>
<span>Guitar model:</span><span data-bind="text: product1.model"></span>
<span>Sales price:</span><span data-bind="text: product1.salePrice"></span>
</div>
<div>
<h2>Observables</h2>
<span>Item number</span><span data-bind="text: product2.itemNumber"></span>
<br/>
<span>Guitar model:</span><input data-bind="value: product2.model"/>
<span>Sales price:</span><input data-bind="value: product2.salePrice"/>
</div>
<div>
<h2>Underlying Source Object for Observable Object</h2>
<span>Item number</span><span data-bind="text: product2.itemNumber"></span>
<br/>
<span>Guitar model:</span><span data-bind="text: product2.model"></span>
<span>Sales price:</span><span data-bind="text: product2.salePrice"></span>
</div>

(잠깐: Knockout을 적용한다고 해서 반드시 관찰 항목을 사용해야 하는 건 아닙니다. 만약 여러분이 DOM 요소에 값을 설정하고 싶긴 하지만 원본 데이터의 값이 변할 경우에 업데이트 되는 것은 원하지 않는다면, 즉, 처음에 한번만 값을 반영하길 바란다면, 그냥 처음에 다루었던 예제처럼 단순 개체를 사용하시면 충분합니다. 그러나, 원본 개체 및 대상 DOM 요소를 양방향 바인딩을 통해 동기화하기를 원하신다면 관찰 항목을 사용하시는 것이 좋습니다.)

내장되어 있는 바인딩

지금까지의 예제들을 통해 Knockout이 텍스트와 값들을 어떻게 바인딩 하는지 보여드렸습니다. Knockout은 대상 DOM 요소에 쉽게 바인딩할 수 있도록 만들어 주는 많은 내장 바인딩을 가지고 있습니다. 예를 들면, Knockout 을 통해 텍스트 바인딩을 하면, 인터넷 익스플로러의 경우 innerText 속성을 변경해 주며 다른 브라우저인 경우에는 innerText에 해당하는 속성을 변경해 줍니다. 당연히 텍스트 바인딩이 사용되면 이전 텍스트들은 자연스럽게 덮어쓰기가 되어 버립니다. 많은 내장 바인딩이 있지만, 공통적으로 자주 쓰이는 것들은 그림3에 나와 있습니다. 모든 내장 바인딩의 종류를 알아 보시려면 Knockout 온라인 문서의 왼쪽 네비게이션 패널을 참조하시면 됩니다. (bit.ly/ajRyPj).

관찰성 배열(ObservableArrays)

지금까지의 예제들을 통해 Knockout의 기초는 학습되었을 것이라고 믿습니다. 이제는 보다 실용적이고 간단한 계층 데이터를 다루는 예제를 보여드릴 시간입니다. Knockout은 단순한 값들(이전 예제들에서 본 형태입니다) 뿐만 아니라 JavaScript 배열, 계산된 값과 사용자 정의 바인딩(나중에 다른 강좌를 통하여 설명 드리겠습니다)등 여러 형태의 바인딩을 지원합니다. 이번 예제에서는 product 개체 배열을 리스트에 바인딩하는 방법에 대해 알아보겠습니다(그림 4와 같은 모습입니다).

특히나 이는 개체 그래프와 함께 데이터 바인딩을 다룰 때, 페이지에 필요한 모든 함수들과 데이터를 단일 개체로 캡슐화하는 경우에 매우 유용합니다. 이러한 형태는 주로 MVVM 패턴에서 사용됩니다. 이번 예제의 경우 뷰는 HTML 페이지 및 DOM 요소입니다. 또한 모델은 product 배열이 됩니다. 뷰모델은 모델을 View 와 연결해 주는 역할을 하는데, 바로 이 부분에 Knockout이 사용됩니다.

Products 배열은 observableArray 함수를 이용하여 설정됩니다. 이것은 XAML 기술의 ObservableCollection 과 비슷합니다. Products 항목은 관찰성 배열이기 때문에 배열에서 아이템이 추가되거나 삭제될 때마다 대상 요소가 갱신되고, 또한 아래와 같이 DOM 에도 아이템의 변경사항이 적용됩니다.

var showroomViewModel = {
products: ko.observableArray()
};

showroomViewModel 은 대상 요소에 바인딩 될 상위 개체입니다. 이것은 데이터 서비스에서 JSON으로 넘어온 products 의 목록을 가지고 있습니다. Product 리스트를 불러오는showroomViewModel.load 함수는 그림 5 에 showroomViewModel 개체를 설정하는 자바스크립트들과 함께 있습니다(이 예제를 위한 완전한 소스 및 샘플 데이터는 03-observableArrays.html 에 있습니다). load 함수는 아래의 견본 product 데이터에 대해서 루프를 돌고, 관찰성 배열에 넣기 전에 Product 함수를 사용하여 새로운 product 개체를 생성합니다.

var photoPath = "/images/";
function Product() {
this.id = ko.observable();
this.salePrice = ko.observable();
this.listPrice = ko.observable();
this.rating = ko.observable();
this.photo = ko.observable();
this.itemNumber = ko.observable();
this.description = ko.observable();
this.photoUrl = ko.computed(function () {
return photoPath + this.photo();
}, this);
};
var showroomViewModel = {
products: ko.observableArray()
};
showroomViewModel.load = function () {
this.products([]); // reset
$.each(data.Products, function (i, p) {
showroomViewModel.products.push(new Product()
.id(p.Id)
.salePrice(p.SalePrice)
.listPrice(p.ListPrice)
.rating(p.Rating)
.photo(p.Photo)
.itemNumber(p.ItemNumber)
.description(p.Description)
);
});
};
ko.applyBindings(showroomViewModel);

Product의 항목들은 관찰성 기능을 사용해서 정의되었지만 반드시 관찰성을 필요로 하는 것은 아닙니다. 예를 들면, 그것들이 읽기 전용이고 원본이 변경될 때 대상 업데이트를 원하지 않거나 혹은 전체 컨테이너가 새로고침 될 경우에만 반영되길 바란다면 일반적인 속성을 가질 수 있습니다. 하지만 원본이 변경되거나 DOM 이 편집될 때마다 항목이 새로 고침 되어야 한다면, 관찰성 부여는 좋은 선택입니다.

Product 함수는 자신의 모든 항목을 Knockout 관찰성 항목으로 정의하고 있습니다(photoUrl 제외). Knockout이 데이터를 바인딩하고 나면, products 배열에 얼마나 많은 아이템이 현재 바인딩 되어 있는지를 알려주는 length 와 같은 표준 함수를 사용할 수도 있습니다.

<span data-bind="text: products().length"></span>

흐름제어(Control-of-Flow) 바인딩

그 다음, Products 배열은 DOM 요소에 바인딩될 수 있는데요. 목록을 표시하는 데 있어 정형화되지 않은 템플릿을 사용할 수 있습니다. 아래의 HTML은 ul태그와 products를 바인딩함에 있어 foreach라는 흐름제어(control-of-Flow) 바인딩을 사용하는 예입니다.

<ul data-bind="foreach:products">
<li class="guitarListCompact">
<div class="photoContainer">
<img data-bind="visible: photoUrl, attr: { src: photoUrl }"
class="photoThumbnail"></img>
</div>
<div data-bind="text: salePrice"></div>
</li>
</ul>

ul 태그 안의 요소들은 각 product에 대한 템플릿으로 사용될 것입니다. foreach 내부에서 데이터 컨텍스트는 상위 개체인 showroomViewModel 에 의해 각각의 개별적인 product로 변경됩니다. 그렇기 때문에, 안에 있는 DOM 요소가 직접적으로 product의 photoURL 과 salePrice 속성에 바인드될 수 있는 것입니다.

네 가지의 주요 흐름제어 바인딩은 다음과 같습니다 : foreach, if, ifnot, with. 이러한 흐름제어 바인딩들은 명명된 템플릿을 생성하지 않고도 선언적으로 흐름제어 로직을 정의할 수 있게 해 줍니다. if 라는 제어 바인딩은 조건을 만족할 경우에, ifnot 바인딩은 조건이 거짓일 경우에 아래와 같은 형태로 정의된 블록 안의 내용을 따르게 되고 그 내용대로 화면을 표시하게 됩니다.

<div data-bind="if:onSale">
<span data-bind="text: salePrice"></span>
</div>

with 바인딩을 사용하면, 데이터 컨텍스트를 여러분이 지정한 어떤 개체로 변경할 수 있습니다. 이것은 특히 다중 부모/자식 관계를 가지거나, 페이지 내에서 명확한 뷰 모델을 가진 개체를 다루는 경우에 유용합니다. 예를 들면, sale 뷰모델 개체가 페이지에 바운드되어 있고, sale의 자식 개체로 customer 및 salesperson가 존재한다면, with 바인딩을 사용하여 아래와 같이 바인딩의 가독성을 높이고 유지보수를 쉽게 만들 수 있습니다.

<div data-bind="with:customer">
<span data-bind="text: name"></span><br/>
<span data-bind="text: orderTotal"></span>
</div>
<div data-bind="with:salesPerson">
<span data-bind="text: employeeNum"></span><br/>
<span data-bind="text: name"></span>
</div>

계산값(computed) 관찰성

여러분은 Product 함수가 photoUrl을 특수한 형태의 계산된 속성으로 정의하고 있는 것을 볼 수 있었을 것입니다. ko.computed 는 데이터 바인딩 작업을 위해 값을 계산하는 바인딩 함수를 정의합니다. 계산값은 관련된 관찰성 값이 변경됨에 따라 자동으로 업데이트 됩니다. 이것은 특히 값이 원본 개체 안에서 고정된 값으로 명확하게 표현되지 않을 경우에 유용합니다. URL 생성 외에 또 다른 일반적인 예제로는 firstName 및 lastName 속성을 이용하여 fullName 속성을 생성하는 것이 있습니다.

(주의 : 이전 버전의 knockout은 계산 속성을 dependentObservable 로 사용합니다. 두 개 모두 Knockout 2.0.0에서 동작하지만 저는 새로운 computed 함수 사용을 권장합니다)

Computed 속성은 값을 계산하기 위한 함수와 바인딩을 적용하고 있는 개체를 나타내는 개체를 인자로 갖습니다. JavaScript 개체 리터럴은 그 자신을 참조할 방법이 없기 때문에 두 번째 매개변수인 this는 중요합니다. 그림5에서 this 키워드(showroomViewModel 을 대표하는 것)는 종속적인 관찰성 함수가 photo 속성을 사용할 수 있도록 하기 위해서 전달되고 있습니다. 아래와 같이 이러한 개체(this) 전달을 해 주지 않으면 photo 함수는 미 정의 상태가 되고, 기대했던 photo URL 의 생성은 실패하게 됩니다.

this.photoUrl = ko.computed(function () {
return photoPath + photo(); // photo() will be undefined
});

기본적인 바인딩 속성 이해하기

이번 강좌에서 여러분은 Knockout JavaScript 라이브러리를 사용하는 데이터 바인딩을 처음으로 접해 보았습니다. Knockout에서 가장 중요한 것은 기본적인 바인딩 속성을 이해하는 것입니다(관찰성, 관찰성 배열, 계산값). 이러한 바인딩 속성들을 사용하면 완전한 분리 패턴을 사용하여 강력한 HTML 응용 프로그램을 작성할 수 있습니다. 또한, 저는 일반적인 내장 바인딩 형식들을 소개해 드렸고, 흐름제어 바인딩도 보여 드렸습니다. 그러나, Knockout은 이보다 훨씬 많은 기능을 지원합니다. 다음번에는 더 많은 내장 바인딩들에 대해 자세하게 소개해 드리도록 하겠습니다.

John Papa 는 유명한 실버라이트 TV 쇼를 진행했던 전직 마이크로소프트 실버라이트 및 윈도우8 팀의 에반젤리스트입니다. 그는 국제적으로, MIX, PDC, Tech?Ed, Visual Studio Live! 및 DevConnections 등 여러 행사에서 기조 연설 및 세션을 진행했습니다. Papa는 또한 Visual Studio 매거진컬럼니스트 (Papa가 발행하는 것)의 컬럼니스트이며 Pluralsight 트레이닝 비디오의 제작자 입니다. 그의 트위터 주소는 twitter.com/john_papa 입니다.

이 문서를 검토해 주신 기술 전문가인 Steve Sanderson 에게 감사 드립니다.