데이터 모델 및 웹 구성요소

오늘 저는 여러분을 표면 너머로 데려가서 종종 눈에 띄지 않는 사실, 즉 웹 구성 요소가 데이터를 처리하는 방법에 대해 조명하고 싶습니다. 이 주제가 왜 그렇게 관심을 끌지 못하는 걸까요? 아마도 공식 사양이 이러한 잠재력을 강조하지 않기 때문일 것입니다. 하지만 일단 탐색을 시작하면 얼마나 많은 부분이 간과되고 있는지 깨닫게 될 것입니다.

천천히 시작해서 좀 지루했다면 미리 사과드립니다. 현재 작업에 꼭 필요합니다.

웹 구성 요소에 데이터가 필요한 이유는 무엇입니까?

웹 구성 요소는 시스템의 다른 부분과 독립적으로 작동할 수 있는 독립형 요소로 설계되었습니다. 이러한 자율성은 애플리케이션의 다양한 영역으로의 통합을 단순화하고 다양한 프로젝트에서 쉽게 재사용할 수 있게 해줍니다. 이러한 독립성의 핵심은 캡슐화입니다. 이는 구성 요소의 모양뿐만 아니라 내부 동작도 숨깁니다. 이 동작은 구성요소가 데이터를 관리하고 사용하는 방식과 밀접하게 연관되어 있습니다.

예를 들어 기본 산술 연산을 수행하도록 설계된 계산기 구성 요소를 생각해 보세요. 이 구성요소는 현재 결과 표시, 이전 결과 저장, 계산 수행과 같은 동작을 관리합니다. 이를 위해 현재 결과, 이전 결과 등의 데이터와 입력값 제한 등의 설정을 유지합니다.

웹 구성 요소가 사용하는 데이터는 "로컬 상태"라고 설명할 수 있습니다. 이 로컬 상태는 구성 요소 작동에 대한 필수 정보를 저장합니다. 여기에는 임시 데이터, 중간 계산 결과 또는 구성 요소 내에서 특정 작업을 수행하는 데 필요한 기타 값이 포함될 수 있습니다.

먼저 구성 요소 속성이 기본 데이터를 저장하는 방법에 대한 간단한 예를 살펴보겠습니다.

이 예의 데이터는 종종 "멍청한" 데이터 모델이라고도 합니다. 주요 목적은 복잡한 논리를 포함하지 않고 단순히 정보를 저장하는 것입니다. 단순함에도 불구하고 구성 요소 작동에 필요한 데이터가 내부에 저장되어 전역 변수를 사용하지 않기 때문에 한 단계 더 발전했습니다.

구성 요소 내부에 데이터를 보관함으로써 데이터가 외부 시스템과 격리되도록 보장합니다. 즉, 구성 요소가 독립적으로 작동할 수 있습니다. 또한 데이터 캡슐화를 강조하기 위해 속성 이름 앞에 밑줄을 붙입니다. 이 규칙은 해당 속성이 내부 전용이며 외부에서 액세스해서는 안 된다는 것을 나타냅니다.

그렇다면 구성 요소 내부에서 이 "멍청한" 모델을 사용하면 또 무엇을 얻을 수 있을까요? 유용한 기능 중 하나는 캐싱입니다. 구성 요소 내에 데이터를 저장함으로써 불필요한 재계산, 중복 네트워크 요청 또는 기타 리소스를 많이 사용하는 작업을 피할 수 있습니다. 이 예에서는 이전 계산 결과를 저장하면 실행 취소 기능을 구현할 수 있어 성능과 사용자 경험이 향상됩니다.

두꺼운 모델

'멍청한' 데이터 모델이 모든 경우에 적용되는 보편적인 솔루션인가요? 간단한 구성 요소로 작업할 때는 실제로 충분할 수 있습니다. 이 모델은 구현하기 쉽고 기본 데이터 저장 및 처리 작업을 잘 처리합니다. 그러나 구성 요소의 논리가 더욱 복잡해짐에 따라 "멍청한" 모델을 유지하는 것이 점점 더 어려워지고 있습니다. 구성 요소에 수정 및 분석을 비롯한 여러 데이터 작업이 포함되는 경우 이 논리를 별도의 클래스로 분리하여 구조를 단순화하는 것이 합리적입니다. 그러한 접근 방식 중 하나는 "두꺼운" 데이터 모델을 사용하여 모든 데이터 관련 프로세스를 구성 요소 자체에서 분리하는 것입니다.

예를 들어보겠습니다. "두꺼운" 모델은 데이터를 저장하고 이를 수정하기 위한 메서드를 제공하는 별도의 클래스로 표현될 수 있습니다. 이 모델 내에서는 결과와 이전 값을 저장할 수 있을 뿐만 아니라 계산 전에 이전 결과를 자동으로 저장하는 등의 보조 논리도 추가할 수 있습니다. 이렇게 하면 구성 요소가 크게 단순화되어 데이터를 직접 관리할 필요가 없습니다.

class SimpleCalculator extends HTMLElement {

  constructor() {
    super();
    this._data = {
      result: 0,
      previous_result: 0
    };
    …
  }
  undo(){
    this._data.result = this.data.previous_result;
  }
  add(value) {
    this._data.previous_result = this.data.result;
    this._data.result += value;
  }
  …
  displayResult() {
    this.innerHTML = `<p>The result is: ${this._data.result}</p>`;
  }
  …
}

Thick 모델을 사용하면 구성 요소 내에 데이터를 캡슐화할 뿐만 아니라 구성 요소 자체에서 일부 동작을 숨길 수도 있습니다. 이제 구성 요소는 데이터 구조와 데이터 설정, 수정 및 검색 방법에 대한 세부 정보를 모두 인식하지 못합니다. 자체 동작이 단순화되었습니다.

두꺼운 모델이 도입되면서 컴포넌트가 컨트롤러 역할을 맡게 되었습니다. 모델을 관리하지만 내부 작동 방식을 알 필요는 없습니다. 결과적으로 구성요소는 더 이상 데이터 구조나 이를 처리하는 데 사용되는 방법에 의존하지 않습니다. 알아야 할 것은 모델의 인터페이스, 즉 모델이 제공하는 메서드 세트뿐입니다. 이 접근 방식을 사용하면 한 모델을 다른 모델로 쉽게 교체할 수 있습니다.

게다가 두꺼운 모델은 재사용이 가능해졌습니다. 이제 유사한 데이터로 작동한다면 하나의 구성 요소뿐만 아니라 다른 구성 요소에서도 사용할 수 있습니다.

더 큰 유연성을 위해 어댑터 패턴을 사용할 수 있습니다. 이 패턴은 처음에 인터페이스가 다르더라도 구성 요소와 모델 간의 호환성을 보장합니다. 예를 들어 구성 요소에 추가 논리가 있는 모델이 필요한 경우 공통 인터페이스를 유지하면서 이 논리를 추가하는 어댑터를 만들 수 있습니다.

class SimpleCalculator extends HTMLElement {

  constructor() {
    super();
    this._data = {
      result: 0,
      previous_result: 0
    };
    …
  }
  undo(){
    this._data.result = this.data.previous_result;
  }
  add(value) {
    this._data.previous_result = this.data.result;
    this._data.result += value;
  }
  …
  displayResult() {
    this.innerHTML = `<p>The result is: ${this._data.result}</p>`;
  }
  …
}

이제 동일한 모델에서 다른 구성 요소를 작동하려면 이 어댑터만 적용하면 됩니다. 다른 모델을 사용해야 하는 경우 생성 방법을 재정의하거나 다른 어댑터를 연결할 수 있습니다. 이렇게 하면 구성 요소가 변경되지 않은 상태로 유지되고 해당 동작은 연결된 모델에 의해 제어됩니다.

따라서 로직을 두꺼운 데이터 모델로 분리하면 몇 가지 중요한 목표를 달성할 수 있습니다. 첫째, 구성요소를 더 가볍고 이해하기 쉽게 만들어 관리 작업만 남겨둔다. 둘째, 모델은 시스템 내에서 독립적이고 재사용 가능한 요소가 됩니다. 셋째, 어댑터와 같은 패턴을 사용하면 유연성과 확장성이 보장되어 데이터 처리 논리가 변화하는 요구 사항에 적응할 수 있습니다. 단순한 경우에는 과잉으로 보일 수 있지만 향후 더욱 복잡하고 안정적인 아키텍처를 구축하기 위한 기반을 마련합니다.

SSOT의 분해

구성 요소 구성 및 상호 작용 측면에서 더욱 발전할 수 있는 가능성을 살펴보겠습니다. 이전에는 요소의 자율성이 애플리케이션의 여러 부분으로의 통합을 단순화하고 다른 프로젝트에서 재사용하기에 적합하게 만드는 방법에 대해 논의했습니다. 그러나 구성요소의 자율성은 또 다른 흥미로운 기회를 열어줍니다. 즉, 글로벌 SSOT(Single Source of Truth)를 분해하고 이를 개별 구성요소로 부분적으로 이동할 수 있습니다. 즉, 시스템에 하나의 글로벌 SSOT를 두는 대신 로직과 데이터의 일부를 캡슐화하는 로컬 SSOT로 작업할 수 있습니다.

글로벌 정보 소스를 로컬 소스로 분할하면 시각적 측면에서 자율적일 뿐만 아니라 작업을 수행하는 데 필요한 자체 로컬 논리를 갖는 구성 요소를 만들 수 있다는 아이디어입니다. 이러한 구성 요소는 단순한 시각적 요소가 아니라 자체 데이터와 동작을 관리하는 독립적인 미니 시스템이 됩니다. 이는 애플리케이션의 나머지 부분과의 독립성을 크게 높여 안정성을 향상시키고 시스템 발전을 단순화합니다.

게다가 구성 요소에 관해 이야기할 때 버튼, 표, 차트와 같은 작은 UI 요소에만 국한되지 않습니다. 구성 요소는 여러 가지 기능을 결합한 설정 패널, 등록 또는 데이터 입력 양식, 여러 대화형 차트가 있는 섹션 등 더 복잡하고 큰 응용 프로그램 요소를 참조할 수 있습니다. 이러한 각 구성 요소에는 해당 특정 요소 내에서만 상태와 논리를 관리하는 고유한 로컬 소스가 있을 수 있습니다.

SSOT를 로컬 부분으로 분해하면 애플리케이션 상태 관리가 단순화됩니다. 예를 들어, 모든 양식 요소에 대해 전역 소스를 사용하는 대신 양식 내에 상태를 캡슐화하여 애플리케이션의 다른 부분으로부터 독립성을 보장할 수 있습니다. 이는 개발의 복잡성을 줄일 뿐만 아니라 시스템을 더욱 유연하게 만들어 글로벌 로직을 변경할 필요 없이 구성 요소를 교체하거나 수정할 수 있게 해줍니다.

아키텍처 설계에 대한 이러한 접근 방식은 글로벌 로직이 과부하될 수 있고 그 중 한 부분을 변경하면 전체 시스템에 계단식 영향을 미칠 수 있는 대규모 애플리케이션에 특히 유용합니다. 로컬 정보 소스는 격리된 책임 영역을 만들어 유지 관리를 단순화하고 코드 가독성을 향상시켜 이러한 위험을 최소화하는 데 도움이 됩니다.

결론

자체 데이터를 저장하는 웹 구성 요소의 기능을 통해 우리는 이를 단순한 인터페이스의 시각적 요소 이상으로 볼 수 있습니다. 이제 데이터, 로직 및 프리젠테이션을 통합하는 독립형 모듈로 간주할 수 있습니다. 이 접근 방식은 구성 요소를 애플리케이션 아키텍처 구축을 위한 효과적인 도구로 만듭니다. 복잡한 동작을 캡슐화하고 내부 상태를 관리하며 더 높은 수준에서 시스템의 다른 요소와의 상호 작용을 구성할 수 있습니다. 이는 웹 구성 요소를 유연하고 확장 가능한 애플리케이션을 만들기 위한 다목적 도구로 변환합니다.

여기에 설명된 접근 방식을 더욱 발전시키고 인터페이스 생성과 관련된 자체 작업을 크게 단순화하기 위해 구성 요소 간 데이터 관리 및 데이터 전송을 기반으로 하는 KoiCom 라이브러리를 개발했습니다.

KoiCom 문서
코이콤 깃허브

궁극적으로 이러한 솔루션이 개발자가 인터페이스 디자인에 대한 보다 현대적인 접근 방식을 채택하여 애플리케이션을 더욱 확장 가능하고 유지 관리하기 쉽게 만드는 데 도움이 되기를 바랍니다.

위 내용은 데이터 모델 및 웹 구성요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!