web-components

Custom Elements는 사용자 HTML Element를 만들게 해준다. 그리고 이는 DOM의 모든 기능을 다 사용 할 수 있다.기본적으로 두 가지 타입으로 생성한다.표준 HTML 요소를 상속하지 않은 Element. 요소는 상속하지 않지만 HTMLElement

Front End분야에서 Component 기반으로 설계하고 구현하는 방식의 개발 사이클로 많이 사용 되고 있다. 그리고 그런 개발 사이클의 유통에 React, Svelte, Vue 등의 UI Framework or Library가 상당한 기여를 하고 있는 점은 부정할

: 웹 컴포넌트의 특장점은 캡슐화이고 이를 통해 재사용 가능한 컴포넌트 제작을 쉽게 해준다.여기서 Shadow DOM이 핵심 기술로 사용된다.: Shadow DOM은 숨겨진 DOM 트리(Shadow tree)로 Shadow root에서 시작되어 원하는 어느 요소(Sha

: <template> 와 <slot>은 유연한 DOM 구조를 구현하게 해주는 elements로 물론, 단독 사용도 가능하지만, Shadow DOM과 함께 사용하면 재사용성 측면에서 주는 이점이 크다.<template> 의 경우 로드 시 직접 rende

: 이제 실제 앱을 웹 컴포넌트로 만들어 보면 더 좋을것 같아 해보려고 한다.처음 부터 시작하는것 보다는 이미 만들어져 있는 앱을 변경하며 차이점을 보는것이 좋아 보여 아래와 같은 간단한 그림판 도구를 바꿔 보려한다. 먼저 위 그림의 html 모양은 이런식이다.먼저 크