# 웹 컴포넌트
(번역) 리액트 웹 컴포넌트로 디자인 시스템 구축하기
원문: https://www.voorhoede.nl/en/blog/building-design-system-react-web-components/ > 리액트로 범용 디자인 시스템을 구축하여 모든 웹 애플리케이션이나 프레임워크에서 사용할 수 있다면 어떨까요? 우리는 리액트를 웹 컴포넌트로 컴파일하여 이를 달성했습니다. 저희의 방법을 함께 살펴보시죠. 고객에게 디자인 시스템을 제공하기 위해 컴포넌트를 한 번 작성하고 다른 웹 프레임워크로 구축된 여러 웹 애플리케이션에서 사용할 수 있는 범용 솔루션이 필요했습니다. 하나의 프레임워크(리액트)에서 컴포넌트를 작성하고 래퍼, 폴리필, 툴링을 조합하여 모든 컨텍스트에서 작동하도록 하는 간단한 아이디
Vanilla Javascript 웹 컴포넌트 이해하기
틀린 부분이 있을 수 있으니 맹목적으로 믿지는 말아 주시기 바랍니다. 명령형UI의 문제점과 선언형 UI 내가 웹 개발에 입문 했을 때는 선언형 UI가 React, Vue를 필두로 선언형 UI의 유행이 시작이 좀 되고난 후 였다. 선언형 UI가 왜 유행이 되었는가를 알아보기 위해서는 명령형 UI가 가지고 있던 문제점을 알아봐야 한다. 명령형 UI 예제 명령형 UI란 위 코드처럼 UI를 변경하기 위한 작업을 명령을 하나씩 하나씩 내리는 것을 말한다. DOM을 가져온다. DOM의 텍스트를 바꾼다. (기타 처리 등등) 이러한 방식의 프로그래밍 방식은 코드를 직접 이해하기는 쉽지만 UI가 복잡해짐에 따라 코드가 서로 엉키기 쉬운 구조로 많이 바뀌었다고 한다. 6개월 전에 짠 복잡한 UI의 선언형 코드를 유지보수해야 한다면 쉽지는 않을 것이다. 이러한 불편함을 개선하기 위해 나온 방식이 선언형 UI이다. 선언형 UI 예제 위 코드는 React로 만들어
바닐라 자바스크립트로 웹 컴포넌트 구현하기
왜 자스로 웹 컴포넌트를 만들게 되었나.. html, css, javascript를 활용한 SPA 만들기 두 번째 미션을 진행했다. 첫 번째 미션에서는 흔히 알려진 템플릿 메서드를 활용하여 구현했었는데 그렇게 구현하다보니 렌더링 최적화를 구현하는데 많은 어려움을 겪었고 오버라이딩 되는 문제가 발생했다. 그리고 상위컴포넌트의 상태를 변경하기 위해서는 setState를 props로 this 바인딩하여 넘겨주다보니 props Driling 문제도 발생했다. 첫 번째 미션을 어떻게 구현했는지 보고 싶다면 여기를 참고하라. 그래서 이번 미션에서는 Custom Element를 활용한 웹 컴포넌트를 만들어보기로 했다. 커스텀 이벤트를 생성하여 이벤트 버블링으로 props Driling없이 상위 컴포넌트에 인자를 넘겨줄 수 있다는 장점이 매력적이었기 때문이다. 그리고 최근
[웹 컴포넌트] 기존 앱 전환 구현 - Children
들어가며 : 웹 컴포넌트에서 자식 컴포넌트를 가지는 경우 부모 컴포넌트는 어떻게 구현해야 할까? 일단 먼저 아래와 같은 구조를 가진 HTML이 있다고 하자. : 앞 포스팅에서 color-button 컴포넌트를 제작 하여 나열 하는것 까지 진행 했다. 여기서 drawing-canvas 컴포넌트를 구현하고 그 canvas에 선을 그릴 도구 모음을 하나의 컨테이너에 담는 구조로 만드는 것이 좋아 보인다. tool-container 컴포넌트를 만들고 자식으로 `도구 컴포넌트
웹 컴포넌트를 알아보자
❗️ 웹 컴포넌트를 들어가기에 앞서.. 현대의 어플리케이션이 점점 커지고 복잡해지면서 컴포넌트 기반 아키텍처가 등장하였습니다. > 컴포넌트 기반 아키텍처란? 복잡한 소프트웨어를 간단한 부분들로 나누고 조립하는 과정을 통해 어플리케이션을 만드는 것으로, 웹 UI 라이브러리의 React가 대표적인 예입니다. 아래의 트위터 예시를 살펴봅시다. 위 트위터는 다음과 같은 컴포넌트들로 구성되어 있습니다. 상단 내비게이션 사용자 정보 추천 팔로우 글쓰기 양식 메시지들(6, 7 포함) > 트위터라는 큰 어플리케이션을 컴포넌트 단위로 나누어 간단한 컴포넌트부터 개발한다면 조금 더 개발이 수월해질 것입니다. 🌟 컴포넌트가 갖추어야 할 것 고유한
[크롬 익스텐션 개발기] - 웹 컴포넌트 문제
문제 content_script.js > content_script에서 위와 같이 customElements를 사용하려고 하면 아래의 문제를 확인할 수 있다. 원인 분석 일반적인 html/css/js 에서는 customElements가 위와 같이 정상적으로 있지만 크롬 익스텐션에는 아직 지원하지 않는다. 참고 링크 [Issue 390807: Content scripts can't define custom elements](https://bugs.chromium.org/p/chr
lit-프로젝트 시작하기 - (6/6) - 라우팅
웹 컴포넌트에서 라우팅을 하는 법을 알아보도록 하겠습니다. 기존의 라우팅 처럼 해당 페이지를 불러와서 렌더링 한다기 보다, 웹 컴포넌트를 교체하는 방식이라고 생각하시면 편할거라 생각합니다. 라우팅을 하기위해 '@vaadin/router'라는 라이브러리를 설치하도록 하겠습니다. >yarn add @vaadin/router '@vaadin/router'는 A CLIENT-SIDE ROUTER FOR WEB COMPONENTS, 웹 컴포넌트를 위한 클라이언트 사이드 라우터 입니다. 이전에는 'index.html'안에 웹 컴포넌트를 직접 불러와 사용하였지만 '@vaadin/router'를 사용하여 웹 컴포넌트를 교체하도록 하겠습니다. 'index.html'에 ``컴포넌트를 만들도록 하겠습니다. index.html 앞에서 만든 ``태그를 라우터로 만들어 내부에 웹 컴포넌트를 불러오도록 하겠습니다. **
lit-프로젝트 시작하기 - (5/6) - with.redux
블로그에서 보기 : https://lit-blog.vercel.app/post/lit-tutorial-5 lit-프로젝트에 전역 형상 관리를 위하여 redux(리덕스)를 사용하도록 하겠습니다. 리덕스를 사용하는데 필요한 라이브러리들을 설치해 주도록 하겠습니다. >yarn add redux @reduxjs/toolkit pwa-helpers 리덕스 툴킷을 이용하여 간단하게 스토어와 간단한 모듈을 만들도록 하겠습니다. 'pwa-helpers'는 컴포넌트에 스토어를 connect 하는 함수를 제공합니다. 리덕스 스토어 만들기 store/vegetable.ts store/index.ts (option)리덕스 사가 사용하기 redux-saga를 사용하길 원한다면 다음과 같이 saga를 실행할 코드를 추가해 주세요. 리덕스 스토어 연결하기 리덕스를 사용할 컴포넌트에서 다음과 같이 connect를 해주도록 합니다. **pages/lit
lit 프로젝트 시작하기 (4/6) - 바인딩
블로그에서 보기 : https://lit-blog.vercel.app/post/lit-tutorial-4 이번 포스팅에는 LitElement에서 바인딩(bind) 하는 것을 알아보도록 하겠습니다. lit-html에서는 엘리먼트에 자바스크립트 표현식을 바인딩 하는 방법이 특별합니다. > lit-html-biding 예제를 통해 살펴보도록 하겠습니다. element property `` 태그에 값을 변경하고 저장할 수 있도록 value와 change 이벤트를 넣어주도록 하겠습니다. `태그에 .value라는 값으로 value property를 넣어주었습니다. 여기서 속성에 ' . '이 붙어있다면 값은 `태그의 value property에 바인딩 되게 됨을 의미합니다. ' . '은
lit 프로젝트 시작하기 (3/6) - LifeCycle
블로그에서 보기 : https://lit-blog.vercel.app/post/lit-tutorial-3 LitElement의 라이프사이클에 대해 다뤄보도록 하겠습니다. 모든 라이프사이클 메서드에서는 super를 사용하여야 하는것을 유의하여야 합니다. lit-element는 웹 컴포넌트의 기본 라이프사이클을 상속하게 됩니다. > 웹 컴포넌트 라이프사이클 웹 컴포넌트 라이프 사이클 웹 컴포넌트의 기본 라이프사이클은 다음과 같습니다. >connectedCallback: 커스텀 엘리먼트가 문서의 DOM에 처음 연결될 때 호출됩니다. >disconnectedCallbac
lit 프로젝트 시작하기 (2/6) - property
블로그에서 보기 : https://lit-blog.vercel.app/post/lit-tutorial-2 이전 포스팅에서 lit-project를 설치하여 lit-element를 사용하여 커스텀 엘리먼트가 만들어 지는 것을 보았습니다. 이번포스팅 에서는 엘리먼트의 property를 사용하여 템플릿을 업데이트하며 property의 옵션들을 살펴보도록 하겠습니다. properties lit-element에서 템플릿을 정의할때 property를 템플릿에 바인딩 할 수 있으며, 속성이 변경 될 때 마다 템플릿 이 변경 됩니다. pages/lit-tomato.ts static get properties()를 사용하여 엘리먼트의 property를 선언 할 수 있습니다. name이라는 property를 선언하였고 name property를 html 템플릿에 바인딩 하였습니다. 후에 name이 변경된다면 html 템플릿도 변경 되게 됩니다. property 초기화 선언된 p
lit-프로젝트 시작하기 - (1/6) - lit-element
블로그에서 보기 : https://jerrynim.dev/post/lit-tutorial-1 안녕하세요. 작년에 lit-html을 소개하는 li-html 어떠세요??을 올리고, 웹 컴포넌트 개발에 대한 관심만 가지고 있다가 그디어 lit-html을 사용하여 웹 컴포넌트 개발을 해보게 되었습니다. 웹 컴포넌트 왜 사용할까? 웹 컴포넌트는 웹 표준 기반을 준수하여 Html, Css, Javascript 로 만들어진 재사용 가능한 캡슐화 된 컴포넌트 입니다. 다음 링크는 웹 컴포넌트를 사용하는 이유를 알려주고 있습니다. [왜 Web Component가 중요한가](https://han41858.tistory.com/15#:~:text=%EC%9B%B9%20%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%8A%94%20%EC%9A%B0%EB%A6%AC