2025-02-09T19:02:05

2025-02-09 19:02:05 +09:00
parent b7ea981588
commit 129046ec26
9 changed files with 434 additions and 3 deletions
--- a/doc/webcomponent/01_webcomponent.md
+++ b/doc/webcomponent/01_webcomponent.md
@@ -0,0 +1,163 @@
+# 웹 컴포넌트(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 컴포넌트를 사용할 수 있어, 현대적인 웹 개발에서 점점 더 많이 활용됨.  
+
+웹 컴포넌트를 활용하면 프로젝트의 유지보수성과 확장성을 크게 높일 수 있습니다!