📚 KnockoutJS

---

📕 KnockoutJS 소개

등장배경

• Model-View 결합 문제 : Controller가 결국 둘을 강하게 결합시켰다.
• Controller의 복잡성 : 시스템 전반의 의존성과 결합도를 높여 유지보수와 확장이 어렵다.

→ 직접 DOM을 조작하는 대신 Template에 ViewModel을 전달하는 방식을 채택하게 되었다.

---

📗 MVVM 아키텍쳐

MVVM 아키텍쳐의 정의

• ViewModel을 템플릿을 통해 선언적으로 작성하면 Model과 View의 상호작용을 자동으로 처리한다.
• Model을 업데이트하고, View를 바인딩하는 데에 스크립트를 작성하는 것이 아니라 템플릿을 생성한다.

선언적 데이터 바인딩

• 자주쓰는 Controller를 만들어두고 JS가 아닌 HTML에 작성해서 사용하는 것을 말한다.

MVVM 패턴이란? (Model-View-ViewModel)

• 데이터와 화면을 분리하고,
• 데이터와 화면이 상호작용하는 방식을 미리 만들어두고,
• 선언적인 상호작용 모델(View Model)을 작성하여 자동으로 렌더링 되도록 하는 방식이다.

MVVM 패턴 개발 방식

• 보여질 화면을 템플릿으로 작성한다.
• 화면의 변동이 있는 곳에 데이터 바인딩 을 걸어둔다. (data-bind와 지시어 작성)
  • 변경 감지가 가능한 모델을 만들어 연결한다.
  • DOM의 변경 방식 알려준다.
  • 모델 변경 시 자동으로 HTML이 변경된다.
• 이벤트를 연동한다. (이벤트 핸들러 작성)
  • 사용자 이벤트에 따라 데이터가 변경된다.
  • 변경된 데이터에 따라 자동으로 화면이 변경된다.

---

📘 knockoutJS 핵심 개념

Observable (Model)

• 이벤트에 따라 모델의 변화에 따른 지속적인 업데이트가 필요하다.
• 모델의 값이 변경될 때마다 전달하는 함수를 만들어 사용한다.

Templating (View)

• 모델 데이터의 기능으로 정교하고 중첩된 UI를 빠르게 생성한다.

Declarative Binding (View-Model)

• 선언적 바인딩을 사용한다.
• 간결하고 읽기 쉬운 구문을 사용하여 DOM 요소를 모델 데이터와 쉽게 연결한다.

Automatic UI Refresh

• 데이터 모델의 상태가 변경되면 UI가 자동으로 업데이트 된다.

Dependency Tracking

• 모델 데이터 간의 관계 체인을 암시적으로 설정하여 변환 및 결합한다.

---

📙 KnockoutJS 의의

현재 프레임워크에 끼친 영향

• Vue,React 등의 프레임워크들은 MVVM 기반이다.
• knockout.js는 MVVM 패러다임의 초창기 모델이다.
• Observable은 현재 Signal이라고 불리는 개념으로 진화하게 된다.

knockoutjs의 장점

• MVVM 템플릿과 데이터 바인딩을 통한 선언적 개발 방식을 확립했다.
• DOM API를 사용하지 않고서 웹 개발이 가능하다.
• 웹 애플리케이션의 구조화 및 유지보수 용이성 향상에 기여한다.

---