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

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

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

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

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

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

웹 컴포넌트(1) — Keep calm and #UseThePlatform

웹 컴포넌트(1) — Keep calm and #UseThePlatform

앵귤러, 리엑트, 뷰, 엠버... 프론트엔드 프레임워크들이 쏟아지고 있다. 이 프레임워크들은 효용을 주기도 하지만, 프론트엔드 코드를 무겁게 만들기도 한다. 구글은 #UseThePlatform이라는 구호로 프론트엔드를 쓰지 말고, 브라우저 자체를 프레임워크로서 쓰자는 제안을 한다. 웹 컴포넌트와 함께!