# web-components
[웹 컴포넌트] 기존 앱 전환 구현 - Children
: 웹 컴포넌트에서 자식 컴포넌트를 가지는 경우 부모 컴포넌트는 어떻게 구현해야 할까?일단 먼저 아래와 같은 구조를 가진 HTML이 있다고 하자.: 앞 포스팅에서 color-button 컴포넌트를 제작 하여 나열 하는것 까지 진행 했다.여기서 drawing-canvas
Web Components
https://lit.dev/github web components 로 개발mdn : https://developer.mozilla.org/en-US/docs/Web/Web_Components컴포넌트란?고유한 자바스크립트 클래스외부코드가 접근할 수 없
[웹 컴포넌트] 기존 앱 전환 구현 - 컴포넌트
: 이제 실제 앱을 웹 컴포넌트로 만들어 보면 더 좋을것 같아 해보려고 한다.처음 부터 시작하는것 보다는 이미 만들어져 있는 앱을 변경하며 차이점을 보는것이 좋아 보여 아래와 같은 간단한 그림판 도구를 바꿔 보려한다. 먼저 위 그림의 html 모양은 이런식이다.먼저 크
[웹 컴포넌트] Template and Slot
: <template> 와 <slot>은 유연한 DOM 구조를 구현하게 해주는 elements로 물론, 단독 사용도 가능하지만, Shadow DOM과 함께 사용하면 재사용성 측면에서 주는 이점이 크다.<template> 의 경우 로드 시 직접 rende
[웹 컴포넌트] Shadow DOM
: 웹 컴포넌트의 특장점은 캡슐화이고 이를 통해 재사용 가능한 컴포넌트 제작을 쉽게 해준다.여기서 Shadow DOM이 핵심 기술로 사용된다.: Shadow DOM은 숨겨진 DOM 트리(Shadow tree)로 Shadow root에서 시작되어 원하는 어느 요소(Sha
[웹 컴포넌트] Custom Elements
Custom Elements는 사용자 HTML Element를 만들게 해준다. 그리고 이는 DOM의 모든 기능을 다 사용 할 수 있다.기본적으로 두 가지 타입으로 생성한다.표준 HTML 요소를 상속하지 않은 Element. 요소는 상속하지 않지만 HTMLElement
[웹 컴포넌트] 기본 개념
Front End분야에서 Component 기반으로 설계하고 구현하는 방식의 개발 사이클로 많이 사용 되고 있다. 그리고 그런 개발 사이클의 유통에 React, Svelte, Vue 등의 UI Framework or Library가 상당한 기여를 하고 있는 점은 부정할
# Web Components
Web Component : 반복해서 쓰는 태그 뭉치들을 커스텀 태그로 축약해서 쓸 수 있다. 브라우저의 기본 기능 중 하나. class를 이용해 만듦. -> 긴 HTML도 함수처럼 재사용이 가능하다. 상식) 웹개발을 잘하기 위해서는 브라우저 기능을 잘 알아야 한다.
VanillaJS
컴포넌트 단위로 구현을 해보니 React의 클래스형 컴포넌트와 거의 흡사한 형태로 짜여지는거같다.기본 문법들이 조금씩 다른부분도 있지만 전체적인 데이터 흐름방식이나 단위단위로 쪼개서 구현하고 상위컴포넌트에서 구현하고 props를 내려주는 방식이 거의 일치한다.전체적으로
lit-프로젝트 시작하기 - (5/6) - with.redux
lit-프로젝트에 전역 형상 관리를 위하여 redux(리덕스)를 사용하도록 하겠습니다.
lit 프로젝트 시작하기 (2/6) - property
이번포스팅 에서는 엘리먼트의 property를 사용하여 템플릿을 업데이트하며 property의 옵션들을 살펴보도록 하겠습니다.
