728x90

Web Components 와 Lit

개념과 사용법

이제는 웹 개발에서 코드 재사용이 얼마나 중요한지를 모두가 알고 있습니다. 그러나 사용자 정의 UI 컨트롤을 만들거나 웹 페이지의 구조를 복잡하게 만들지 않고 코드를 재사용하는 것은 전통적으로 어려웠습니다. 사용자 정의 마크업 구조를 렌더링하려면 복잡한 HTML, 스타일 및 스크립트를 작성해야 했으며, 이를 여러 번 사용하면 페이지가 혼란스럽게 엉망이 될 수 있었습니다.

하지만 여기에 해결책이 있습니다 - Web Components입니다. Web Components는 코드 충돌을 걱정하지 않고 재사용 가능한 UI 컴포넌트를 만들 수 있도록 도와주는 기술 집합으로, 세 가지 핵심 기술로 구성됩니다.

1. Custom Elements (사용자 정의 요소):

Custom Elements는 사용자 정의 HTML 요소를 정의하고 등록하는 기술입니다. 이를 통해 개발자는 자신만의 UI 컴포넌트를 생성하고 다른 요소와 충돌하지 않고 페이지에 추가할 수 있습니다. 이것은 코드를 모듈화하고 재사용 가능하게 만드는 데 큰 도움이 됩니다.

<!-- HTML 파일 -->
<!DOCTYPE html>
<html>
<head>
  <title>Custom Element Example</title>
</head>
<body>
  <!-- 사용자 정의 버튼 요소를 사용할 수 있도록 선언 -->
  <my-button></my-button>
  <my-button></my-button>
  <script src="custom-element.js"></script>
</body>
</html>

// custom-element.js 파일
// CustomElementRegistry.define() 메서드를 사용하여 사용자 정의 요소를 정의합니다.

class MyButton extends HTMLElement {
  constructor() {
    super();

    // 요소의 내용과 스타일을 정의합니다.
    this.innerHTML = `<button>This is a custom button</button>`;
    this.style.display = 'block';
    this.style.padding = '10px';
    this.style.backgroundColor = 'blue';
    this.style.color = 'white';

    // 요소에 클릭 이벤트를 추가합니다.
    this.addEventListener('click', () => {
      alert('Custom button clicked!');
    });
  }
  
  //요소가 문서에 추가될 때마다 호출됩니다
  connectedCallback() {
    console.log("Custom element added to page.");
  }

  //요소가 문서에서 제거될 때마다 호출됩니다.
  disconnectedCallback() {
    console.log("Custom element removed from page.");
  }

  //요소가 새 문서로 이동할 때마다 호출됩니다.
  adoptedCallback() {
    console.log("Custom element moved to new page.");
  }

  //속성이 변경, 추가, 제거 또는 교체될 때 호출됩니다
  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute ${name} has changed.`);
  }
}

// 사용자 정의 요소를 등록합니다.
customElements.define('my-button', MyButton);

See the Pen blog-web components by 김기남 (@vcyikjgu-the-bold) on CodePen.

2. Shadow DOM (그림자 DOM):

Shadow DOM은 요소의 내부 구조와 스타일을 격리시키는 기술로, 외부에서의 접근을 막습니다. 이를 통해 사용자 정의 요소의 내부를 보호하고 스타일 충돌을 방지하여 예측 가능한 동작을 제공합니다.

// Shadow DOM을 열고 그림자 DOM을 생성합니다.
const shadow = this.attachShadow({ mode: 'open' });

Shadow 호스트
: Shadow DOM이 연결된 일반 DOM 노드입니다.
Shadow tree
: Shadow DOM 내부의 DOM 트리입니다.
Shadow 경계
: Shadow DOM이 끝나고 일반 DOM이 시작되는 곳입니다.
Shadow root
: 섀도우 트리의 루트 노드입니다.

3. HTML Templates (HTML 템플릿):

HTML Templates는 페이지에 렌더링되지 않는 HTML 코드를 정의하는 데 사용됩니다. 이를 통해 재사용 가능한 UI 조각을 정의하고, 필요할 때 자바스크립트를 사용하여 동적으로 페이지에 추가할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Template Example</title>
</head>
<body>
  <!-- HTML 템플릿 정의 -->
  <template id="my-template">
    <p>This is a reusable template.</p>
    <button>Click Me</button>
  </template>

  <div id="content"></div>

  <script>
    // HTML 템플릿 요소를 가져옵니다.
    const template = document.getElementById('my-template');

    // 템플릿 내용을 복제하고 페이지에 추가합니다.
    const content = document.getElementById('content');
    const clone = document.importNode(template.content, true);
    content.appendChild(clone);

    // 복제된 버튼에 클릭 이벤트를 추가합니다.
    const button = content.querySelector('button');
    button.addEventListener('click', () => {
      alert('Button clicked!');
    });
  </script>
</body>
</html>

이 예제에서는 <template> 요소를 사용하여 HTML 템플릿을 정의하고, 필요할 때 복제하여 페이지에 추가합니다. 템플릿 내용을 가져올 때 document.importNode() 함수를 사용하고, 복제된 요소에 이벤트를 추가할 수 있습니다.

Web Components를 통해 개발자는 코드 재사용을 훨씬 간단하게 만들 수 있으며, 사용자 정의 UI 컴포넌트를 만들어 다른 프로젝트에서도 활용할 수 있습니다. 이 기술은 웹 개발을 혁신적으로 변화시키고, 코드의 유지보수성을 향상시키며 생산성을 높이는 데 기여합니다. 코드 재사용과 모듈화를 통해 웹 개발 프로세스를 간소화하고 향상시키는 이러한 기술적 혁신은 개발자 커뮤니티에 큰 도움이 될 것입니다.

Lit

웹 개발은 현재 웹 애플리케이션을 구축하고 관리하는 데 사용되는 다양한 도구와 기술을 제공합니다. 그 중에서도 웹 컴포넌트는 코드 재사용성을 높이고 개발을 단순화하는 강력한 개념입니다. Google에서 개발한 Lit은 이러한 웹 컴포넌트 기반 개발을 혁신하고 최신 웹 표준과 기술을 통합하여 개발자들에게 뛰어난 도구와 라이브러리를 제공합니다.

1. 웹 컴포넌트 지원

Lit은 웹 컴포넌트 표준에 대한 풍부한 지원을 제공합니다. 이것은 사용자 정의 웹 컴포넌트를 쉽게 만들고 사용할 수 있게 합니다. 이로써 코드의 모듈화와 재사용성이 향상되며, 복잡한 웹 애플리케이션을 구축하는 과정이 단순화됩니다.

2. 템플릿 리터럴

Lit은 JavaScript 템플릿 리터럴을 사용하여 컴포넌트의 템플릿을 정의합니다. 이것은 HTML, CSS 및 JavaScript를 템플릿 안에서 직접 사용할 수 있으며, IDE 지원과 코드 하이라이팅을 개선시켜 개발자의 생산성을 높입니다.

3. 바인딩 및 리액티브 데이터

Lit은 데이터 바인딩 및 리액티브 데이터를 지원합니다. 데이터가 변경될 때 컴포넌트의 뷰가 자동으로 업데이트되므로 UI를 동적으로 관리하는 것이 간단해집니다.

4. Shadow DOM 지원

Lit은 그림자 DOM(Shadow DOM)을 사용하여 컴포넌트의 스타일과 구조를 캡슐화할 수 있게 해줍니다. 스타일 충돌을 방지하고 컴포넌트를 격리시켜 유지보수성을 높이는 데 도움이 됩니다.

5. 디렉티브와 이벤트 처리

Lit은 다양한 디렉티브를 제공하여 데이터와 이벤트 처리를 간단하게 관리할 수 있게 합니다. 이러한 디렉티브를 사용하면 코드를 더 간결하게 작성할 수 있습니다.

6. 프레임워크 강화

Lit은 다른 프레임워크 및 라이브러리와 함께 사용할 수 있습니다. 따라서 기존 프로젝트에 Lit을 통합하는 것도 가능합니다.

7. 성능 최적화

Lit은 성능을 중시하며, 작은 번들 크기와 빠른 초기 로딩 시간을 제공합니다. 웹 애플리케이션의 성능을 향상시키는 데 기여합니다.

import {LitElement, html, css} from 'lit';

/**
 * An example element.
 *
 * @fires count-changed - Indicates when the count changes
 * @slot - This element has a slot
 * @csspart button - The button
 */
export class MyElement extends LitElement {
  static get styles() {
    return css`
      :host {
        display: block;
        border: solid 1px gray;
        padding: 16px;
        max-width: 800px;
      }
    `;
  }

  static get properties() {
    return {
      /**
       * The name to say "Hello" to.
       * @type {string}
       */
      name: {type: String},

      /**
       * The number of times the button has been clicked.
       * @type {number}
       */
      count: {type: Number},
    };
  }

  constructor() {
    super();
    this.name = 'World';
    this.count = 0;
  }

  render() {
    return html`
      <h1>${this.sayHello(this.name)}!</h1>
      <button @click=${this._onClick} part="button">
        Click Count: ${this.count}
      </button>
      <slot></slot>
    `;
  }

  _onClick() {
    this.count++;
    this.dispatchEvent(new CustomEvent('count-changed'));
  }

  /**
   * Formats a greeting
   * @param name {string} The name to say "Hello" to
   * @returns {string} A greeting directed at `name`
   */
  sayHello(name) {
    return `Hello, ${name}`;
  }
}

window.customElements.define('my-element', MyElement);

See the Pen blg-html templates by 김기남 (@vcyikjgu-the-bold) on CodePen.

참고자료

https://developer.mozilla.org/en-US/docs/Web/API/Web_components#custom_elements

Web Components - Web APIs | MDN

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.

developer.mozilla.org

https://lit.dev/

Lit

Simple. Fast. Web Components.

lit.dev

728x90

저작자표시

'Front-End > JavaScript & TypeScript' 카테고리의 다른 글

JavaScript 와 ECMAScript 의 탄생 (0)	2023.10.21
자바스크립트 메모리 관리 (1)	2023.10.03
data type, let vs var vs const, hoisting (0)	2022.06.11
async vs defer (0)	2022.05.30

두두리

Web_components with Lit

Web Components 와 Lit

개념과 사용법

1. Custom Elements (사용자 정의 요소):

2. Shadow DOM (그림자 DOM):

3. HTML Templates (HTML 템플릿):

Lit

1. 웹 컴포넌트 지원

2. 템플릿 리터럴

3. 바인딩 및 리액티브 데이터

4. Shadow DOM 지원

5. 디렉티브와 이벤트 처리

6. 프레임워크 강화

7. 성능 최적화

참고자료

'Front-End > JavaScript & TypeScript' 카테고리의 다른 글

티스토리툴바

Web_components with Lit

Web Components 와 Lit

개념과 사용법

1. Custom Elements (사용자 정의 요소):

2. Shadow DOM (그림자 DOM):

3. HTML Templates (HTML 템플릿):

Lit

1. 웹 컴포넌트 지원

2. 템플릿 리터럴

3. 바인딩 및 리액티브 데이터

4. Shadow DOM 지원

5. 디렉티브와 이벤트 처리

6. 프레임워크 강화

7. 성능 최적화

참고자료

'Front-End > JavaScript & TypeScript' 카테고리의 다른 글

관련글

티스토리툴바