# lit html
리액트는 항상 옳을까?
주니어 프런트엔드 개발자, 리액트의 중심에서 반리액트를 외치다? 바닐라 자바스크립트를 사용하던 과거의 제가 리액트를 선택한 이유에는 다음과 같은 이유에서였습니다. 비즈니스 로직과 렌더링 로직(돔 요소를 직접 수정하기)이 혼합되지 않는다. 상태 변화에 따른 화면 업데이트가 일방향적이다. 가상돔을 이용하여 빠르게 화면을 업데이트한다. 뷰나 앵귤러와 달리 자유도가 높다. 실제로 리액트의 다운로드 수는 나날이 증가하고 있으며, 증가세에는 가속도가 붙어 앵귤러와 뷰와의 격차를 점차 더 벌리고 있습니다. | 앵귤러, 리액트, 뷰의 다운로드 수 비교 | | :-: | | 다운로드수 비교 | 리액트의 인기가 높아진 지금, 한번 멈춰서 생각해봅시다. 오늘은 리액트의 렌더링 방식을
lit-html
https://lit.dev/ lit은 빠르고 가벼운 web components를 구축하기 위한 간단한 라이브러리 (lit 라이브러리 사용해서 web component 쉬운 문법으로 구현 (like 과거 polymer)) lit의 구성 요소는 표준 web component, 각 lit 컴포넌트는 UI의 독립형 단위 Lit 구성 요소는 HTML 요소이므로 모든 표준 요소 API를 가지고 있음 주요 기능 HTMLElement의 편리하고 다용도 확장인 LitElement 기본 클래스에서 확장하여 자신의 구성요소 정의 템플릿 https://lit.dev/docs/templates/overview/ 반응형 속성 https://lit.dev/docs/components/properties/ 기본 scoped stlye https://lit.dev/docs/components/styles/ 개발중 컴파일이나 빌드가 필요하지 않음 두가지 주요 API The html t
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
Lit-html 어떠세요??
서론 7 FrontEnd JavaScript Trends and Tools You Should Know for 2020에서 글을 보면서 Lit-html, stenciljs,svelte,bit등을 처음 접하고 더 빠르고 쉬운 개발, 재사용성을 위한 노력은 끝이 없다는 것을 감탄하며 위에 것들을 한번씩 사용하기로 했어요.🔥 벨로그를 보다보면 Svelte에 관한 글을 자주 보이고, 커뮤니티에서도 자주 거론 되는 것 같은데, Lit-html에 대해서는 사람들이 잘 모르는 것 같더라구요. 하지만 Npm tr