MDN Webdoc의 표준, 커스텀 엘리먼트와 ShadowDOM

💡 21년도 Vuejs 2버전을 사내 개발팀에 교육하고자 작성했던 문서입니다. 참고 해주세요! 

 

MDN Web docs 를 얼마나 많이 접하시나요 ? 요즘은 모든 프론트엔드 프레임워크나 라이브리에서도 컴포넌트 기반 아키텍쳐를 구현하여 복잡한 화면의 기능을 간단한 부분으로 나누고 조립하는 과정을 통해 화면을 구현하고 있습니다. 대표적으로 Vuejs, React 등이 있는데요. 이런 프레임워크는 새로운 표준을 만들어 낸 것이 아닌 기존의 것은 그대로 놔두고 자바스크립트를 통해 컴포넌트를 구현했습니다. 우리가 프론트엔드 라이브러리나 프레임워크를 많이 접하면서도 웹 컴포넌트등의 표준 기술에 대해서는 잘 모르는것 같습니다. 웹 컴포넌트는 MDN WebDocs 에서 그 설명을 찾아 볼 수 있는데요.

MDN Web Docs

 

웹 컴포넌트는 화면을 표시하고 그 표시된 화면에서 제공하는 여러가지 기능을 재사용 가능한 조각으로 나누고 그것을 다시 조립하여 사용할수 있도록 제공하는 다양한 기술의 모음이라고 설명되어 있습니다.

 

이것이 표준 기술로 개발되기까지 여러가지 이유들이 있을 수 있겠지만 대표적으로는 재 사용성과 그로인한 생산성에 대한 문제를 해결하기 위함이 컸던것 같습니다. 우리가 HTML 과 CSS로 화면을 표현하기위해 반복해야 하는 작업들을 생각해 봅시다. 똑같은 기능과 디자인을 가지고 있는 HTML 와 CSS를 필요한 만큼 반복해서 코딩을 해주어야 했습니다. 또한 웹페이지를 동적으로 표현하거나 사용자에게 여러가지 기능을 제공하기 위해 자바스크립트를 사용했습니다. 자바스크립트를 이용하면 엘리먼트를 효과적으로 제어할 순 있지만 다른곳에서 동일할 기능이 필요한 경우 공통 기능으로 선언을 해주거나 같은 코드를 재사용 했어야 했습니다. 그러므로 한 페이지에는 서로 관련없는 자바스크립트 코드가 뒤죽 박죽이 되기 마련이고 생산속도를 크게 늘릴만한 방법이 제안되지 않았습니다.

 

웹 컴포넌트는 이러한 문제들을 해결해 줄수 있습니다. 몇가지 기능들이 있는데 하나씩 살펴보겠습니다.

 

커스텀 엘리먼트

HTML 태그는 HTML코드를 처리해주는 브라우저가 제공하는 몇가지 안되는 예약어라고 볼 수 있습니다. HTML 태그를 통해 우리는 화면을 구성했습니다. 커스텀 엘리먼트는 HTML 태그를 커스텀 할수 있는 기능입니다. 내가 원하는 이름의 태그를 만들고 사용할수 있습니다. 태그 안에는 자식 요소도 포함될수 있습니다. 

customElements.define('word-count', WordCount, { extends: 'p' });

 

커스텀 엘리먼트는 위와같이 간단한 형태로 구현할 수 있습니다. 이런식으로 작성된 자바스크립트 코드가 동작 한다면 이러한 HTML 코드를 표현할 수 있습니다.

<word-count />

 

define 함수에는 태그의 이름 말고도 WordCount 라는것과 { extends: 'p' } 라는 파라미터가 전달되었는데 눈치가 빠른 분들은 이미 눈치 채셨을수도 있겠지만 WordCount 는 자바스크립트 클래스, extends, P는 p 태그를 상속한다라는 뜻입니다. 상속이라는 단어가 생소하실수도 있겠지만 쉽게 표현해서 동일한 기능을 하도록 하겠다 라고 이해하시면 되겠습니다. p 태그는 레이아웃에서 인라인의 성격을 가지고 있으므로 word-coun 태그는 인라인의 속성을 가지게 됩니다.

 

클래스를 살펴볼까요 ?

class WordCount extends HTMLElement {
	consturctor() {
    	super();
    }
    
    function open() {
    	...
    }
}

 

클래스에는 여러가지 함수와 메서드가 포함될 수 있습니다. vuejs 와 react 처럼 라이프 사이클 콜백도 존재합니다.  클래스에 포함된 메소드는 태그로 활용 될떄 이렇게 사용할수 있습니다.

<script>
var count = document.getElementById('word-count');
count.open();
</script>

 

word-count 엘리먼트를 변수에 셀렉트 한 뒤 클래스처럼 함수를 호출할 수 있습니다. open 이라는 함수는 world-count 의 내부 기능에 포함되어 있으므로, world-coint 태그를 통해 엘리먼트를 변경하거나 이벤트를 주거나 제거하고 하는 등의 기능을 작성할 수 있고 이러한 기능을 하나의 클래스로 캡슐화 할수 있습니다.

 

Shadow DOM

shadow dom 은 웹 컴포넌트 아키텍쳐에서 캡슐화의 연장선으로 볼 수 있습니다. 커스텀 엘리먼트는 기능적 캡슐화를 구현할 수 있게 해준다면 shadow dom 은 엘리먼트에 스코프와 같은 개념을 적용할 수 있습니다. 블록 스코프는 변수의 접근 레이어가 있어서 해당 블록이 아니면 접근할수 없는 개념인데요. shadow dom으로 만들어진 엘리먼트 트리는 외부에서 접근할 수 없도록 제한을 줄수 있습니다.

let shadow = elementRef.attachShadow({ mode: 'open' });
let shadow = elementRef.attachShadow({ mode: 'close' });

 

elementRef는 이미 셀렉트 된 엘리먼트 인스턴스입니다. 여기에 attachShadow 함수를 호출하면 새로운 shadow dom root 가 생성됩니다. shadow dom root 에는 일반 돔처럼 다른 엘리먼트를 추가하거나 삭제 할수도 있고 이벤트 리스너를 생성해 줄수도 있습니다.

 

Shadow DOM 의 attachment - 출처 MDN

 

shadow DOM 이 일반 엘리먼트와 어떻게 작용할수 있는지 보여주고 있습니다. shadow dom 은 실제 일반 돔 트리에 부착되기 전까지는 렌더링 되지 않으며 부착이 됨과 동시에 렌더링이 되기 때문에. 여러가지 자식 요소를 포함한 컴포넌트를 제작하여 재사용 할 수 있습니다. 

 

이제 shadow dom 을 사용하는 방법을 살펴보겠습니다.

class SimpleModal extends HTMLElment {
	construct() {
    	super();
        
        // shadowDOM 생성
        this.attachShadow({ mode: 'open' });
        // 모달의 표시 여부
        this._visible = false;
        // 모달의 엘리먼트와 스타일 표현
        this.shadowRoot.innerHTML = `
        	<div class="modal_wrap">
            	...
            </div>
        `;
    }
    
    // 가상 트리가 document 에 연결된 후 실행
    connectedCallback() {
    	this._modal = this.shadowRoot.querySelector('.modal-wrap');
        this.shadowRoot.querySelect('.close').addEventListener('click', this._hide.bind(this));
        
        this.shadowRoot.querySelector('.modal-box').style.backgroundColor = this.getAttribute('bgcolor');
    }
    
    // 모달을 닫음
    _hide() {
    	this._visible = true;
        this._modal.style.display = 'none';
    }
    
    // 모달을 염
    show() {
    	this._visible = false;
        this._modal.style.display - 'block';
    }
}

// 커스텀 엘리먼트 등록
customElements.define('simple-modal', SimpleModal);

 

SimpleModal 은 커스텀 엘리먼트를 통해 shadow dom 을 생성하고 내부 함수를 이용해 shadow element 를 컨트롤 해주었습니다. 엘리먼트 클래스가 인스턴스화 될때 (돔에서 렌더링 될때) shadow dom 을 생성하여 일반 엘리먼트에 접착 될수 있는 상태가 됩니다. 

 

프론트엔드 라이브러리나 프레임워크를 사용하지 않고 자바스크립트와 HTML 태그만 가지고 컴포넌트를 구현할수 있다는 점이 신선했습니다. 이러한 표준 기술이 계속해서 발전되고 있지만 아직까지는 react와 vuejs 의 기능을 따라가기에는 부족한 부분이 많이 보입니다. 표준 기술에는 이 외에도 template 과 slot 등의 웹 컴포넌트를 위한 기술들이 있으므로 다음 포스팅에서 다뤄보도록 하겠습니다.

 

 

전체 코드는 여기에서 확인할 수 있습니다.

GitHub - meju7015/web-frontend-study: 웹 프론트엔드 스터디를 위한 Repository