[JS][Web Components] 개요

web components

웹 페이지에는 버튼, 사용자 프로필, 텍스트 박스 등 웹 페이지를 구성하는 수많은 구성 요소들이 있다. 마치 자동차를 구성하는 수많은 부품들이 존재하는 것처럼. 이처럼, 텍스트, 이미지, 버튼 등의 여러 가지 리소스들이 모여 웹 페이지 내에서 하나의 시각적 구획을 가지는 구성 요소를 web components라 한다. 사용자의 사진과 그 아래에 이름, 자기소개 등의 텍스트가 모여 “사용자 프로필”이라는 웹 구성 요소를 가지며, 다른 요소들과 구분되는 것이 그 예이다.

자바스크립트에서는 이러한 웹 구성 요소들이 화면 상으로도 서로 독립적으로 존재하고, 코드상으로도 캡슐화를 통해 서로 구분하도록 하는 기능을 제공한다. 이 기능을 이용하면, 이용하지 않았을 때 코드 구조가 중복되고, 다른 웹 구성요소들과 완전한 독립이 되지 않아 코드를 잘못 건드리면 다른 구성 요소들까지 잘못되는 불상사를 방지할 수 있을 것이다.

자바스크립트에서는 웹 컴포넌트와 관련하여 다음의 개념들이 존재한다고 한다.

• Custom elements : 사용자 정의 HTML 요소를 정의.
• Shadow DOM : 외부로부터 숨겨진 내부 DOM.
• CSS scoping : 컴포넌트 내 Shadow DOM 내부에만 적용되는 스타일 선언에 사용.
• Event retargeting

이 부분들을 다른 페이지에서 살펴보도록 하겠다.

---

References

[1] 궤도의 높이에서

This content is licensed under CC BY-NC 4.0