# 웹 컴포넌트(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 요소 정의 예시
```javascript
class MyButton extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>Click Me</button>`;
  }
}
customElements.define("my-button", MyButton);
```
사용 방법
```html
<my-button></my-button>
```
➡️ `my-button` 태그가 자동으로 버튼으로 렌더링됨.



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

#### Shadow DOM 사용 예시
```javascript
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);
```
사용 방법
```html
<shadow-button></shadow-button>
```
> Shadow DOM이 적용되면 외부 CSS가 이 버튼에 영향을 주지 않음.


### 3. HTML Templates (템플릿 & 슬롯)
컴포넌트에서 **반복해서 사용할 HTML 구조를 정의하고, 동적으로 채울 수 있도록 해주는 기능**입니다.  

템플릿을 이용한 컴포넌트 예시
```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을 활용한 웹 컴포넌트 로드
```html
<script type="module" src="https://your-cdn.com/my-component.js"></script>
<my-component></my-component>
```

### NPM으로 배포 후 사용
```bash
npm install my-web-component
```
```javascript
import "my-web-component";
```


## 7. 결론
웹 컴포넌트는 모든 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 표준 기술입니다.  
* 프레임워크 독립적이며, 캡슐화된 UI 컴포넌트를 쉽게 만들고 재사용할 수 있음.
* Shadow DOM을 활용하여 스타일 충돌을 방지하고, HTML 템플릿으로 동적 콘텐츠를 관리 가능.  
* 프레임워크 없이도 UI 컴포넌트를 사용할 수 있어, 현대적인 웹 개발에서 점점 더 많이 활용됨.  

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