웹 컴포넌트
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
웹 컴포넌트는 재사용 가능한 사용자 정의 HTML 요소를 생성하기 위한 웹 기술 모음이다. 2011년 처음 소개된 이후, 구글의 Polymer, Angular Elements, Mozilla Firefox의 기본 지원 등 다양한 기술 표준화와 주요 라이브러리 및 프레임워크의 등장을 거치며 발전해왔다. 웹 컴포넌트는 Custom Elements, Shadow DOM, HTML Templates의 세 가지 핵심 기술을 사용하며, 재사용성, 캡슐화, 브라우저 지원, 상호 운용성을 특징으로 한다. X-Tag, Polymer, LitElement 등 다양한 라이브러리를 통해 개발을 지원하며, WebComponents.org와 같은 커뮤니티 활동도 활발히 이루어지고 있다.
더 읽어볼만한 페이지
- 웹 표준 - HTML5 오디오
HTML5 오디오는 웹 페이지에서 소리 재생을 위해 사용되는 audio 요소 기술로, 다양한 속성, 오디오 코딩 형식 지원, Web Audio API를 통한 오디오 처리, Web Speech API를 통한 음성 입력 기능 등을 제공하며 브라우저별 지원 코덱 현황에 차이가 있다. - 웹 표준 - 웹 워커
웹 워커는 웹 페이지의 메인 스레드와 독립적으로 백그라운드에서 스크립트를 실행하여 사용자 인터페이스 응답성을 유지하면서 무거운 작업 처리를 가능하게 하는 기술이다. - 웹 프로그래밍 - 자바스크립트
자바스크립트는 웹 페이지에 동적인 기능을 추가하기 위해 개발된 프로그래밍 언어로, 초기에는 라이브스크립트라 불렸으나 자바의 인기에 힘입어 변경되었고, ECMAScript로 표준화되어 웹 브라우저와 Node.js 등 다양한 환경에서 활용되지만, 오라클의 상표권 소유로 논란이 있다. - 웹 프로그래밍 - 블레이저 (웹 프레임워크)
블레이저는 마이크로소프트가 개발한 웹 프레임워크로, .NET을 사용하여 웹 애플리케이션을 구축하며, C#과 Razor 구문을 사용해 컴포넌트를 만들고, 서버 측 및 클라이언트 측 렌더링을 모두 지원한다. - 공식 웹사이트에 알 수 없는 변수를 사용한 문서 - 브루클린 미술관
브루클린 미술관은 1823년 브루클린 견습생 도서관으로 시작하여 현재 약 50만 점의 소장품을 보유한 뉴욕 브루클린 소재의 미술관으로, 다양한 분야의 예술 작품을 전시하며 특히 아프리카 미술과 여성주의 미술에 대한 기여가 크다. - 공식 웹사이트에 알 수 없는 변수를 사용한 문서 - 광주지방기상청
광주지방기상청은 광주광역시와 전라남도 지역의 기상 예보, 특보, 관측, 기후 정보 제공 등의 업무를 수행하는 기상청 소속 기관으로, 1949년 광주측후소로 설치되어 1992년 광주지방기상청으로 개편되었으며, 기획운영과, 예보과, 관측과, 기후서비스과와 전주기상지청, 목포기상대를 두고 있다.
| 웹 컴포넌트 | |
|---|---|
| 웹 컴포넌트 개요 | |
| 유형 | 웹 표준 |
| 개발 | W3C |
| 상태 | 권고안 |
| 명세 | Web Components specifications (W3C, GitHub) Web Components (MDN Web Docs) |
| 주요 기술 | |
| 핵심 기술 | 맞춤 요소 섀도 DOM HTML 템플릿 요소 |
| 관련 기술 | HTML 임포트 (더 이상 사용되지 않음) ECMAScript 모듈 |
| 특징 | |
| 특징 | 재사용 가능한 사용자 인터페이스 요소 생성 |
| 장점 | 캡슐화 재사용성 상호 운용성 |
| 활용 | |
| 활용 분야 | 웹 애플리케이션 개발 웹 사이트 개발 UI 라이브러리 구축 |
| 역사 | |
| 역사 | 2011년 처음 제안됨 |
2. 역사
과거 HTML은 하나의 HTML 파일로 구성되었고, 스타일을 제공하는 CSS는 HTML 전체에 적용되었다. 이 HTML은 다른 HTML에서 재사용할 수 없었으며, 거대한 HTML에 대한 CSS는 코딩을 어렵게 만들었다. 따라서 프로그래밍 언어의 함수나 클래스와 같이 재사용 가능한 묶음('''컴포넌트''')을 실현하는 메커니즘이 요구되었다.[32]
2. 1. 초기 제안
2011년, 알렉스 러셀(Alex Russell)이 Fronteers Conference에서 웹 컴포넌트를 처음 소개했다.[13][32]2013년, 구글은 웹 컴포넌트 기반 라이브러리인 Polymer를 출시했다. Polymer는 웹 애플리케이션 사용자 인터페이스를 위한 표준 구현 Material Design이다.
2. 2. 기술 표준화
2011년, 알렉스 러셀(Alex Russell)이 Fronteers Conference에서 처음으로 웹 컴포넌트를 소개했다.[13]2013년, 구글은 웹 컴포넌트 기반 라이브러리인 Polymer를 출시했다. Polymer는 웹 애플리케이션 사용자 인터페이스를 위한 표준 구현 Material Design이다.
2016년, RequireJS는 자바스크립트 라이브러리 및 사용자 정의 요소용 AMD 로더 플러그인으로 소개되었다.[14]
2017년, Ionic (모바일 앱 프레임워크) 팀은 웹 컴포넌트를 생성하는 자바스크립트 컴파일러인 StencilJS를 개발했다.[15]
2018년, Angular 6는 Angular 컴포넌트를 웹 컴포넌트 세트의 일부인 사용자 정의 웹 요소로 패키징할 수 있게 해주는 Angular Elements를 도입했다.[16]
2018년, Firefox 63은 기본적으로 웹 컴포넌트 지원을 활성화하고 개발자 도구를 업데이트하여 이를 지원했다.[17]
2018년, 구글 크롬 팀은 더 큰 Polymer 프로젝트의 일부로 LitElement를 개발했다. LitElement는 웹 컴포넌트를 만들기 위한 가볍고 사용하기 쉬운 프레임워크로 설계되었다.
2. 3. 주요 라이브러리 및 프레임워크 등장
2011년, 알렉스 러셀(Alex Russell)이 Fronteers Conference에서 처음으로 웹 컴포넌트를 소개했다.[13]2013년, 구글은 웹 컴포넌트 기반 라이브러리인 Polymer를 출시했다. Polymer는 웹 애플리케이션 사용자 인터페이스를 위한 표준 구현 Material Design이다.
2016년, RequireJS가 자바스크립트 라이브러리 및 사용자 정의 요소용 AMD 로더 플러그인으로 소개되었다.[14]
2017년, Ionic (모바일 앱 프레임워크) 팀은 웹 컴포넌트를 생성하는 자바스크립트 컴파일러인 StencilJS를 개발했다.[15]
2018년, Angular 6는 Angular 컴포넌트를 웹 컴포넌트 세트의 일부인 사용자 정의 웹 요소로 패키징할 수 있게 해주는 Angular Elements를 도입했다.[16]
2018년, Firefox 63은 기본적으로 웹 컴포넌트 지원을 활성화하고 개발자 도구를 업데이트하여 이를 지원했다.[17]
2018년, 구글 크롬 팀은 더 큰 Polymer 프로젝트의 일부로 LitElement를 개발했다. LitElement는 웹 컴포넌트를 만들기 위한 가볍고 사용하기 쉬운 프레임워크로 설계되었다.
웹 컴포넌트를 기반으로 사용자 정의 요소를 만들 때 추상화 수준을 높이기 위해 제작된 라이브러리가 많이 있다. 이러한 라이브러리 중 일부는 [https://x-tag.github.io/ X-Tag], [https://slimjs.com/ Slim.js], Polymer, [https://bosonic.github.io/ Bosonic], [https://riot.js.org/ Riot.js], [https://developer.salesforce.com/docs/component-library/documentation/en/lwc Salesforce Lightning Web Components], [https://www.dataformsjs.com/ DataFormsJS], [https://github.com/telepathic-elements/telepathic-element/ Telepathy], [https://wompo.dev Wompo] 등이 있다.
2. 4. 브라우저 지원 확대
2011년, 알렉스 러셀(Alex Russell)이 Fronteers Conference에서 처음으로 웹 컴포넌트를 소개했다.[13]2013년, 구글은 웹 컴포넌트 기반 라이브러리인 Polymer를 출시했다. Polymer는 웹 애플리케이션 사용자 인터페이스를 위한 표준 구현 Material Design이다.
2016년, RequireJS가 자바스크립트 라이브러리 및 사용자 정의 요소용 AMD 로더 플러그인으로 소개되었다.[14]
2017년, Ionic (모바일 앱 프레임워크) 팀은 웹 컴포넌트를 생성하는 자바스크립트 컴파일러인 StencilJS를 개발했다.[15]
2018년, Angular 6는 Angular 컴포넌트를 웹 컴포넌트 세트의 일부인 사용자 정의 웹 요소로 패키징할 수 있게 해주는 Angular Elements를 도입했다.[16]
2018년, 파이어폭스 63은 기본적으로 웹 컴포넌트 지원을 활성화하고 개발자 도구를 업데이트하여 이를 지원했다.[17]
2018년, LitElement는 더 큰 Polymer 프로젝트의 일부로 구글 크롬 팀에 의해 개발되었다. LitElement는 웹 컴포넌트를 만들기 위한 가볍고 사용하기 쉬운 프레임워크로 설계되었다.
웹 컴포넌트는 모든 주요 브라우저에서 지원된다.[28] 오래된 브라우저의 하위 호환성은 자바스크립트 기반의 폴리필(polyfill|폴리필영어)을 통해 구현된다.
3. 기술
과거 HTML은 하나의 HTML 파일로 구성되었고, 스타일을 제공하는 CSS는 HTML 전체에 적용되었다. 이 HTML은 다른 HTML에서 재사용할 수 없었으며, 방대한 HTML에 대한 CSS는 코딩을 어렵게 만들었다. 따라서 프로그래밍 언어의 함수나 클래스와 같이 재사용 가능한 묶음('''컴포넌트''')을 실현하는 메커니즘이 요구되었다.[19]
이러한 문제를 해결하기 위해 웹 컴포넌트는 다음 세 가지 주요 기술을 사용한다.[19]
- 커스텀 요소: 재사용 가능한 컴포넌트로서 커스텀 HTML 요소를 정의할 수 있게 한다.
- Shadow DOM: CSS와 자바스크립트의 적용 범위를 제한하여 독립적인 컴포넌트화를 가능하게 한다.[20]
- HTML 템플릿: HTML 요소 집합을 템플릿화하고 (`template` 요소) 인스턴스에 요소를 주입할 수 있게 한다 (`slot` 요소).
HTML 템플릿을 사용하여 HTML 요소의 묶음을 만들고, Shadow DOM을 사용하여 CSS, JavaScript를 포함한 묶음을 격리하며, 이를 HTML 내에서 재사용 가능하도록 커스텀 HTML 요소화한다. 이 컴포넌트를 사용할 때 `slot` 요소에 적절한 요소를 삽입 (주입)함으로써, 인수를 사용한 함수 호출, 클래스 인스턴스화처럼, 컴포넌트의 동작을 변경할 수 있다.
HTML 요소에서 속성(content attributes)과 프로퍼티(IDL attributes)는 반드시 값이 연결되지 않는다. 웹 컴포넌트에서 이른바 '''reflection'''을 가능하게 하려면, 이를 위한 메커니즘이 필요하다. 속성은 모두 문자열로 정의되어 있으며, 프로퍼티는 암묵적으로 정적 타입을 가지므로, 프로퍼티의 타입을 미리 정의하고 속성에 접근할 때 적절한 타입 변환(문자열화, 정의된 타입으로의 파싱)을 수행하는 것이 기본적인 메커니즘이 된다.
웹 컴포넌트 기술은 모두 웹 표준이며, 모든 주요 브라우저에서 지원된다. Shadow DOM을 활용하기 위한 방법은 다음과 같다.
- `Element.attachShadow()`: 반환 값인 shadow root에 연결되는 요소를 추가한다.
- LitElement class: 암묵적으로 shadowDOM을 root로 한다.
웹 컴포넌트는 아래와 같이 사용된다.
```html
Hello, Web Components!!
This will be injected.
3. 1. Custom Elements
Custom Elements에는 자율 사용자 지정 요소와 사용자 지정 기본 제공 요소, 두 가지 유형이 있다. 자율 사용자 지정 요소는 기본 HTML 요소와 완전히 분리된 HTML 요소이다. 즉, Custom Elements API를 사용하여 처음부터 구축된다. 사용자 지정 기본 제공 요소는 기본 HTML 요소를 기반으로 구축되어 해당 기능을 재사용하는 요소이다.[4]사용자 정의 요소는 자율 사용자 정의 요소와 사용자 정의 내장 요소로 나뉜다. 자율 사용자 정의 요소는 기본 HTML 요소와 완전히 분리된 HTML 요소이며, Custom Elements API를 사용하여 구축된다. 사용자 정의 내장 요소는 기본 HTML 요소 위에 구축되어 원래 기능을 재사용할 수 있다.[21]
- 맞춤형 요소
- `customElements.define(elemName, elemClass)`: Global의 customElements에 등록한다. 두 번째 인수는 HTMLElement를 상속해야 한다.[26]
- `@customElement(elemName)`: LitElement 라이브러리의 TypeScript Decorator. `customElements.define()`의 구문 설탕[27]
3. 2. Shadow DOM
Shadow DOM은 웹 브라우저가 메인 문서 DOM 트리에 넣지 않고도 DOM 요소를 렌더링할 수 있게 해주는 기능이다. 이는 개발자와 브라우저가 접근할 수 있는 부분 사이에 장벽을 만든다. 개발자는 중첩된 요소와 같은 방식으로 Shadow DOM에 접근할 수 없는 반면, 브라우저는 중첩된 요소와 같은 방식으로 코드를 렌더링하고 수정할 수 있다. 특정 요소의 Shadow DOM 내에서 적용되는 CSS의 영향은 HTML 요소가 CSS 스타일이 유출되어 영향을 받지 않아야 할 요소에 영향을 미칠 위험 없이 캡슐화될 수 있다는 것이다. 이러한 요소들은 HTML 및 CSS와 관련하여 캡슐화되어 있지만, 문서의 다른 요소에서 감지할 수 있는 이벤트를 발생시킬 수 있다.[5][6]요소 내의 범위가 지정된 하위 트리는 섀도 트리라고 한다. 섀도 트리가 연결된 요소를 섀도 호스트라고 한다.[6]
Shadow DOM은 리터럴 요소로 첨부하거나 스크립팅을 통해 항상 기존 요소에 연결되어야 한다. 자바스크립트에서 Shadow DOM은 `Element.attachShadow()`를 사용하여 요소에 연결된다.[7]
Shadow DOM은 CSS의 적용 범위, JavaScript의 접근 범위를 한정하여 독립적인 컴포넌트화를 가능하게 한다.[20]
3. 3. HTML Templates
HTML 템플릿은 템플릿에서 복제된 HTML 덩어리를 원하는 대로 삽입하는 방법이다. HTML 템플릿의 구문은 다음과 같다.```html
```
템플릿이 인스턴스화되기 전까지는 스크립트가 실행되지 않으며, 템플릿 내의 리소스는 가져오지 않는다.[19]
HTML 템플릿은 봉인된 HTML 덩어리를 자유롭게 삽입하는 수단이며, 다음과 같은 요소로 구성된다.
- `template` 요소
- ``: HTML 내에서 template 요소를 선언하고, template 요소의 자식 요소에 템플릿을 기술한다.
- `slot` 요소
- `slot`: 맞춤형 요소의 자식 요소를 받아들여 요소의 컴포지션(합성)을 맞춤형 요소에서도 가능하게 한다.
스크립트는 실행되지 않으며, 템플릿 내에 있는 리소스는 템플릿이 스탬프 아웃될 때까지 페치되지 않는다.[25]
4. 특징
웹 컴포넌트는 다음 3가지 주요 기술을 사용한다.[19]
- 커스텀 요소: 재사용 가능한 HTML 요소를 정의할 수 있게 한다.
- Shadow DOM: CSS, 자바스크립트의 적용 범위를 한정하여 독립적인 컴포넌트화를 가능하게 한다.[20]
- HTML 템플릿: HTML 요소 집합을 템플릿화하고 (`template` 요소) 인스턴스에 요소 주입을 가능하게 한다 (`slot` 요소).
HTML 템플릿을 사용하여 HTML 요소 묶음을 만들고, Shadow DOM을 사용하여 CSS, JavaScript를 포함하여 묶음을 격리하며, 커스텀 HTML 요소화하여 재사용한다. 이 컴포넌트를 사용할 때 `slot` 요소에 적절한 요소를 삽입 (주입)하여 함수 호출, 클래스 인스턴스화처럼, 컴포넌트의 동작을 변경할 수 있다.
HTML 요소에서 속성(content attributes)과 프로퍼티(IDL attributes)는 반드시 값이 연결되지 않는다. 웹 컴포넌트에서 이른바 '''reflection'''을 가능하게 하려면, 이를 위한 메커니즘이 필요하다. 속성은 모두 문자열로 정의되어 있으며, 프로퍼티는 암묵적으로 정적 타입을 가지므로, 프로퍼티의 타입을 미리 정의하고 속성에 접근할 때 적절한 타입 변환(문자열화, 정의된 타입으로의 파싱)을 수행하는 것이 기본적인 메커니즘이 된다.
4. 1. 재사용성 및 캡슐화
Shadow DOM은 웹 브라우저가 메인 문서 DOM 트리에 넣지 않고도 DOM 요소를 렌더링할 수 있게 해주는 기능이다. 이는 개발자와 브라우저가 접근할 수 있는 부분 사이에 장벽을 만든다. 개발자는 중첩된 요소와 같은 방식으로 Shadow DOM에 접근할 수 없는 반면, 브라우저는 중첩된 요소와 같은 방식으로 코드를 렌더링하고 수정할 수 있다. 특정 요소의 Shadow DOM 내에서 적용되는 CSS의 영향은 HTML 요소가 CSS 스타일이 유출되어 영향을 받지 않아야 할 요소에 영향을 미칠 위험 없이 캡슐화될 수 있다는 것이다. 이러한 요소들은 HTML 및 CSS와 관련하여 캡슐화되어 있지만, 문서의 다른 요소에서 감지할 수 있는 이벤트를 발생시킬 수 있다.[5][6]요소 내의 범위가 지정된 하위 트리는 섀도 트리라고 한다. 섀도 트리가 연결된 요소를 섀도 호스트라고 한다.[6]
Shadow DOM은 리터럴 요소로 첨부하거나 스크립팅을 통해 항상 기존 요소에 연결되어야 한다. 자바스크립트에서 Shadow DOM은 `Element.attachShadow()`를 사용하여 요소에 연결된다.[7]
과거의 HTML은 하나의 HTML 파일로 구성되었고, 스타일을 제공하는 CSS는 HTML 전체에 적용되었다. 이 HTML은 다른 HTML에서 재사용할 수 없었으며, 거대한 HTML에 대한 CSS는 코딩을 어렵게 만들었다. 따라서 프로그래밍 언어의 함수나 클래스와 같이 재사용 가능한 묶음('''컴포넌트''')을 실현하는 메커니즘이 요구되었다.
사용자 정의 요소(Custom Elements)는 자율 사용자 정의 요소(autonomous custom elements)와 사용자 정의 내장 요소(customized built-in elements)의 두 부분으로 나뉜다. 자율 사용자 정의 요소는 기본 HTML 요소와 완전히 분리된 HTML 요소이며, 본질적으로 Custom Elements API를 사용하여 하향식으로 구축된다. 사용자 정의 내장 요소는 기본 HTML 요소 위에 구축되어 원래 기능을 재사용할 수 있다.[21]
HTML 템플릿(HTML template)은 봉인된 HTML 덩어리를 자유롭게 삽입하는 수단이다. HTML 템플릿의 구문은 다음과 같다.
```html
```
스크립트는 실행되지 않으며, 템플릿 내에 있는 리소스는 템플릿이 스탬프 아웃될 때까지 가져오지 않는다.[25]
4. 2. 브라우저 지원
웹 컴포넌트는 현재 버전의 모든 주요 브라우저에서 지원된다.[9]이전 브라우저와의 하위 호환성은 자바스크립트 기반 폴리필을 사용하여 구현할 수 있다.
4. 3. 상호 운용성
웹 컴포넌트는 세 가지 주요 기술, 즉 커스텀 요소, Shadow DOM, HTML 템플릿을 사용하여 상호 운용성을 확보한다.[19]- 커스텀 요소: 재사용 가능한 커스텀 HTML 요소를 정의할 수 있게 한다.
- Shadow DOM: CSS와 JavaScript의 적용 범위를 한정하여 독립적인 컴포넌트화를 가능하게 한다.[20]
- HTML 템플릿: HTML 요소 집합을 템플릿화하고(`template` 요소) 인스턴스에 요소 주입을 가능하게 한다(`slot` 요소).
HTML 템플릿으로 HTML 요소 묶음을 만들고, Shadow DOM으로 CSS, JavaScript를 포함하여 묶음을 격리하며, 이를 커스텀 HTML 요소화하여 재사용한다. 이 컴포넌트를 사용할 때 `slot` 요소에 적절한 요소를 삽입 (주입)하여 컴포넌트의 동작을 변경할 수 있다.
HTML 요소에서 속성(content attributes)과 프로퍼티(IDL attributes)는 반드시 값이 연결되지 않는다. 웹 컴포넌트에서 이른바 '''reflection'''을 가능하게 하려면, 이를 위한 메커니즘이 필요하다. 속성은 모두 문자열로 정의되어 있으며, 프로퍼티는 암묵적으로 정적 타입을 가지므로, 프로퍼티의 타입을 미리 정의하고 속성에 접근할 때 적절한 타입 변환(문자열화, 정의된 타입으로의 파싱)을 수행하는 것이 기본적인 메커니즘이 된다.
사용자 정의 요소(Custom Elements)는 자율 사용자 정의 요소(autonomous custom elements)와 사용자 정의 내장 요소(customized built-in elements)로 나뉜다. 자율 사용자 정의 요소는 기본 HTML 요소와 완전히 분리되며, Custom Elements API를 사용하여 하향식으로 구축된다. 사용자 정의 내장 요소는 기본 HTML 요소 위에 구축되어 원래 기능을 재사용할 수 있다.[21]
웹 컴포넌트 기술은 모두 웹 표준이며, 모든 주요 브라우저에서 지원된다. 유틸리티 라이브러리를 포함하여 다양한 구현 방법이 있다.
- 맞춤형 요소
- `customElements.define(elemName, elemClass)`: Global의 customElements에 등록한다. 두 번째 인수는 HTMLElement를 상속해야 한다.[26]
- `@customElement(elemName)`: LitElement 라이브러리의 TypeScript Decorator. `customElements.define()`의 구문 설탕[27]
- Shadow DOM
- `Element.attachShadow()`: 반환 값인 shadow root에 연결되는 요소를 추가한다.
- LitElement class: 암묵적으로 shadowDOM을 root로 한다.
- template 요소
- ``: HTML 내에서 template 요소를 선언하고, template 요소의 자식 요소에 템플릿을 기술한다.
- slot 요소
- `slot`: 맞춤형 요소의 자식 요소를 받아들여 요소의 컴포지션(합성)을 맞춤형 요소에서도 가능하게 한다.
5. 라이브러리
웹 컴포넌트를 기반으로 사용자 정의 요소를 만들 때 추상화 수준을 높이기 위해 제작된 라이브러리가 많이 있다. 이러한 라이브러리로는 [https://x-tag.github.io/ X-Tag], [https://slimjs.com/ Slim.js], Polymer, [https://bosonic.github.io/ Bosonic], [https://riot.js.org/ Riot.js], [https://developer.salesforce.com/docs/component-library/documentation/en/lwc Salesforce Lightning Web Components], [https://www.dataformsjs.com/ DataFormsJS], [https://github.com/telepathic-elements/telepathic-element/ Telepathy], [https://wompo.dev Wompo] 등이 있다.
6. 커뮤니티
웹 컴포넌트 생태계를 위한 수많은 커뮤니티 노력이 존재한다. WebComponents.org[10]는 기존의 모든 웹 컴포넌트를 검색할 수 있는 인터페이스를 제공하며, Custom Elements Everywhere[11]는 인기 있는 프론트엔드 프레임워크가 웹 컴포넌트 표준과 호환되고 사용할 준비가 되었는지, 그리고 해결해야 할 버그와 가능한 해결책을 검증한다. 또한, Vaadin Tutorials[12]는 이러한 해결책이 예시 데모 앱 및 유사한 관련 주제(Infinite Craft)와 함께 어떻게 효율적으로 사용되는지를 보여주는 전용 섹션을 갖추고 있다.
7. 한국 웹 개발 생태계에서의 의의
원문 소스가 제공되지 않았기 때문에 주어진 지시사항에 따라 내용을 수정하거나 추가할 수 없습니다. 따라서 이전과 동일한 결과를 출력합니다.
(원문 소스가 제공되지 않았으므로, '한국 웹 개발 생태계에서의 의의' 섹션 내용을 작성할 수 없습니다.)
참조
[1]
간행물
GitHub - w3c/webcomponents: Web Components specifications.
https://github.com/w[...]
World Wide Web Consortium
2019-01-03
[2]
웹사이트
Web Components
https://developer.mo[...]
2019-01-03
[3]
웹사이트
"
[4]
웹사이트
Custom Elements
https://www.w3.org/T[...]
2016-12-01
[5]
웹사이트
What the Heck is Shadow DOM?
https://glazkov.com/[...]
2016-12-01
[6]
웹사이트
Shadow DOM v1: Self-Contained Web Components {{!}} Web {{!}} Google Developers
https://developers.g[...]
2016-12-01
[7]
웹사이트
Shadow DOM
https://developer.mo[...]
2016-12-01
[8]
웹사이트
Introduction to the template elements — WebComponents.org
http://webcomponents[...]
2016-12-03
[9]
웹사이트
webcomponents.org - Discuss & share web components
https://www.webcompo[...]
2020-07-22
[10]
웹사이트
Search available Web Components
https://www.webcompo[...]
[11]
웹사이트
Validate Front-end Frameworks with Web Components Standard
https://custom-eleme[...]
[12]
웹사이트
Web Components Tutorials
https://vaadin.com/l[...]
[13]
웹사이트
Web Components and Model Driven Views by Alex Russell · Fronteers
https://fronteers.nl[...]
2016-12-02
[14]
웹사이트
RequireJS in Commerce
https://developer.ad[...]
[15]
웹사이트
Web Component Solutions: A Comparison
https://levelup.gitc[...]
[16]
웹사이트
How to create Angular 6 Custom Elements and Web Components
https://www.freecode[...]
[17]
웹사이트
Developer Tools support for Web Components in Firefox 63
https://blog.nightly[...]
[18]
웹사이트
Web Components
https://developer.mo[...]
2019-09-13
[19]
웹사이트
Web Components
https://developer.mo[...]
2019-09-13
[20]
웹사이트
Web Components
https://developer.mo[...]
2019-09-13
[21]
웹사이트
Custom Elements
https://www.w3.org/T[...]
2016-12-01
[22]
웹사이트
What the Heck is Shadow DOM?
https://glazkov.com/[...]
2016-12-01
[23]
웹사이트
Shadow DOM v1: Self-Contained Web Components {{!}} Web {{!}} Google Developers
https://developers.g[...]
2016-12-01
[24]
웹사이트
Shadow DOM
https://developer.mo[...]
2016-12-01
[25]
웹사이트
Introduction to the template elements — WebComponents.org
http://webcomponents[...]
2016-12-03
[26]
웹사이트
CustomElementRegistry.define()
https://developer.mo[...]
2019-09-13
[27]
웹사이트
decorators.ts
https://github.com/P[...]
GitHub
2019-09-13
[28]
웹사이트
webcomponents.org - Discuss & share web components
https://www.webcompo[...]
2020-07-22
[29]
웹사이트
Search available Web Components
https://www.webcompo[...]
2021-11-14
[30]
웹사이트
Validate Front-end Frameworks with Web Components Standard
https://custom-eleme[...]
2021-11-14
[31]
웹사이트
Web Components Tutorials
https://vaadin.com/l[...]
2021-11-14
[32]
웹사이트
Web Components and Model Driven Views by Alex Russell · Fronteers
https://fronteers.nl[...]
2016-12-02
[33]
웹사이트
Developer Tools support for Web Components in Firefox 63
https://blog.nightly[...]
2021-11-14
[34]
간행물
GitHub - w3c/webcomponents: Web Components specifications.
https://github.com/w[...]
World Wide Web Consortium
2019-01-03
[35]
웹인용
Web Components
https://developer.mo[...]
2019-01-03
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com