Lit / Lit-element

프론트엔드 작업을 시작하면서 다양한 웹 컴포넌트 프레임워크가 있었다.

React / Vue / Angular 등등 

요즘은 Svelte가 좀 핫하다. Next.js, Nuxt 같은 SvelteKit도 나왔으니 한번쯤 사용해 볼 법 하다.

 

내가 만든 서비스 banpick.kr / ggscrim.com

둘 다 'Lit' 을 사용했다.

lit.dev

Lit

https://github.com/lit/lit/

GitHub - lit/lit: Lit is a simple library for building fast, lightweight web components.

 

 

왜 Lit을 선택했을까? 

취업을 위해서는 React / Vue 를 써야 했겠지만, 나는 Lit을 선택했다.

놀랍게도 lit은 구글이 만든 웹 프레임워크다.

 

구글이 만들었기 때문에 사용한 것은 아니었고 Lit을 선택한 이유는 '속도' 때문이었다.

 

내 서비스는 1초 0.5초가 중요하고 화면전환이 잦은 서비스이다.

팀을 구성하고 팀원을 스카웃하고 팀에게 가입 신청하고 

다른 팀과 대전 신청을 하고 다른 팀과 대전을 수락하고 등등 

 

Banpick 으로 가게되면 0초에서 밴픽이 진행되는 경우가 많고 남은 선택 시간 변수와 화면에 보이는 숫자 간 지연이 없어야하고

최대 10명의 사람들과 지연 없이 동일한 밴픽 화면을 볼 수 있도록 

통신 시간에도 신경을 써야하고 소켓간 데이터 전달 및 화면 재 렌더링에 신경을 써야했다.

 

그렇기에  '속도' 와 '메모리' 에 대한 가치를 우선적으로 선택했다.

 

lit

 

Lit은 Vanilla JS로 구성되어 있으며 기본적으로 Shadow-dom을 채택하고 있다.

화면이 다시 렌더링 될 때 모든 돔을 고려하는 Virtual Dom 과는 달리 

동적인 요소가 변경되는 Shadow-dom 만을 고려해 렌더링한다.

 

또한, Template literals 를 기본 문법으로 사용하여 동적인 부분, 정적인 부분을 분류한다.

예를들어, 

@property({ type: String }) name: string = 'JIN WOOK';

<span>My name is ${name}</span>

와 같이 사용한다.

동적인 부분만 비교를 하니 React / Vue / Angular 와 메모리를 아낄 수 있다.

또한, DOM의 크기와 동일한 Virtual DOM을 메모리에 유지시키면서 관리해야하기 때문에 메모리 사용량은 Lit 쪽에 훨씬 적다.

 

이 처럼, 동적인 부분만 비교를 하면서 Shadow-dom만 다시 렌더링을 하는 Lit은 다른 프레임워크에 비해 

메모리 사용량도 적고, 속도도 빠르다.

 

아래는 Line 개발 블로그에서 가져온 자료이다.

출처 : https://engineering.linecorp.com/en/blog/the-baseline-for-web-development-in-2022/

The baseline for web development in 2022

 

추가로 Shadow-dom은 독립적인 CSS 를 가진다. Scoped CSS 라고도 하는데 

컴포넌트 별로 독립적인 CSS를 구성하기에 html 태그의 class나 name이 같을까봐 걱정하거나 

!important 가 덕지덕지 붙어있는 CSS를 미연에 방지할 수 있다.

매번 새로 써야한다고 걱정이 된다면, 공통적인 부분을 작성하는 CSS를 두고 불러오면 된다.

import boardDetailStyle from '../../style/page/sd.board.detail.module.css';

 

 

장점만 있는 기술은 없다. 

손꼽히는 단점으로,

1. 대부분의 회사에서 React / Vue 를 사용한다.  

그렇기에 이직을 했을 때 새로 배워야 한다는 점이 있다. 

 

2. 정보를 찾기가 어렵다.

Lit 사용자 수는 굉장히 적다.

그렇기에 정보를 찾기도 어렵고 창구도 적다.

 

3. 영어를 잘 해야한다.

정보가 적기에 공식 문서를 이용해야하는데, 영어 독해 능력이 없다면 

굉장히 부담스럽고 꺼려질 것이다.

필요한 기능을 찾기도 힘들것이고 응용은 더더욱 .. 

 

 

어떤 기술이든 근본이 되는 기술은 같고 

필요에 의해 새로운 기술들이 나온다고 생각한다.

 

여러 장단점을 트레이드 오프 하여 적절한 기술을 선택할 수 있기를