# lit-element
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