[javascript] Knockout.js와 함께 사용할 수 있는 디자인 패턴

04 Dec 2023

javascript

개요

Knockout.js는 JavaScript로 작성된 MVVM(Model-View-ViewModel) 프레임워크로, 웹 애플리케이션의 동적인 부분을 쉽게 처리할 수 있게 해줍니다. 이러한 기능을 보다 효율적으로 활용하기 위해서는 적절한 디자인 패턴을 구현하는 것이 중요합니다. 이번 글에서는 Knockout.js와 함께 사용할 수 있는 몇 가지 유용한 디자인 패턴에 대해 살펴보겠습니다.

1. 관찰자 패턴 (Observer Pattern)

관찰자 패턴은 Knockout.js에서 자주 사용되는 디자인 패턴 중 하나입니다. 이 패턴은 한 객체의 상태 변화가 다른 객체들에게 알려져 상호 작용할 수 있게 만들어줍니다. Knockout.js에서는 observable이라는 함수를 사용하여 관찰자 패턴을 구현할 수 있습니다.

var viewModel = {
  name: ko.observable('John'),
  age: ko.observable(25)
};

// 관찰자 등록
viewModel.name.subscribe(function(newValue) {
  console.log("이름이 변경되었습니다: " + newValue);
});

위 예제에서 name이라는 observable 값이 변경될 때마다 등록한 함수가 호출되어 “이름이 변경되었습니다:” 와 함께 변경된 값을 출력합니다.

2. 컴퓨티드 옵저버 (Computed Observer)

컴퓨티드 옵저버는 Knockout.js에서 매우 유용한 디자인 패턴입니다. 이 패턴은 계산된 속성을 구현할 때 사용되며, 다른 속성의 값에 의존하여 자동으로 갱신됩니다. 이를 통해 복잡한 계산 로직을 간단하게 구현할 수 있습니다.

var viewModel = {
  firstName: ko.observable('John'),
  lastName: ko.observable('Doe'),
  
  // 계산된 속성
  fullName: ko.computed(function() {
    return this.firstName() + ' ' + this.lastName();
  }, this)
};

console.log(viewModel.fullName()); // "John Doe"

위 예제에서 fullName은 firstName과 lastName에 의존해 자동으로 갱신되는 계산된 속성입니다. 값을 출력하면 “John Doe”가 출력됩니다.

3. 커스텀 바인딩 (Custom Binding)

Knockout.js는 기본적으로 제공하는 바인딩 외에도 개발자가 필요한 바인딩을 직접 작성할 수 있는 기능을 제공합니다. 이러한 커스텀 바인딩은 UI 요소와 ViewModel을 연결하는 데 유용하며, 재사용 가능한 코드 작성에도 도움이 됩니다. 아래는 커스텀 바인딩을 사용한 예제입니다.

ko.bindingHandlers.fadeVisible = {
  init: function(element, valueAccessor) {
    var value = ko.unwrap(valueAccessor());
    // 초기 상태 설정
    $(element).toggle(value);
  },
  update: function(element, valueAccessor) {
    var value = ko.unwrap(valueAccessor());
    // 상태 업데이트
    value ? $(element).fadeIn() : $(element).fadeOut();
  }
};

// 사용 예제
var viewModel = {
  showElement: ko.observable(true)
};

위 예제에서 fadeVisible이라는 커스텀 바인딩을 정의하고, showElement라는 observable 값에 따라 해당 요소를 페이드 인/아웃합니다.

결론

Knockout.js는 강력한 기능을 제공하는 간단하고 가벼운 MVVM 프레임워크입니다. 이를 제대로 활용하기 위해 관찰자 패턴과 컴퓨티드 옵저버 패턴과 같은 디자인 패턴을 잘 활용하는 것이 중요합니다. 또한 필요에 따라 커스텀 바인딩을 작성하여 유연하고 재사용 가능한 코드를 작성할 수 있습니다. Knockout.js 공식 문서[1]를 참고하여 더 많은 디자인 패턴을 익히시기 바랍니다.

참고 자료

[1] Knockout.js Documentation: https://knockoutjs.com/documentation/