소개

만약 당신이 이 글을 읽고 있다면, 웹 구성 요소에 대한 내용을 최소한 들어 본 적이 있을 것입니다. 이것은 웹 표준입니다. 이것은 우리가 자신의 재사용 가능한 UI 구성 요소를 만들 수 있도록 합니다. 이 구성 요소들은 any kind of web application 에서 사용할 수 있고, 모든 현대 브라우저에서 기본으로 지원됩니다.


폴리머 항목

9년의 노력 끝에 우리는 마침내 해냈다.각 기본 브라우저는 네트워크 구성 요소를 지원합니다.
2020년 1월 15일 오후 22:46
986
2573
웹 개발 환경이 놀랍지만 무서운 점이 있다면 API가 있는 곳에는 대량의 추상적인'간소화'가 있기 때문이다.™".
물론, 웹 구성 요소도 예외가 아니다. 지난번에 내가 검사했을 때, 나는 약 20개의 다른 라이브러리를 찾을 수 있었는데, 그것들은 어떤 추상적인 것을 제공하여 웹 구성 요소를 만드는 데 도움을 주었다.
따라서 웹 구성 요소를 구축하려는 모든 사람들에게 어디서부터 시작해야 할지 알고 싶어하는 것은 상당히 어려운 일이다. 이것이 바로 내가 여기에 있는 이유다.
이 시리즈에서 (네, 시리즈입니다!),다음 사항을 소개합니다.

웹 구성 요소 표준의 기초: 본고에서 이러한 내용을 소개하겠습니다.😉

서로 다른 라이브러리가 웹 구성 요소를 만들 때 효율을 높이는 데 도움을 주는 방법 유형: 저는 단독 글에서 각 유형을 소개하고 각 유형에 따라 찾을 수 있는 대부분의 라이브러리

를 간략하게 소개할 것입니다
이 자체가 하나의 강좌가 아니라는 것을 명심하십시오. 저는 모든 라이브러리로 웹 구성 요소를 구축하는 방법을 설명하지 않을 것입니다. 이것은 모든 라이브러리의 문서의 취지라고 믿습니다.
본고의 주요 목적은 웹 구성 요소를 막 사용하기 시작한 개발자들이 편안한 웹 구성 요소를 구축하는 방법을 찾도록 돕는 것이다.😊
Polymer Project의 한 구성원의 말을 인용하여 웹 구성 요소 표준을 추진하는 데 큰 기여를 했다.

[...] the big idea with web components is that it shouldn't matter which or even if an approach (to create Web Components) becomes more popular. As long as components interoperate we all win.

그럼 소개를 멈추고 재미있는 것부터 시작합시다.

웹 구성 요소를 만드는 데 실제로 필요한 것은 무엇입니까?

많은 다른 글에서 언급한 내용을 반복하지 않기 위해서 웹 구성 요소를 구성하는 모든 기준을 설명하지는 않겠지만, 알림이 필요하다면 MDN article 를 확인해 보시기 바랍니다.
이제 이 기준들이 무엇이 멋있는지는 알겠지만, 일반적인 웹 구성 요소는 실제로 어떤 모습일까?
다음은 간단한 Hello World 구성 요소의 예시 코드입니다. 모든 내용을 완전히 이해하지 못하면 걱정하지 마십시오. 잠시 후에 상세하게 소개하겠습니다.😉

const template = document.createElement("template");
template.innerHTML = `<div>Hello <span class="name"></span></div>`;

class MyGreeting extends HTMLElement {
  constructor() {
    super();
    this.name = "World";
  }

  // Start - Standard Lifecycle Callbacks
  // This gets triggered when the component first is appended to the document
  connectedCallback() {
    if (!this.shadowRoot) {
      this.attachShadow({ mode: "open" });
      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
    this._nameSpan = this.shadowRoot.querySelector(".name");
    this._nameSpan.textContent = this.name;
  }
  // This defines which attributes will trigger a callback when they get set on the component
  static get observedAttributes() {
    return ["name"];
  }
  // This callback will get triggered when one of the observedAttributes gets changed
  attributeChangedCallback(attr, oldVal, newVal) {
    if (oldVal !== newVal) {
      this[attr] = newVal;
    }
  }

  // End - Standard Lifecycle Callbacks

  set name(value) {
    this.safeSetAttribute("name", value);
    if (this._nameSpan) {
      this._nameSpan.textContent = value;
    }
  }

  get name() {
    return this.getAttribute("name");
  }

  // a helper function to prevent an endless loop on attribute assignment
  safeSetAttribute(attr, value) {
    if (this.getAttribute(attr) !== value) {
      this.setAttribute(attr, value);
    }
  }
}

window.customElements.define("my-greeting", MyGreeting);

이 간단한 코드에서는 실행 중인 모든 웹 구성 요소 표준을 볼 수 있습니다.

구성 요소에 사용할 <template> 을 만들었습니다.

본 컴퓨터HTMLElement 클래스를 확장하는 클래스를 만들었습니다. 이 클래스는 창 수준CustomElementRegistry에 등록됩니다.이것은 모든 나타나는 <my-greeting> 표시를 우리의 클래스로 사용하여 무엇을 보여야 하는지 알게 할 것이다.

저희 클래스는 사용자 정의 요소의 생명주기 리셋을 포함하고 있습니다. 이 리셋은 구성 요소를 언제 설정하거나 삭제하거나 업데이트하는지 알 수 있도록 도와줍니다.

함수를 사용하여 어셈블리에 그림자 DOM 트리를 만듭니다.

당신은 이 코드가 너무 적은 내용에 대해 너무 번거롭다고 생각할 수도 있습니다.
당신의 생각은 옳습니다. 웹 구성 요소 표준은 적어도 현재의 형식에서는 저급 표준입니다. 모든 용례에 필요한 것을 위해 코드를 작성하도록 요구합니다.

'더 간단하게'™"

이것이 바로 내가 전에 언급한 추상적인 부분이다. 이 모든 추상들은 기본적으로 다음과 같은 방식으로 모든 표준을 사용하는 난점을 해결하는 데 목적을 둔다.

모든 수동 DOM 작업을 삭제할 수 있는 렌더링 엔진

attachShadowRoot에 등록할 수 있는 클래스로 확장, 포장 또는 컴파일

본 컴퓨터의 생명주기 리셋을 확장하고 라이브러리에 특정한 리셋을 추가하면 상태 관리와 많은 다른 용례 등 더 많은 용례를 처리할 수 있습니다.

그림자 DOM 트리 생성을 처리하여 다각형 채우기로 되돌리거나 그림자 DOM이 전혀 없습니다.

이 모든 추상적인 것들은 일반적으로vanilla 웹 구성 요소를 사용하는 것보다 전체적인 개발 체험을 즐겁게 한다.
더 좋은 것은 대부분의 최종 작업이 실제 기준에 따라 이루어지기 때문에 본 시리즈에 포함된 대부분의 라이브러리는 최종 패키지(minify/gzip 이후)에 10kB를 추가하지 않습니다!💪

다음은 뭐예요?

지금까지 저는 웹 구성 요소를 만드는 데 무엇이 필요한지, 그리고 왜 웹 구성 요소를 만들 때 좋은 체험을 할 수 있도록 라이브러리를 사용하고 싶은지 이해하는 데 도움을 주었습니다.
그러나 우리는 최초의 목표를 잊지 말아야 한다. 나는 이곳에서 큐피트 역을 맡아 너를 너의 완벽한 도서관과 어울리게 해야 한다.💘
비록 나는 이 라이브러리들이 표준에서 제공하는 많은 추상적인 것들을 언급했지만, 당신이 최종적으로 구성 요소를 위해 코드를 작성하는 데 가장 큰 영향을 미치는 것은 구성 요소를 위해'클래스'를 정의하는 방법이라고 믿습니다.
앞에서 언급한 바와 같이 대부분의 라이브러리는 세 가지 모델 중 하나로 나눌 수 있다.

확장CustomElementRegistry 클래스를 제공하고 코드에서 이 클래스를 확장할 수 있도록 추가 기능을 추가합니다.

호출할 때, 이 함수는 구성 요소에 추가 특성과 구성 요소 코드를 가진 클래스를 만들 수 있는 함수를 제공합니다.

코드를 하나의 클래스로 컴파일하여 구성 요소에 추가 기능과 구성 요소를 호출할 수 있는 도구를 제공합니다.

다음 글에서 나는 모든 모델의 작업 원리를 상세하게 소개하고 가능한 한 많은 모델에 속하는 라이브러리를 간략하게 소개하려고 한다.
끝까지 읽어 주셔서 감사합니다. 저는 당신이 그것을 좋아하고 이 시리즈의 다른 문장을 계속 읽기를 바랍니다.
이 시리즈의 나머지 부분에 대해 질문이나 건의가 있으면 언제든지 논평을 주십시오. 특히 제가 소개할 라이브러리에서 어떤 데이터를 듣고 싶으십니까?