오늘은 차세대 웹 개발 라이브러리인 lit-html 및 LitElement의 첫 번째 안정화 버전을 발표하게 되어 기쁩니다.
lit-html은 HTML 템플릿을 위한 작고 빠르며 표현력이 뛰어난 라이브러리입니다. LitElement는 lit-html 템플릿으로 웹 구성요소를 만드는 간단한 기본 클래스입니다.
프로젝트를 계속 지켜본 적이 있다면 lit-html과 LitElement에 관해 잘 알고 있을 것입니다. 원한다면 끝으로 건너뛰기할 수도 있습니다. lit-html 및 LitElement를 처음 사용하는 경우 개요를 읽어보세요.
lit-html: HTML 템플릿을 위한 작고 빠른 라이브러리
lit-html은 HTML 템플릿을 위한 작고 (번들로 묶고 축소하고 GZIP으로 압축하면 3,000개가 조금 넘음) 빠른 JavaScript 라이브러리입니다. lit-html은 함수 프로그래밍 접근 방식과 잘 호환되므로 애플리케이션의 UI를 상태의 함수로 선언적으로 표현할 수 있습니다.
const myTemplate = (name) => html`
<div>
Hi, my name is ${name}.
</div>
`;
lit-html 템플릿을 렌더링하는 것은 간단합니다.
render(myTemplate('Ada'), document.body);
템플릿을 다시 렌더링하면 변경된 데이터만 업데이트됩니다.
render(myTemplate('Grace'), document.body);
lit-html은 효율적이고 표현력이 뛰어나며 확장 가능합니다.
- 효율적: lit-html은 매우 빠릅니다. 데이터가 변경되면 lit-html은 비교를 실행할 필요가 없습니다. 대신 템플릿에 표현식을 삽입한 위치를 기억하고 이러한 동적 부분만 업데이트합니다.
- 표현력이 뛰어남. lit-html은 JavaScript, 선언적 UI, 함수 프로그래밍 패턴의 모든 기능을 제공합니다. lit-html 템플릿의 표현식은 JavaScript이므로 맞춤 구문을 배울 필요가 없으며 언어의 모든 표현력을 사용할 수 있습니다. lit-html은 문자열, DOM 노드, 배열 등 다양한 종류의 값을 기본적으로 지원합니다. 템플릿 자체는 계산되고, 함수 간에 전달되며, 중첩될 수 있는 값입니다.
- 확장 가능: lit-html은 맞춤설정 및 확장도 가능합니다. 나만의 템플릿 구성 키트라고 할 수 있습니다. 지시어는 값이 처리되는 방식을 맞춤설정하여 비동기 값, 효율적인 키 반복, 오류 경계 등을 허용합니다. lit-html에는 즉시 사용할 수 있는 여러 지시어가 포함되어 있으며 자체 지시어를 쉽게 정의할 수 있습니다.
이미 여러 라이브러리와 프로젝트에서 lit-html을 통합했습니다. 이러한 라이브러리의 목록은 GitHub의 awesome-lit-html 저장소에서 확인할 수 있습니다.
템플릿만 필요한 경우 지금 lit-html 문서를 시작할 수 있습니다. 앱에서 사용하거나 팀과 공유할 구성요소를 빌드하려면 계속해서 자세히 알아보세요.
LitElement: 가벼운 웹 구성요소 기본 클래스
LitElement는 웹 구성요소를 빌드하고 공유하는 작업을 그 어느 때보다 쉽게 해주는 가벼운 기본 클래스입니다.
LitElement는 lit-html을 사용하여 구성요소를 렌더링하고 반응형 속성과 속성을 선언하는 API를 추가합니다. 요소의 속성이 변경되면 요소가 자동으로 업데이트됩니다. 또한 대조 없이 빠르게 업데이트됩니다.
다음은 TypeScript의 간단한 LitElement 구성요소입니다.
@customElement('name-tag')
class NameTag extends LitElement {
@property()
name = 'a secret';
render() {
return html`<p>Hi, my name is ${this.name}!</p>`;
}
}
훌륭한 Vanilla JavaScript API도 있습니다.
이렇게 하면 일반 HTML 요소를 사용하는 모든 위치에서 사용할 수 있는 요소가 생성됩니다.
<name-tag name="Ida"></name-tag>
이미 웹 구성요소를 사용하고 있다면 이제 Chrome, Safari, Firefox에서 기본적으로 지원된다는 소식을 반가워하실 것입니다. Edge 지원이 곧 제공될 예정이며, 폴리필은 기존 브라우저 버전에만 필요합니다.
웹 구성요소를 처음 사용하는 경우 사용해 보세요. 웹 구성요소를 사용하면 다른 라이브러리, 도구, 프레임워크와 상호 운용할 수 있는 방식으로 HTML을 확장할 수 있습니다. 따라서 대규모 조직 내에서 UI 요소를 공유하거나, 웹 어디서나 사용할 수 있도록 구성요소를 게시하거나, Material Design과 같은 UI 디자인 시스템을 빌드하는 데 적합합니다.
기본 문서, CMS, 마크다운 또는 React 및 Vue와 같은 프레임워크로 빌드된 뷰 등 HTML을 사용하는 모든 곳에서 커스텀 요소를 사용할 수 있습니다. 또한 LitElement 구성요소를 다른 웹 구성요소와 혼합하여 사용할 수 있습니다. 이러한 웹 구성요소는 기존 웹 기술을 사용하여 작성되었거나 Salesforce Lightning Web Components, Ionic의 Stencil, SkateJS 또는 Polymer 라이브러리와 같은 도구를 사용하여 만들어졌을 수 있습니다.
시작하기
lit-html 및 LitElement를 사용해 보고 싶으신가요? LitElement 튜토리얼부터 시작하는 것이 좋습니다.
lit-html을 단독으로 사용하거나 lit-html 템플릿을 다른 프로젝트에 통합하려면 lit-html 문서를 참고하세요.
항상 그렇듯이 여러분의 의견을 기다리고 있습니다. Slack 또는 Twitter에서 문의하실 수 있습니다. 당사의 프로젝트는 물론 오픈소스이며 GitHub에서 버그를 신고하거나 기능 요청을 제출하거나 개선사항을 제안할 수 있습니다.