웹 컴포넌트
(Web Components)
알아보기

오늘의 발표자

  • 안도형 (리내)
  • Studio XID Korea
    프론트엔드 개발자
  • 가끔 번역 함
  • @adhrinae (Twitter)

이번 시간에 살펴볼 것

  • 왜 웹 컴포넌트인가
  • 웹 컴포넌트를 만들기 위한 핵심 개념
  • 적용 사례 (오픈소스 코드 들여다보기)

왜 웹 컴포넌트를?

Omi는 시작에 불과했다

Squoosh App 등장

구글이 주도하는

다양한 오픈소스 웹 컴포넌트 프로젝트들이 있습니다

조금 뒤 같이 살펴보시죠


https://github.com/GoogleChromeLabs

다시 한번 묻는데,
왜 웹 컴포넌트죠?

프론트엔드 개발의

패러다임 전환

페이지 기반 개발

컴포넌트 기반 개발

캡슐화
(특히  CSS)

OOP for DOM?

웹 컴포넌트는 웹 페이지와 웹 앱에 쓸 수 있는 새롭고 재사용 가능한데다, 캡슐화 할 수 있는 HTML 태그를 만들게 해주는 웹 플랫폼 API의 묶음입니다.

 

웹 컴포넌트 API를 활용해서 만든 커스텀 컴포넌트와 위젯은 대부분의 모던 브라우저에서 동작하며 HTML과 함께 동작하는 모든 자바스크립트 라이브러리나 프레임워크와 사용할 수 있습니다.

webcomponents.org 에서 발췌 및 번역

전혀 새로운 것이 아니다

2011년에

처음 개념이 등장했고

(by Alex Russell)


2013년에

Polymer가 나왔다

하지만 브라우저

제조사들이 안따라왔음

스펙 재정의(v0 ➡ v1)

Custom Elements

- Reusable Web Components

재사용 가능한 새로운 HTML 태그를 만들고
다른 사람이 만든 태그
확장도 하고
이 모든 것이 웹 표준

Vanillja JS / HTML / CSS

무엇이 특별한가?

  • LifeCycle Hooks
  • 속성 변화 감지
  • 등록 되기 전에 사전 선언 가능

Custom Element 만들어보기

LifeCycle Hooks

속성 변화 감지

엘리먼트가 정의되기 전/후 활용

추가 정보 & 유의사항

  • 네이티브 & 커스텀 엘리먼트 클래스를 상속하여 확장 가능
  • <template> 태그로도 생성 가능
  • `-` (Dash) 가 포함된 이름으로 지어야 하고
  • 같은 이름의 엘리먼트를 한 번만 등록 가능하고
  • self-closing 엘리먼트는 허용되지 않는다

Custom Element Example

Shadow DOM

- Self-contained Web Components

우리가 생각하는

웹 애플리케이션의

자연스러운 문제점

Global

  • id / class 충돌

  • id가 있는 DOM은 window 객체에 할당된다

  • !important

  • 랜더링 최적화 문제 (contain 속성)

하지만 스코프를

격리할 수 있다면?

  • 독립된 DOM: 컴포넌트의 DOM은 해당 컴포넌트에만 종속되어있다.(document.querySelector() 로 Shadow DOM 탐색 불가)
  • 한정된 범위의 CSS: Shadow DOM 안에 선언된 스타일은 그 범위 안에서만 적용된다. 페이지 스타일이 영향을 미치지도 않고, 바깥 요소에 영향을 주지도 않는다.
  • 조합 가능성: 선언적(Declarative), 마크업 기반의 컴포넌트 생성
  • CSS 단순화: 범위가 한정된 DOM 덕분에 단순한 CSS 선택자를 사용할 수 있고, 네이밍 충돌을 걱정할 일이 줄어듦.
  • 생산성: 애플리케이션을 하나의 거대한(글로벌) 페이지로 보지 않고, DOM 조각들의 모음으로 바라보게 된다.

Shadow DOM Example

Slots

Custom Elements + Shadow DOM

= OOP with DOM

지원 현황

무슨무슨 프레임워크와

다른 점은?

🙅

어떻게 같이 쓸 수 있을까?

코드 직접 살펴보기

Discussion

참고 자료

Web Component 알아보기

By Dohyung Ahn

Web Component 알아보기

11월 원데이이모콘 발표

  • 3,412