Files

Elex 129046ec26 2025-02-09T19:02:05

2025-02-09 19:02:05 +09:00

5.9 KiB

Raw Blame History

웹 컴포넌트(Web Components)

웹 컴포넌트(Web Components)란?

웹 컴포넌트(Web Components)는 재사용 가능한 UI 요소를 캡슐화하여 웹 애플리케이션에서 독립적으로 사용할 수 있는 기술입니다.
HTML, CSS, JavaScript를 하나의 독립된 컴포넌트로 묶어, 다른 프레임워크(React, Vue, Angular) 없이도 사용할 수 있습니다.

웹 컴포넌트의 핵심 목표
- 재사용성 : 여러 프로젝트에서 동일한 컴포넌트를 재사용
- 캡슐화 : 내부 스타일과 동작을 외부로부터 보호
- 프레임워크 독립적 : React, Vue, Angular 없이도 동작
- 모듈화 : HTML 요소를 조합하여 더 복잡한 UI 요소를 생성

웹 컴포넌트를 구성하는 3가지 핵심 기술

웹 컴포넌트는 다음 세 가지 핵심 기술을 기반으로 동작합니다.

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

HTML에서 <my-button> 같은 새로운 태그를 직접 정의하여 사용할 수 있게 해주는 기술입니다.

새로운 HTML 요소 정의 예시

class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Click Me</button>`;
  }
}
customElements.define("my-button", MyButton);

사용 방법

<my-button></my-button>

➡️ my-button 태그가 자동으로 버튼으로 렌더링됨.

2. Shadow DOM (캡슐화)

웹 컴포넌트 내부의 스타일과 구조를 외부 영향 없이 독립적으로 유지하는 기능입니다.
CSS 충돌을 방지하고, 외부에서 변경할 수 없도록 컴포넌트 내부를 보호합니다.

Shadow DOM 사용 예시

class ShadowButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" }); // Shadow DOM 활성화
    this.shadowRoot.innerHTML = `
      <style>
        button {
          background: blue;
          color: white;
          border: none;
          padding: 10px;
        }
      </style>
      <button>Shadow Button</button>
    `;
  }
}
customElements.define("shadow-button", ShadowButton);

사용 방법

<shadow-button></shadow-button>

Shadow DOM이 적용되면 외부 CSS가 이 버튼에 영향을 주지 않음.

3. HTML Templates (템플릿 & 슬롯)

컴포넌트에서 반복해서 사용할 HTML 구조를 정의하고, 동적으로 채울 수 있도록 해주는 기능입니다.

템플릿을 이용한 컴포넌트 예시

<template id="card-template">
  <style>
    .card {
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 5px;
    }
  </style>
  <div class="card">
    <slot name="title"></slot>
    <slot name="content"></slot>
  </div>
</template>

<script>
class MyCard extends HTMLElement {
  constructor() {
    super();
    const template = document.getElementById("card-template").content;
    this.attachShadow({ mode: "open" }).appendChild(template.cloneNode(true));
  }
}
customElements.define("my-card", MyCard);
</script>

<my-card>
  <span slot="title"><h2>웹 컴포넌트</h2></span>
  <span slot="content"><p>웹 컴포넌트 예제입니다.</p></span>
</my-card>

slot을 사용하여 컴포넌트 내부에 동적으로 콘텐츠를 삽입 가능.

3. 웹 컴포넌트의 장점 & 단점

장점
- 프레임워크 독립적 : 모든 브라우저에서 동작
- 재사용성 : 한 번 만든 컴포넌트를 여러 프로젝트에서 활용 가능
- 스타일 격리 : Shadow DOM을 이용해 CSS 충돌 방지
- 성능 향상 : 네이티브 브라우저 지원으로 최적화됨
단점
- 구형 브라우저 지원 부족 : IE11 등에서는 폴리필 필요
- 데이터 바인딩 부족 : React/Vue처럼 상태 관리 기능이 없음 (별도로 구현 필요)
- 초기 학습 비용 : 기존 프레임워크 사용자에게는 생소할 수 있음

4. 웹 컴포넌트 vs 프레임워크 비교

비교 항목	웹 컴포넌트	React/Vue/Angular
기술 종속성	없음	특정 프레임워크 필요
재사용성	네이티브 지원	같은 프레임워크 내에서만 가능
렌더링 성능	브라우저 최적화	가상 DOM 사용 (추가 오버헤드)
스타일 격리	Shadow DOM 사용	기본적으로 없음 (Scoped CSS 사용 가능)
데이터 바인딩	직접 구현해야 함	내장 기능 제공

➡️ 웹 컴포넌트는 특정 프레임워크에 종속되지 않는 강력한 기능을 제공하지만, 상태 관리 및 데이터 바인딩이 부족하므로 필요에 따라 프레임워크와 함께 사용할 수도 있음.

5. 웹 컴포넌트 활용 사례

디자인 시스템 (Design System) 구축
대규모 프로젝트의 UI 모듈화
프레임워크 간 호환이 필요한 경우

6. 웹 컴포넌트 배포 및 사용

웹 컴포넌트는 NPM 패키지로 배포하거나, CDN을 통해 웹사이트에서 직접 사용할 수 있습니다.

CDN을 활용한 웹 컴포넌트 로드

<script type="module" src="https://your-cdn.com/my-component.js"></script>
<my-component></my-component>

NPM으로 배포 후 사용

npm install my-web-component

import "my-web-component";

7. 결론

웹 컴포넌트는 모든 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 표준 기술입니다.

프레임워크 독립적이며, 캡슐화된 UI 컴포넌트를 쉽게 만들고 재사용할 수 있음.
Shadow DOM을 활용하여 스타일 충돌을 방지하고, HTML 템플릿으로 동적 콘텐츠를 관리 가능.
프레임워크 없이도 UI 컴포넌트를 사용할 수 있어, 현대적인 웹 개발에서 점점 더 많이 활용됨.

웹 컴포넌트를 활용하면 프로젝트의 유지보수성과 확장성을 크게 높일 수 있습니다!

5.9 KiB Raw Blame History