[2024.04.26] 바닐라 자바스크립트로 Web Components 사용하기

이전 프로젝트에서 html, css, javascript만을 사용하다 보니, 같은 구조가 반복되는 곳에서 불필요하게 코드가 길어질 수밖에 없었습니다. 적절하게 반복문을 사용하여 구성해도 코드의 길이가 짧아지고 효율적으로 바뀌지만, 다른 곳에서의 재사용 측면에 있어 컴포넌트 개념이 유용하기 때문에 많이 사용되곤 합니다. 때문에 이번 개인 프로젝트에는 React 같은 라이브러리나 다른 프레임워크 없이, 자바스크립트만을 사용해서 컴포넌트를 구현해 보고자 Web Component를 찾아보았습니다.

컴포넌트로 조립해보기!

 

 

웹 컴포넌트를 알아보기 위해 MDN docs를 정독했습니다. MDN에서는 웹 컴포넌트를 다음과 같이 정의합니다.

※ 웹 컴포넌트: 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음

 

컴포넌트는 다른 코드들과 독립적으로 '캡슐화'된 상태의 모듈로 구성되며, 기능 단위로 나뉘기 때문에 필요한 곳에 가져다 쓰기만 할 수 있도록 구축해놓은 것입니다.

 

[웹 컴포넌트의 주요 3가지 기술]

1. Custom elements

사용자 인터페이스에서 원하는 대로 사용할 수 있는 사용자 정의 요소 및 해당 동작을 정의 할 수 있는 JavaScript API 세트입니다.  즉, 원하는 커스텀 태그를 생성할 수 있는데요. 아래와 같은 예시는 <word-count></word-count> 태그를 만드는 형식입니다.

//MDN 예시 코드
class WordCount extends HTMLParagraphElement {
  constructor() {
    // 항상 super를 생성자에서 먼저 호출합니다
    super();

    // 요소 기능은 여기 작성됩니다

    ...
  }
}

//custom elements 정의
customElements.define("word-count", WordCount, { extends: "p" });

 - Custom elements를 정의 할 때는 customElements.define()을 사용하고, 인자로 (DOMString, class 객체이름, 옵션) 순서로 정의할 수 있습니다. DOMString은 Custom elements의 이름을 나타내고 이는 무조건 kebab-case로 두 단어의 연속으로 사용됩니다(하나의 단어일 수 없음). 옵션의 경우 extends 속성을 포함하며, 이 요소가 상속받는 내장 요소가 있다면 그 내장 요소를 명시하게 됩니다.

 

 - Custom elements를 정의할 때는 ES 2015 class 구문이 사용되는데, HTMLElemet를 상속하여 클래스를 확장시키는 구조입니다. 때문에 온전한 프로토타입 체이닝을 위해 생성자를 사용해(costructor() super()) 다른 모든 메서드 호출보다 앞선 시점인, 인스턴스 객체를 초기화할 때 수행할 초기화 코드를 정의합니다. 
 => Q, 프로토타입 체인(Prototype Chain)이란? 해당 객체에 속성이나 메서드가 없다면 JavaScript는 해당 객체의 프로토타입(부모 객체)에서 속성이나 메서드를 찾는 것!

 

 

2. Shadow DOM

평소에 드러나지 않는 말 그대로 그림자 DOM입니다. 직접적으로 드러나지 않는 장점이 있어 캡슐화를 통해 마크업의 동작이나 스타일을 숨기고, 코드로부터 분리하여 다른 부분과 충돌하지 않게 하는 핵심 파트입니다.

 

 

3. HTML 템플릿

<template> 과 <slot> 엘리먼트를 사용하면 렌더링 된 페이지에 표시가 되지 않습니다. 이를 이용해 HTML DOM을 구성하고, Shadow DOM에 부착하는 형태로 사용하여 코드의 가독성을 높입니다.

 

---

이론적으로 web components가 어떤 건지 지식을 습득했고, 주말 동안에 이를 이용해서 프로젝트를 구성할 예정입니다. TIL 이라는 시간적 한계상 더 많은 내용과 예시를 포스팅 하지 못했는데요.. 프로젝트 이후 하나의 글로 합쳐 나름 기술 블로그 포스팅처럼 후기를 남겨보려 합니다.

 

+ 매니저님이 zep에 두고가주신 고양이와 더 귀여운 슬라임! 덕분에 책상 볼 때마다 행복해요✨

매니저님이 설치해주신 고양이