[javascript] Knockout.js를 이용한 데이터베이스 연동 방법

04 Dec 2023

javascript

Knockout.js는 JavaScript 기반의 MVVM(Model-View-ViewModel) 프레임워크로, 데이터와 UI를 동기화하여 데이터의 변화를 자동으로 반영할 수 있도록 도와줍니다. 이번 글에서는 Knockout.js를 사용하여 데이터베이스와의 연동을 어떻게 할 수 있는지 알아보겠습니다.

1. Knockout.js란?

Knockout.js는 바인딩(binding)을 통해 ViewModel과 View를 연결시켜주는 역할을 합니다. ViewModel은 데이터와 데이터 처리 로직을 담당하며, View는 UI를 구성하는 역할을 합니다. Knockout.js의 주요 특징은 다음과 같습니다.

Declarative bindings: 데이터와 UI 요소를 선언적으로 연결합니다.
Dependency tracking: 데이터 변경 시 자동으로 UI를 업데이트합니다.
Templating: 재사용 가능한 UI 템플릿을 제공합니다.

2. 데이터베이스와 연동하기

Knockout.js를 사용하여 데이터베이스와 연동하기 위해서는 다음과 같은 단계를 따를 수 있습니다.

2.1. 데이터 모델 정의

먼저 Knockout.js ViewModel에 해당하는 데이터 모델을 정의해야 합니다. 이 모델은 데이터베이스와 연결되는 부분입니다. 예를 들어, 아래와 같은 User 모델을 정의할 수 있습니다.

function User(id, name, email) {
  this.id = ko.observable(id);
  this.name = ko.observable(name);
  this.email = ko.observable(email);
}

2.2. 데이터 불러오기

데이터베이스로부터 데이터를 불러오기 위해 Ajax 요청을 사용할 수 있습니다. 예를 들어, 다음과 같은 메서드를 통해 서버로부터 User 데이터를 가져올 수 있습니다.

function getUsers() {
  return $.ajax({
    url: '/api/users',
    method: 'GET',
    dataType: 'json'
  });
}

2.3. 뷰모델에 데이터 바인딩

서버로부터 데이터를 성공적으로 불러왔다면, 해당 데이터를 ViewModel에 바인딩해야 합니다. 바인딩은 Knockout.js의 observableArray를 사용하여 처리할 수 있습니다.

function ViewModel() {
  var self = this;
  self.users = ko.observableArray([]);

  getUsers().then(function(data) {
    var mappedUsers = $.map(data, function(item) {
      return new User(item.id, item.name, item.email);
    });
    self.users(mappedUsers);
  });
}

ko.applyBindings(new ViewModel());

2.4. 데이터 변경하기

데이터 변경을 위해서는 서버로 데이터를 전송하고, 성공적으로 업데이트되었다는 응답을 받아야 합니다. 예를 들어, 사용자 정보를 업데이트하는 다음과 같은 메서드를 사용할 수 있습니다.

function updateUser(user) {
  return $.ajax({
    url: '/api/users/' + user.id(),
    method: 'PUT',
    data: {
      name: user.name(),
      email: user.email()
    }
  });
}

위와 같이 데이터베이스와 연동할 수 있습니다. Knockout.js를 사용하면 데이터베이스와의 연동이 쉬워지며, 데이터의 변경을 실시간으로 UI에 반영할 수 있습니다.