[fe] setting2

1. lit-html

lit-html을 패키징한 lit-element도 안쓰고 lit-html만 사용했으므로 사실상 렌더링 엔진만을 사용하고 나머지는

생각하면서 구조를 짜야해서 구조짜는데에 거의 80%의 시간만 든거 같다.

 

구조짜기전의 컨셉은 대강 다음과 같다.

1. custom element 적극 활용

2. 관심사의 집중 ( lib, view, app, component의 샅샅이 흩어지는 구조 수정 )

3. life cycle없이 실 렌더도 언제해줄지도 직접 제어

4. dom기존의 네이티브한 기능 그대로 이용

 

폴더 구조

 

*x: import X, 자체상태 O, 1급함수 X
*O: import O, 자체 상태 X
*L: import O, 자체 상태 O

/App *x
	- root rendering
/components *O
/customElements *O
/lib *L
/views *x
/utils *

 

 

하지만 spa router를 만들때 다음과 같은 문제가 발견되었다.

 

중첩된 라우팅을 만드려면 pushState 이벤트의 분리를 해야하는데 lit-html 에서 render 해주는 함수 자체도 다시 패키징해야했다. 이것은 결국 하나의 엔드포인트를 기준으로 부모 컴포넌트를 만드는 것이며 이 부모 컴포넌트로 자식 컴포넌트를 제어한다는 것을 의미한다 ( 익숙하게 사용하는 프레임워크랑 닮앗다. )

 

이것저것 만져보던 필자는 이걸 다시 깨닫고 익숙하게 사용하고 있는 프레임워크를 사용하기전에 다시한번 lit-html을 패키징해서 만들어진 lib인 lit-element를 훑어보았는데 shouldUpdate, preformUpdate, requestUpdate등의 라이프 사이클을 보며 결국 데이터의 바뀜 유무에 따른 업데이트 처리를 해줘야된다는 생각을 가지며 원시회기로 돌아왔다.

 

하지만 여태껏 삽질을 해오며 알게모르게 배워온것들이 많이 있다고 생각한다. 가끔 짜증도 나지만 이것도 삽질의 묘미라고 생각하며 다시한번 바퀴 재발명을 하기전에 시작부터 자동차를 만드는것이 아닌 작은 부품부터 만들어가며 넓혀가는것을 목표로 삼는것을 되새겼다.

 

이전에 잠깐 맛보았던 vue3.0이 개인적으로 react보다 좋았다고 생각되기에 한번 vue3.0으로 다시 만들어볼 예정이다.