웹 컴포넌트 왜 사용할까?
웹 컴포넌트는 웹 표준 기반을 준수하여 Html, Css, Javascript 로 만들어진 재사용 가능한 캡슐화 된 컴포넌트 입니다. 다음 링크는 웹 컴포넌트를 사용하는 이유를 알려주고 있습니다.왜 Web Component가 중요한가lit-project를 시작하기에 앞서 웹 컴포넌트의 특성 대해 알아 보도록 하겠습니다.웹 컴포넌트 특성
웹 컴포넌트 란웹 컴포넌트란 재사용 할 수 있는 캡슐화된 컴포넌트를 만들며 다음 세 가지 주요 기술들로 구성되어 있습니다.- Custom elements: 사용자 인터페이스에서 원하는대로 사용할 수있는 사용자 정의 요소 및 해당 동작을 정의 할 수있는 JavaScript API 세트입니다.
- Shadow DOM: 캡슐화된 "그림자" DOM 트리를 엘리먼트 — 메인 다큐먼트 DOM 으로부터 독립적으로 렌더링 되는 — 를 추가하고 연관된 기능을 제어하기 위한 JavaScript API 의 집합. 이 방법으로 엘리먼트의 기능을 프라이빗하게 유지할 수 있어, 다큐먼트의 다른 부분과의 충돌에 대한 걱정 없이 스크립트와 스타일을 작성할 수 있습니다.
- HTML 템플릿: 과 엘리먼트는 렌더링된 페이지에 나타나지 않는 마크업 템플릿을 작성할 수 있게 해줍니다. 그 후, 커스텀 엘리먼트의 구조를 기반으로 여러번 재사용할 수 있습니다.
lit 프로젝트 설정하기
리액트를 시작하기 위해서는 처음 하는 것은 CRA(Create React App)을 설치 하기 일 것입니다. lit 프로젝트를 시작하기 위해 저희는 thepassle 가 만든CLA(Create Lit App)을 사용 할 수 있습니다. 하지만 저는 타입스크립트를 사용하길 원했고 다음vaadin 강의및 webpack 블로그 글을 참고하여 웹 컴포넌트 실행을 위한 webpack 및 프로젝트 설정을 직접 하였습니다. 간단한 웹 컴포넌트 실행이 되는 프로젝트를 깃허브에 올려 두었습니다.깃허브 : jerrynim-lit-project-starter저는 Next.js를 사용하는 것을 좋아하기 때문에 폴더구조는 Next.js의 구조를 사용하였습니다.프로젝트 실행해보기
jerrynim-lit-project-starter 프로젝트를 다운로드 받아 필요한 패키지를 설치후 실행해 보도록 하겠습니다. 설정해둔 포트는 3000으로, http://localhost:3000/ 로 접속하여확인 할 수 있습니다.yarn
yarn dev
[hello tomato!]$<lit-tomato>라는 생소한 태그가 보입니다. <lit-tomato>라는 태그를 찾아보도록 하겠습니다. 해당 태그를 'index.html'에서 찾아 볼 수 있습니다.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Lit project</title>
<meta name="description" content="Lit project Start" />
<script>
if (!window.customElements) {
document.write("<!--");
}
</script>
<script src="/vendor/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->
</head>
<body>
<main>
<lit-tomato></lit-tomato>
</main>
<script src="/vendor/webcomponents-loader.js"></script>
</body>
</html><lit-tomato>를 찾아보니 해당 태그는 가지고 있는 값이 없습니다. 그렇다면 'Hello Tomato'는 어디로부터 출력 되는 걸까요?, 'Hello Tomato'를 찾아보니 'pages/lit-tomatoo.ts'에서 찾을수 있었습니다.pages/lit-tomato
import { LitElement, html, customElement } from "lit-element";
@customElement("lit-tomato")
class Tomato extends LitElement {
render() {
return html`
<style></style>
<h1>Hello Tomato!</h1>
`
}
}
declare global {
interface HTMLElementTagNameMap {
"lit-tomato": Tomato;
}
}render() {
return html`
<style></style>
<h1>Hello Tomato!</h1>
`;
}import { LitElement, html, customElement } from "lit-element";- LitElement는 lit-html 을 사용하여 HTML 템플릿을 정의하고 렌더링합니다.
return html` <style></style> <h1>Hello Tomato!</h1> ` - LitElement는 웹 페이지에 쉽게 포함하기 위해 사용자 정의 요소를 사용하고 캡슐화를 위해Shadow DOM을 사용합니다.
- 격리된 DOM: 구성 요소의 DOM은 자체 포함됩니다(예: document.querySelector()는 구성 요소의 Shadow DOM에 노드를 반환하지 않음).
- 범위가 지정된 CSS: Shadow DOM 내부에 정의한 CSS는 범위가 Shadow DOM으로 지정되어 있습니다. 스타일 규칙은 누출되지 않으며 페이지 스타일은 스며들지 않습니다.
- 컴퍼지션: 구성 요소에 대한 선언적 마크업 기반 API를 디자인합니다.
- CSS 단순화: 범위가 지정된 DOM이란 간단한 CSS 선택기와 훨씬 일반적인 ID/클래스 이름을 사용할 수 있으며 이름 충돌에 대해 걱정할 필요가 없음을 의미합니다.
- 생산성: 큰(전역) 단일 페이지보다 DOM 청크에서 앱을 고려합니다.
decorators
다음 코드를 보니 다음과 같은 코드가 있습니다.@customElement("lit-tomato")@customElemenet("lit-tomato") 코드는 다음 코드와 동일합니다.
customElements.define('lit-tomato', Tomato);Tomato라는 LitElement 를
<lit-tomato>처럼 사용할 수 있도록 정의해주는 역활을 합니다. 이때 엘리먼트의 이름을 지정할때 '-'는 필수로 들어가야합니다. 이름에 '-' 가 없다면 다음 그림과 같은 빨간 줄을 보게 될 것입니다.
[웹 컴포넌트 이름 규칙]tsconfig에서 experimentalDecorators 값을 true로 변경해 주었고,
tsconfig.json
"experimentalDecorators": true,.babelrc
const plugins = [
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-class-properties",
["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
];마지막으로 다음과 같이 엘리먼트의 타입을 선언해 줌으로써 다른 파일에서 커스텀 웹 컴포넌트를 찾을 수 있게 되었습니다.
declare global {
interface HTMLElementTagNameMap {
"lit-tomato": Tomato;
}
}<lit-tomato>를 사용해 보도록 하겠습니다.
[lit type 자동완성]import "./lit-tomato";<lit-tomato>를 사용 할 수 있도록 index.ts에서 import 해주어야 합니다.index.ts
import "./pages/lit-tomato";<lit-tomato>라는 커스텀 엘리먼트로 지정하였고 index.ts에서 lit-tomato를 import하여 index.html에서 사용한<lit-tomato> 커스텀 엘리먼트를 사용할 수 있게 되었습니다. 다음 포스팅에서는 본격적으로 property를 사용하여 변수 사용 및 뷰의 변화를 주는 것을 해보도록 하겠습니다.