인터랙티브로 말하는 웹과 웹앱 개발에 필요한 MVC 프레임웍의 기초 지식 - jQuery data binding

인터랙티브로 말하는 웹과 웹앱 개발에 필요한

 MVC 프레임웍의 기초 지식

( jQuery data binding )

참조 URL

1. https://github.com/jquery/jquery-datalink
   
2. http://blog.naver.com/PostView.nhn?blogId=loudon23&logNo=30096650420&parentCategoryNo=36&viewDate=
3. http://jsfiddle.net/rniemeyer/4FdcY/
   
4. http://blog.outsider.ne.kr/532
   

2013/09/21 - [HTML5] - 인터랙티브로 말하는 웹과 웹앱 개발 에서 언급이 되었던 DataBinding에 대해서 좀더 알아 보도록 하겠다.

Data Binding을 이용하면 편리하게 객체값에 대해서 DOM과 동기화를 수행할 수 있다. 예로 사용자가 웹 페이지에서 값을 입력하면 입력된 값을 자바스크립트로의 값으로 변환해야 한다. 그리고 반대로 자바스크립트의 값이 변경 되면 웹 페이지에도 반영을 해야 한다. 지 작업을 개발자가 일일이 수행해야 했다. 그렇지만 jQuery의 DataLink를 이용하면 two-way 방향으로 자동으로 동기화가 되게 된다. 개발자는 코드로 보여주는 것이 이해가 빠르므로 아래 코드를 살펴보자.

(여기서 소개하는 jQuery의 DataLink는 약 2년정도 전에 발표가 되었으며 AngularJS나 KnockOutJS의 DataBinding의 개념을 이해 시키기 위해 소개하는 기술임을 알아두기 바란다.)

<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jQuery.DataLink.js"></script>
 
<script>
    // 객체 선언
    var person = { };
 
    $().ready(function () {
        // 데이터와 HTMl을 연결 시킨다.
        $("form").link(person, {
            firstName: "firstName",
            age: "age",
        });
 
        // person의 firstName이 비어 있는지 체크
        logWrite(person.firstName);
 
        // datalink로 firstName에 새로운 값을 넣는다.
        // 내부적으로 링크되어 있는 노드에 값이 변경됨을 알려 준다.
        $(person).setField("firstName", "새로운 값");
        $(person).setField("age", "30");
 
        // 값이 변경 되었는지 체크한다.
        logWrite('person : ' + JSON.stringify(person));
        // 자바스크립트의 객체만 변경 하였으나 HTML 노드의 값이 변경이 제대로 되었는지 체크
        logWrite('input text : ' + $("#firstName").val());
 
        // Form안에 있는 input 테크에서 값이 변경이 되면 실행
        $("form").change(function () {
            // person의 값을 로그에 찍어 준다.
            logWrite('person : ' + JSON.stringify(person));
        });
    });
 
    // 로그로 저장이지만 HTMl 노드에 보여주는 역할을 한다.
    function logWrite(msg) {
        $('#log').append('<li>' + msg + '</li>');
    }
 
    // 버튼 클릭시 객체의 값을 변경
    function personNameChange(str) {
        $(person).setField("firstName", str);
    }
</script>
 
<form name="person">
    <label for="name">Name:</label>
    <input type="text" id="firstName" name="firstName" />
    <input type="text" id="age" name="age" />
    <button onclick="personNameChange('클릭으로 객체 값 변경'); return false;">객체 값 변경</button>
    <br />
    <ul id="log"></ul>
</form>

[코드1] jquery의 datalink를 이용해서 DOM과 연결하는 코드

- $("form").link(person, { }) : Datalink의 확장 메소드로 자바스크립트의 person 객체와 DOM ( HTML Tag )을 연결한다.

- $(person).setField("firstName", "새로운 값") : person 객체에 값을 변경하고 내부적으로 연결된 DOM의 값을 변경하여 준다.

- logWrite('person : ' + JSON.stringify(person)) : person의 값을 JSON 형식으로 만들어서 로그에 저장한다.

이제 양방향으로 연결되었으니 화면으로 확인해 보자.

[그림1] jQuery의 Datalink로 연결된 화면

1. 처음에는 person.firstName의 값이 할당되어 있지 않기 때문에 'undefined' 로그에 출력 되었다.

2. person의 값이 정상적으로 할당이 되었는지 체크한 로그

3. person의 변경된 값으로 input 값이 바로 변경되었는지 체크한 로그

4, 5. 사용자가 input에 값을 변경한 그래도 person의 값이 반영된 로그

6. '객체 값 변경' 버튼을 눌러 person의 값을 변경하였을 때 정상적으로 DOM에 반영된 로그

위와 같이 Data binding을 사용하면 사용자의 값을 추적하는 번거로운 작업을 개발자가 아닌 라이브러리에서 관리가 되므로 좀더 많은 시간을 비지니스 로직에 투자할 수 있다.