웹 컴포넌트(5) — lit-html로 리엑트처럼 코딩하기

웹 컴포넌트(5) — lit-html로 리엑트처럼 코딩하기

커스텀 엘리먼트와 쉐도우 돔 그리고 lit-html을 사용하여 웹 컴포넌트 TODO앱을 만들어 본다. 이 방식으로 여러분은 익숙한 리엑트와 같은 방식으로 웹 컴포넌트 앱을 작성할 수 있다. lit-html은 단지 25kb를 차지할 뿐이며, 모든 코드는 #useThePlatform의 모토를 따라 브라우저 표준을 따른다.

웹 컴포넌트(4) — 템플릿 엘리먼트(Template Element)와 HTML Imports

웹 컴포넌트(4) — 템플릿 엘리먼트(Template Element)와 HTML Imports

웹 컴포넌트의 표준으로서 템플릿 엘리먼트(Template Element)와 HTML Import가 필요한 이유, 그리고 이 두 표준이 어려움을 겪고 있는 사연. 이에 새로이 대두되고 있는 ES6 템플릿 리터럴을 이용한 솔루션을 소개한다. 이 이야기를 자바스크립트에서 HTML 템플릿의 변화로 이야기한다.

웹 컴포넌트(2) — 커스텀 엘리먼트(Custom Element)

웹 컴포넌트(2) — 커스텀 엘리먼트(Custom Element)

우리는 DOM을 조작하기 위해 자바스크립트를 사용하고 있다. 마치 DOM으로 이루어진 마리오네트 인형을 자바스크립트로 조작하듯 말이다. 커스텀 엘리먼트는 자바스크립트로 엘리먼트를 확장할 수 있는 방법을 제공한다. 커스텀 엘리먼트는 엘리먼트에 의미있는 이름을 부여하고, 자바스크립트와 엘리먼트의 자연스러운 통합 방법이다.