[javascript] 자바스크립트 외의 언어로 웹 컴포넌트 구현하기
웹 컴포넌트는 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 기술입니다. 자바스크립트 외의 언어로도 웹 컴포넌트를 구현할 수 있습니다. 이번 글에서는 자바스크립트 이외의 언어인 HTML, CSS, 그리고 웹 컴포넌트의 표준인 Custom Elements와 Shadow DOM을 사용하여 웹 컴포넌트를 구현하는 방법을 알아보겠습니다.
1. HTML과 CSS 작성하기
우선 컴포넌트의 마크업과 스타일을 작성해야 합니다. HTML과 CSS를 사용하여 컴포넌트의 구조와 디자인을 정의할 수 있습니다. 예를 들어, <my-component>라는 컴포넌트를 만들어 보겠습니다.
<!-- index.html 파일 -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="my-component.css">
</head>
<body>
<my-component></my-component>
<script src="my-component.js"></script>
</body>
</html>
/* my-component.css 파일 */
my-component {
display: block;
width: 200px;
height: 200px;
background-color: lightblue;
}
2. Custom Elements로 컴포넌트 등록하기
이제 Custom Elements를 사용하여 컴포넌트를 등록합니다. 자바스크립트 파일을 만들고 Custom Elements에 컴포넌트를 등록하는 코드를 작성합니다.
// my-component.js 파일
class MyComponent extends HTMLElement {
constructor() {
super();
const template = document.createElement('template');
template.innerHTML = `
<style>
:host {
display: block;
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
`;
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('my-component', MyComponent);
위의 코드는 <my-component> 커스텀 엘리먼트를 정의하고, shadowRoot에 마크업과 스타일을 추가합니다.
3. 결과 확인하기
이제 웹 브라우저에서 index.html을 열어 결과를 확인할 수 있습니다. <my-component> 요소가 보여야하며, 스타일이 적용되어 파란색으로 표시되어야 합니다.
결론
이처럼 자바스크립트 이외의 언어를 사용하여 웹 컴포넌트를 구현할 수 있습니다. HTML과 CSS로 마크업과 스타일을 작성하고, Custom Elements와 Shadow DOM을 사용하여 컴포넌트를 등록하고 스타일을 적용할 수 있습니다. 이를 통해 코드를 더욱 모듈화하고 재사용 가능한 컴포넌트를 만들 수 있습니다.