🔸 Web Components API
- 웹 컴포넌트 API는 무엇이고 왜 사용하는가?
: 웹 사이트에서 사용할 사용자 정의 요소를 생성할 수 있는 API
: 컴포넌트별로 캡슐화를 할 수 있도록 도와주기 때문에 관심사를 분리할 수 있음
: 최근 대두되는 CBD 기반 라이브러리, 프레임워크의 표준이라고 할 수 있음
- 웹 컴포넌트 API로 컴포넌트를 생성할 수 있는 방법에는 무엇이 있는가?
: 기본적으로 ES6 문법인 클래스를 활용하여 컴포넌트를 생성할 수 있음
: 직접 커스텀하여 새로운 HTML 요소를 생성하거나, 기존에 존재하는 HTML 요소를 확장시켜켜서 생성하는 방법이 있음
- 웹 컴포넌트 API로 어떻게 새로운 HTML 요소를 커스텀할 수 있는가?
:
customElements.define메서드를 사용하여 HTML 요소를 커스텀할 수 있음
: 메서드의 첫 번째 매개변수로는 생성할 컴포넌트의 이름, 두 번째 매개변수로는 생성할 컴포넌트의 클래스를 전달할 수 있음
: 컴포넌트의 이름은 2음절 이상의 접두사가 하이픈(-)으로 연결된 구조여야 함
ex)customElements.define('custom-div', CustomDiv);
- 웹 컴포넌트 API로 기존의 HTML 요소를 어떻게 확장할 수 있는가?
:
customElements.define메서드를 사용하여 HTML 요소를 커스텀할 수 있음
: 메서드의 첫 번째, 두 번째 매개변수를 전달하는 과정은 새롭게 HTML 요소를 커스텀하는 방식과 동일하지만, 기존 HTML 요소를 확장시켜서 사용하려면 세 번째 매개변수까지 필수적으로 전달해야 함
: 세 번째 매개변수에는 키-값의 형태로 어떤 HTML 요소를 확장시킬 것인지 그 정보를 전달해야 함
ex)customElements.define('custom-link', CustomLink, { extends: 'a' }) ;
- 생성한 웹 컴포넌트는 어떻게 사용할 수 있는가?
: 새롭게 사용자가 커스텀한 웹 컴포넌트는 설정한 컴포넌트의 이름을 HTML 태그 문법으로 작성하여 사용하면 됨
ex)<custom-div></custom-div>
: 기존 HTML 요소를 확장시킨 웹 컴포넌트는 일반 HTML 요소를 작성하되is어트리뷰트에 설정한 컴포넌트의 이름을 값으로 추가해주는 방식으로 사용해야 함
ex)<a is="custom-link" href="www.google.com">구글 바로가기</a>
- 웹 컴포넌트 API에서는 반응성을 어떻게 구현하는가?
: 반응성이란 상태가 변경됨에 따라 렌더링이 바로 변경되는 것을 의미하는데, 생성한 웹 컴포넌트의 프로퍼티나 어트리뷰트가 변경되면 리렌더링을 하는 방식으로 반응성을 구현함
- 웹 컴포넌트 API의 주요 기능 중 하나인 Shadow DOM은 무엇이고, 어떻게 사용하는가?
: Shadow DOM이란 React와 같은 라이브러리에서 사용하는 Virtual DOM과는 또 다른 개념
: 실제 DOM과 분리하여 캡슐화된 하위 트리를 생성하는 기능으로attachShadow()메서드를 사용하여 Shadow DOM을 활성화시킬 수 있음
- Shadow DOM은 왜 사용하는가?
: 기존에 컴포넌트별로 관리하기 어려웠던 스타일, 이벤트 등을 컴포넌트 자체적으로 관리하고 사용할 수 있도록 해줌
: 특히 CSS의 경우 기존에는 스코프가 존재하지 않기 때문에 프로젝트 규모가 커질수록 스타일이 오버라이딩될 수 있다는 단점이 존재했으나, 웹 컴포넌트 API의 Shadow DOM을 생성하여 그 안에 CSS 스타일을 정의하면 컴포넌트별로 CSS의 로컬 스코프를 가질 수 있음
- Shadow DOM에서만 사용할 수 있는 선택자
:host,:host-context()는 각각 무엇인가?:
:host는 커스텀한 요소 자체에 스타일을 정의할 수 있는 가상 클래스 선택자
::host-context(<선택자 이름>)는 커스텀한 요소의 외부 요소(부모 요소 등)에 클래스로 특정 조건이 부여되었을 때 커스텀한 요소와 그 하위 요소들에 스타일을 정의할 수 있는 가상 클래스 선택자
- 가상 요소 선택자
::part()는 무엇이고 어떻게 사용할 수 있는가?: Shadow DOM 내부에서 매개변수로 전달한 선택자에 해당하는 요소 중에
part어트리뷰트가 삽입된 모든 요소에 스타일을 적용할 수 있는 선택자
- 웹 컴포넌트 API의 주요 기능 중 템플릿은 무엇이고, 어떻게 사용하는가?
: HTML 마크업을 템플릿처럼 저장할 수 있는 기능
: 정의한<template>요소 안에 HTML 요소들을 삽입하여 템플릿을 생성할 수 있음
: 특별한 점은<template>요소 내부가 문서 외부로 간주되기 때문에<style>,<script>태그를 독립적으로 포함할 수 있음
: 템플릿 코드는 HTML로도 JS로도 생성 가능하지만 HTML은 데이터를 바인딩할 수 없으므로 웬만하면 JS로 생성하는 것이 바람직함
- 웹 컴포넌트 API의 주요 기능 중 슬롯은 무엇이고, 어떻게 사용하는가?
: 템플릿을 사용하면 캡슐화되어 있기 때문에 사용자가 외부에서 유연하게 그 템플릿을 커스터마이징할 수 없는데, 슬롯을 사용하면 외부에서 템플릿 내부에 특정 마크업을 삽입하여 이러한 문제를 해결할 수 있음
:<template>요소 내부에<slot>요소를 삽입하여 슬롯을 사용할 수 있음
:<slot>요소의 어트리뷰트로name의 값을 설정하고, 설정한 값을 실제 DOM 요소에서는slot어트리뷰트의 값과 연결시켜주면 외부에서 템플릿의 특정 위치에 슬롯을 삽입할 수 있음
:<slot>요소에name어트리뷰트를 따로 설정하지 않으면 기본적으로 템플릿에 삽입됨
