웹 구성 요소 구축 101 - 1부

9826 단어 javascriptfastdesignwebcomponentswebdev

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. ~ MDN



그것이 실제로 무엇을 의미하는지 명확히 합시다. 현재 React, Vue, Angular 등을 사용하는 등 재사용 가능한 구성 요소를 빌드하는 방법은 여러 가지가 있습니다. 그러나 구성 요소를 React로 빌드하면 일부 라이브러리가 있지만 Angular에서 작동하지 않습니다. 일하다. 그러나 기본적으로 React 구성 요소는 Angular에서 작동하지 않으며 그 반대도 마찬가지입니다. 웹 구성 요소는 이 문제를 해결합니다.

Web Component는 HTML 표준이므로 라이브러리 없이 브라우저에서 이해하거나 렌더링할 수 있습니다.

이를 더 잘 이해하기 위해 다음과 같은 표준 HTML 태그를 살펴보겠습니다.

<h1>Cool Title</h1>


렌더링할 라이브러리 및 프레임워크의 경우<h1> 개발자로서 스크립트를 로드할 필요가 없습니다. 우리는 라이브러리와 프레임워크가 단순히 페이지를 빌드하고 브라우저가 단순히 페이지를 렌더링하기를 기대합니다.

React에서는 아래와 같이 <h1> 태그를 사용할 수 있습니다.

import * as React from 'react';
import './style.css';

export default function App() {
  return <h1>Cool Title</h1>;
}


Angular에서는 아래와 같이 <h1> 태그를 사용할 수 있습니다.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Cool Title</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
  @Input() name: string;
}


그리고 브라우저는 HTML 표준<h1> 태그를 이해하기 때문에 이를 렌더링합니다.
<tebin-h1> , <fancy-h1> 태그 등과 같은 고유한 태그를 빌드하고...브라우저가 렌더링하는 대로 정확하게 렌더링하도록 지시할 수 있다면 어떨까요<h1> ?

웹 구성 요소를 사용하여 사용자 정의 태그 또는 요소를 빌드한 다음 브라우저에 이를 렌더링하도록 알릴 수 있습니다. 이러한 사용자 지정 태그를 웹 구성 요소라고 합니다.

웹 구성 요소는 재사용이 가능합니다. <h1> 태그를 재사용할 수 있는 것과 같은 방식으로 사용자 정의 웹 구성 요소도 브라우저에서 기본적으로 지원하기 때문에 재사용할 수 있습니다.

웹 구성 요소의 브라우저 호환성 및 다양한 기능 호환성을 찾을 수 있음here

웹 구성 요소는 기본적으로 브라우저에서 지원되므로 모든 라이브러리 및 프레임워크에서 직접 또는 구성과 함께 사용할 수 있습니다. https://custom-elements-everywhere.com/은 다양한 라이브러리 및 프레임워크에서 사용자 정의 요소 지원 상태를 확인할 수 있는 훌륭한 사이트입니다.

웹 구성 요소를 구축하는 방법



웹 구성 요소는 기본적으로 브라우저에서 지원되므로 기술적으로는 기본 HTML, JavaScript 및 CSS를 작성하여 맞춤형 웹 구성 요소를 구축할 수 있습니다. 아래는 index.html라는 이름의 사용자 정의 태그를 생성하는 전체<tebin-h1> 페이지입니다. 이 사용자 정의<h1> 태그는 기본적으로 갈색입니다.

<html lang="en">

<head>
    <title>Web Component 101 - Part 1</title>
</head>

<body>
    <h1>Quotes</h1>

    <tebin-h1>Albert Einstein</tebin-h1>
    <p>Life is like riding a bicycle. To keep your balance, you must keep moving.</p>

    <tebin-h1>Pablo Picasso</tebin-h1>
    <p>Everything you can imagine is real.</p>
</body>

<script>
    // Create a class for the element
    class CustomTebinH1 extends HTMLElement {
        constructor() {
            // Always call super first in constructor
            super();

            // Create a style tag
            const style = document.createElement('style');
            style.textContent = 'h1 {color: brown}';

            // Create an h1 tag
            const h1 = document.createElement('h1');
            h1.textContent = this.textContent;
            this.textContent = '';

            // Create a shadow root
            const shadow = this.attachShadow({ mode: 'open' });

            // Append it to the shadow root
            shadow.append(style, h1);
        }
    }

    // Define the new element
    customElements.define('tebin-h1', CustomTebinH1);
</script>

</html>


결과:



그것을 분해합시다.
  • 사용법: <tebin-h1></tebin-h1> 표준 HTML 요소를 사용하는 것과 같은 방식으로 사용자 정의 요소 또는 웹 구성 요소를 사용합니다.
  • 빌드: 두 단계가 있습니다:

    • 1단계: 사용자 지정 구성 요소 기능을 위한 JavaScript 클래스를 만듭니다.
    2단계: 브라우저가 맞춤 요소를 렌더링하는 방법을 이해할 수 있도록 맞춤 요소를 정의하거나 등록합니다. 이것은 customElements.define('tebin-h1', CustomTebinH1);를 사용하여 수행됩니다.

    분명히 이것은 매우 간단한 사용자 정의 요소입니다. 더 많은 기능을 추가하면 클래스가 더 복잡해집니다. 엔지니어로서 우리는 패턴을 정의하거나 모범 사례를 따라 소프트웨어를 구축하는 것을 좋아합니다. 여기에서 추상화 계층이 매우 유용해지고 많은 시간이 절약됩니다.

    개발 속도를 높이기 위해 추상화 및 좋은 패턴을 제공하는 훌륭한 라이브러리가 이미 있습니다. 이러한 라이브러리 중 일부는 FAST , Lit , Custom Element Builder 등입니다.

    향후 게시물에서는 FAST에 대해 자세히 살펴보고 사용자 지정 요소를 FASTer로 구축하는 데 어떻게 도움이 되는지 살펴보겠습니다.
    JavaScript의 OOP 초보자 가이드
    WSL2의 Docker Desktop에서 k8s hostPath 볼륨 사용

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage