웹 구성 요소 대 프레임 워크 구성 요소 : 차이점은 무엇입니까? – 스매싱 잡지

“구성 요소”가 종종 사용되어 프론트 엔드 프레임 워크 및 라이브러리와 관련된 프론트 엔드 개발에서“구성 요소”라는 단어에 대한 구별이 존재한다는 것은 놀라운 일입니다. 구성 요소는 특정 기능과 프리젠 테이션을 캡슐화하는 코드입니다. 프론트 엔드 애플리케이션의 구성 요소는 재사용 가능한 사용자 인터페이스 구축과 비슷한 기능이 있습니다. 그러나 그들의 구현은 다릅니다.

웹 – 또는 “프레임 워크-비회적” -구성 요소는 재사용 가능한 자체 유지 HTML 요소를 구축하기위한 표준 웹 기술입니다. 사용자 정의 요소, Shadow Dom 및 HTML 템플릿 요소로 구성됩니다. 반면에 프레임 워크 구성 요소는 재사용 가능한 UI가 생성 된 프레임 워크에 명시 적으로 조정됩니다. 모든 프레임 워크에서 사용할 수있는 웹 구성 요소와 달리 프레임 워크 구성 요소는 프레임 워크 외부에서 쓸모가 없습니다.

일부 비평가들은 웹 구성 요소의 불가지론 적 특성 심지어 구성 요소의 합의 된 특성을 준수하지 않기 때문에 실제 구성 요소가 아니라고 말할 수 있습니다. 이 기사는 웹 및 프레임 워크 구성 요소를 종합적으로 비교하고 웹 구성 요소의 불가지론에 관한 인수를 검토하며 웹 및 프레임 워크 구성 요소의 성능 측면을 고려합니다.

구성 요소는 무엇입니까?

코드 조각을 구성 요소라고 불리기 위해서는 몇 가지 기준이 충족 될 수 있지만 몇 가지만이 필수적입니다.

• 재사용 가능성,
• 소품 및 데이터 처리,
• 캡슐화.

재사용 성은 건조 (스스로 반복하지 말) 원칙을 강조하기 때문에 구성 요소의 주요 목적입니다. 구성 요소는 응용 프로그램의 다른 부분 또는 여러 응용 프로그램에서 재사용되도록 설계되어야합니다. 또한 구성 요소는 상위 구성 요소에서 데이터 (소품 형식으로)를 수락하고 선택적으로 콜백 또는 이벤트를 통해 데이터를 다시 전달할 수 있어야합니다. 구성 요소는 독립형 단위로 간주됩니다. 따라서 그들은 논리, 스타일 및 상태를 캡슐화해야합니다.

우리가 확실한 것이 있다면 프레임 워크 구성 요소는 이러한 기준을 잘 포착하지만 웹 구성 요소는 어떻습니까?

웹 구성 요소 이해

웹 구성 요소는 개발자가 특정 기능을 제공하는 사용자 정의, 재사용 가능한 HTML 태그를 생성 할 수있는 웹 API 세트입니다. 기존 웹 표준을 기반으로 개발자는 새로운 요소, 사용자 정의 동작 및 캡슐화 된 스타일로 HTML을 확장 할 수 있습니다.

웹 구성 요소는 세 가지 웹 사양을 기반으로 구축됩니다.

• 사용자 정의 요소,
• 그림자 돔,
• HTML 템플릿.

각 사양은 독립적으로 존재할 수 있지만 결합하면 웹 구성 요소를 생성합니다.

맞춤 요소

사용자 정의 요소 API는 재사용 할 수있는 새로운 유형의 DOM 요소를 정의하고 사용하는 데 제공됩니다.

// Define a Custom Element
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      
Hello from MyCustomElement!
    `;
  }
}

// Register the Custom Element
customElements.define('my-custom-element', MyCustomElement);

그림자 돔

Shadow Dom은 웹 구성 요소의 개념 이전 이후 이후에있었습니다. 브라우저는 일반 DOM 노드가 아닌 기본 브라우저 컨트롤을 위해 수년간 비표준 버전을 사용했습니다. 그것은 JavaScript 및 CSS가 진행하는 한 일반적인 Light DOM 요소보다 적어도 도달 할 수있는 DOM의 일부입니다. 이러한 것들은 독립형 요소로 더 캡슐화됩니다.

// Create a Custom Element with Shadow DOM
class MyShadowElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      
      
Content in Shadow DOM
    `;
  }
}

// Register the Custom Element
customElements.define('my-shadow-element', MyShadowElement);

HTML 템플릿

HTML Templates API를 통해 개발자는 앱 시작시로드되지 않았지만 JavaScript를 사용하여 런타임에 호출 할 수있는 마크 업 템플릿을 작성할 수 있습니다. HTML 템플릿은 웹 구성 요소에서 사용자 정의 요소의 구조를 정의합니다.

// my-component.js
export class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      
      
Hello from ES Module!
    `;
  }
}

// Register the Custom Element
customElements.define('my-component', MyComponent);

웹 구성 요소는 종종 특정 JavaScript 프레임 워크 또는 라이브러리에 연결되기보다는 기본 브라우저 API에 의존하기 때문에 프레임 워크 공유로 설명됩니다. 이것은 웹 구성 요소를 사용할 수 있음을 의미합니다 어느 웹 응용 프로그램은 React, Angular, Vue 또는 Vanilla JavaScript로 제작되었는지 여부에 관계없이. 그들의 추정 프레임 워크에 대한 성격으로 인해, 그들은 만들 수 있고 현대적인 프론트 엔드 프레임 워크에 통합됩니다 그리고 여전히 수정이 거의 또는 전혀없는 기능. 그러나 그들은 실제로 프레임 워크에 대한 비판적입니까?

웹 구성 요소에서 프레임 워크 공수의 현실

프레임 워크 공수성 이 경우 자급 자족 소프트웨어 (이 경우 요소)를 설명하는 용어는 최소 또는 수정이 최소화되거나 예상대로 효율적으로 작동하는 프레임 워크에 통합 될 수 있습니다.

웹 구성 요소는 모든 프레임 워크에 통합 될 수 있지만 최소부터 복잡한 것까지, 특히 변경할 수있는 변경 사항이 없습니다. 스타일 및 HTML 배열. 통합 중에 웹 구성 요소가 경험할 수있는 또 다른 변경 사항에는 포함됩니다 전체 브라우저 지원을위한 추가 구성 또는 폴리 필. 이 단점은 일부 개발자가 웹 구성 요소를 프레임 워크 공유로 간주하지 않는 이유입니다. 그럼에도 불구하고 이러한 구성 및 편집 외에도 웹 구성 요소는 React, Angular 및 Vue를 포함하되 이에 국한되지 않는 프론트 엔드 프레임 워크에 쉽게 맞출 수 있습니다.

프레임 워크 구성 요소 : 강점 및 제한

프레임 워크 구성 요소는 프레임 워크 별 재사용 가능한 코드입니다. 그것들은 그들이 구축 된 프레임 워크의 빌딩 블록으로 간주되며 다음을 포함하여 웹 구성 요소보다 몇 가지 이점을 보유합니다.

• 확립 된 생태계와 지역 사회 지원,
• 개발자 친화적 인 통합 및 도구,
• 포괄적 인 문서 및 리소스,
• 핵심 기능,
• 테스트 된 코드,
• 빠른 개발,
• 크로스 브라우저 지원 및
• 성능 최적화.

일반적으로 사용되는 프론트 엔드 프레임 워크 요소의 예로는 React 구성 요소, VUE 구성 요소 및 각도 지침이 있습니다. REACT는 가상 DOM 및 단방향 데이터 바인딩을 지원하여 효율적인 업데이트 및 구성 요소 기반 모델을 허용합니다. Vue는 유연하고 배우기 쉬운 구성 요소 시스템을 갖춘 가벼운 프레임 워크입니다. Angular는 React와 달리 TypeScript 초점을 가진 양방향 데이터 바인딩 구성 요소 모델을 제공합니다. 다른 프론트 엔드 프레임 워크 구성 요소에는 Svelte 구성 요소, SolidJS 구성 요소 등이 있습니다.

프레임 워크 계층 구성 요소는 React, Vue 또는 Angular와 같은 특정 JavaScript 프레임 워크에서 작동하도록 설계되었으므로 프레임 워크 아키텍처, API 및 규칙 위에 거의 상주합니다. 예를 들어, React 구성 요소는 React의 JSX 및 상태 관리를 사용하는 반면 각도 구성 요소는 각도 템플릿 구문 및 종속성 주입을 활용합니다. 혜택에 관한 한, 개발자 경험 성능이 뛰어나지 만 단점에 관한 한 프레임 워크 외부에서 유연하거나 재사용 할 수 없습니다.

또한, 알려진 상태 공급 업체 잠금 개발자가 일부 프레임 워크 나 라이브러리에 의존하여 다른 프레임 워크로 전환 할 수 없을 때 만들어집니다. 프레임 워크 구성 요소는 프레임 워크 환경에서만 작동하도록 개발 되었기 때문에 가능합니다.

비교 분석

프레임 워크와 웹 구성 요소는 각각의 강점과 약점을 가지며 다른 시나리오에 적합합니다. 그러나 몇 가지 기준에 기초한 비교 분석은 둘 다의 구별을 추론하는 데 도움이 될 수 있습니다.

캡슐화 및 스타일링 : 스코어 대 VS. 외딴

캡슐화는 구성 요소의 상표이지만 웹 구성 요소 및 프레임 워크 구성 요소는 다르게 처리합니다. 웹 구성 요소는 Shadow Dom과 분리 된 캡슐화를 제공하여 외부 조작으로 구성된 구성 요소의 스타일과 구조를 보호하는 별도의 DOM 트리를 만듭니다. 이는 웹 구성 요소가 사용되는 곳마다 동일하게 보이고 행동 할 수 있도록합니다.

그러나 외부 CSS는 명시적인 해결 방법 (예 : CSS 사용자 정의 속성)없이 Shadow Dom을 교차 할 수 없기 때문에이 격리로 인해 스타일을 사용자 정의 해야하는 개발자에게는 어려움을 겪을 수 있습니다. 스코핑 스타일링은 클래스 이름, CSS-in-JS 또는 모듈 시스템을 사용하여 CSS를 구성 요소로 제한하는 대부분의 프레임 워크에서 사용됩니다. 이 스타일은 바깥쪽으로 누출되는 것을 설득하지만 갈등의 가능성에 따라 외부 스타일이 유출되는 것을 완전히 막지는 않습니다. Vue 및 Svelte와 같은 라이브러리는 기본적으로 Scoped CSS를 지원하는 반면 React는 종종 스타일의 경쟁자와 같은 라이브러리로 돌아갑니다.

재사용 성과 상호 운용성

웹 구성 요소는 여러 프레임 워크 또는 바닐라 JavaScript 응용 프로그램에 유용한 재사용 가능한 구성 요소에 더 좋습니다. 또한 스타일과 행동의 캡슐화 및 격리가 엄격해야하거나 다른 라이브러리에 너무 의존하지 않고 기본 브라우저 API를 활용하려는 경우 유용합니다.

그러나 프레임 워크 구성 요소는 프레임 워크 (예 : React Reconciliation Algorithm, Angular Change Detection)에서 제공하는 일부 기능 및 최적화를 활용하거나 이용 가능한 성숙한 생태계 및 도구를 활용해야 할 때 도움이됩니다. 팀이 이미 프레임 워크 및 컨벤션에 익숙하다면 프레임 워크 구성 요소를 사용할 수 있습니다. 개발 프로세스가 더 쉬워지기 때문입니다.

성능 고려 사항

웹 대 프레임 워크 구성 요소를 결정하는 데있어 또 다른 중요한 요소는 성능입니다. 둘 다 극도로 성능을 발휘할 수 있지만, 하나는 다른 것보다 빠른 사례가 있습니다.

웹 구성 요소의 경우 기본 브라우저에서 구현하면 최적화 된 렌더링 및 오버 헤드가 줄어들 수 있지만 오래된 브라우저는 폴리 필이 필요할 수 있습니다. React and Angular는 고유 한 동적 애플리케이션에서 성능을 향상시키는 특정 최적화 (예 : Virtual DOM, Change Detection)를 제공하지만 프레임 워크 런타임 및 추가 라이브러리로 인해 오버 헤드를 추가합니다.

개발자 경험

개발자 경험은 웹 구성 요소 대 프레임 워크 구성 요소와 관련된 또 다른 근본적인 고려 사항입니다. 사용 편의성 및 학습 곡선은 개발 시간과 관리 가능성을 결정하는 데 큰 역할을 할 수 있습니다. 툴링 및 커뮤니티 지원의 가용성은 개발자 경험에도 영향을 줄 수 있습니다.

웹 구성 요소는 기본 브라우저 API를 사용하므로 HTML, CSS 및 JavaScript를 알고 있지만 개발자에게 편안합니다. 가파른 학습 곡선 섀도우 돔, 사용자 정의 요소 및 학습 곡선이 부착 된 템플릿과 같은 추가 개념으로 인해. 또한 웹 구성 요소가 있습니다 더 작은 커뮤니티 그리고 커뮤니티 문서가 적습니다 React, Angular 및 Vue와 같은 유명한 프레임 워크와 비교합니다.

나란히 비교

요약하면, 웹 구성 요소와 프레임 워크 구성 요소 사이의 선택은 프로젝트 또는 팀의 특정 요구에 따라 다릅니다. 여기에는 크로스 프레임 워크 재사용 성, 성능 및 개발자 경험이 포함될 수 있습니다.

결론

웹 구성 요소입니다 불가지론, 상호 운용성 및 재사용 가능한 구성 요소에 대한 새로운 표준. 프레임 워크 구성 요소 표준을 충족시키기 위해 기본 기술 측면에서 추가 업그레이드 및 수정이 필요하지만 “구성 요소”라는 제목을받을 자격이 있습니다. 자세한 비교 분석을 통해 웹 구성 요소 및 프레임 워크 구성 요소의 강점과 약점을 탐색하여 차이점에 대한 통찰력을 얻었습니다. 그 과정에서 우리는 또한 웹 구성 요소를 그 접근 방식에 관심이있는 사람들을 위해 프론트 엔드 프레임 워크에 통합하기위한 유용한 해결 방법을 발견했습니다.

참조

(GG, YK)