Knockout.js는 자바스크립트 기반의 MVVM(Model-View-ViewModel) 프레임워크로, 동적이고 반응형인 웹 애플리케이션을 쉽게 개발할 수 있도록 도와줍니다. 이번 글에서는 Knockout.js를 이용하여 상품 카탈로그를 구현하는 방법에 대해 알아보겠습니다.

필요한 라이브러리 설치

먼저, 프로젝트에 Knockout.js를 설치해야 합니다. 다음 명령어를 사용하여 Knockout.js를 설치합니다.

npm install knockout

상품 데이터 모델 생성

상품 카탈로그를 구현하기 위해 먼저 상품 데이터 모델을 생성해야 합니다. 각 상품은 이름과 가격 등의 속성을 가지고 있습니다. 다음은 상품 데이터 모델의 예입니다.

function Product(name, price) {
    this.name = ko.observable(name);
    this.price = ko.observable(price);
}

상품 카탈로그 뷰모델 생성

상품 데이터 모델을 생성한 후에는 상품 카탈로그 뷰모델을 생성해야 합니다. 이 뷰모델은 상품 데이터를 관리하고, 상품 목록을 템플릿에 바인딩합니다. 다음은 상품 카탈로그 뷰모델의 예입니다.

function CatalogViewModel() {
    var self = this;
    
    self.products = ko.observableArray([]);
    
    // 상품 추가
    self.addProduct = function(name, price) {
        var product = new Product(name, price);
        self.products.push(product);
    };
    
    // 상품 삭제
    self.removeProduct = function(product) {
        self.products.remove(product);
    };
}

뷰 바인딩

뷰모델을 생성한 후에는 Knockout.js를 사용하여 뷰와 바인딩을 설정해야 합니다. 카탈로그의 템플릿에서 각 상품의 이름과 가격을 보여주기 위해 foreach 바인딩을 사용합니다. 또한, 상품을 추가하고 삭제하기 위한 버튼을 구현합니다. 다음은 상품 카탈로그의 예입니다.

<h1>상품 카탈로그</h1>

<ul data-bind="foreach: products">
    <li>
        <span data-bind="text: name"></span>
        <span data-bind="text: price"></span>
        <button data-bind="click: $parent.removeProduct">삭제</button>
    </li>
</ul>

<button data-bind="click: addProduct">상품 추가</button>

애플리케이션 실행

마지막으로, 애플리케이션을 실행하기 위해 Knockout.js를 초기화하고 뷰모델을 바인딩해야 합니다. 다음은 애플리케이션 실행 코드의 예입니다.

var viewModel = new CatalogViewModel();
ko.applyBindings(viewModel);

이제 상품 카탈로그를 구현하기 위한 Knockout.js의 기본적인 사용법에 대해 알아보았습니다. Knockout.js를 사용하면 웹 애플리케이션 개발이 간소화되고, 유지보수가 용이해집니다. 더 자세한 내용은 공식 Knockout.js 문서를 참고하시기 바랍니다.