[백업][가리사니] svelte, vue, react 사용기

javascript, reactjs, svelte, typescript, vue.js

박용서 • 2022-04-19

이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.

필자는 프론트 개발자가 아니라서 프론트에 대한 생각이 프론트 개발자와 다를 수 있습니다. 낮은 진입 장벽, 쉬운 사용, 유지보수 관점에서만 살펴봅니다.

서론

2000년대 만해도 라이브러리는 무조건 만들어 써야 한다는 생각을 가지고 있어서 직접 만들어서 사용하다가.

어느새 모바일 시대가 되었고, 제이쿼리 정도만 있던 시장이 폭발적으로 성장합니다.

그 동안 너무 고립되어 있던 것 같아, 각종 라이브러리/프레임워크를 써보기로 했습니다.

가리사니는 기존에 직접 만들었던 라온 라이브러리를 사용 하여 템플릿 엔진을 구성하였는데.. 이를 리액트를 사용하여 바꾸게 되었습니다.

전체적으로 너무 로우하다.
- 예전에 openGL을 잠깐 써본적이 있어서 draw 를 따로 두고 쓰는 건 어느정도 익숙했지만… 이미 하이앤드인 웹에서 왜??? 굳이??? 라는 느낌?
자체적인 문법에 거부감이 있는 편 예를들어 className 이 그러한 경우인데. class가 예약어 인 것은 알지만 하이엔드에서 그런 것까지 신경 써야 하나 싶었다.
코드와 뷰가 혼재 되어 있어서 가독성이 매우 떨어졌다.

그렇게 사이트를 운영하다가 3~4년이 지나 사이트를 손 좀 보려고 했는데.. 리액트 문법을 까먹고 나니 굳이 그럴 바에 다른 라이브러리를 쓰는 게 낫지 않을까 하게 되었습니다.

가리사니 리뉴얼에 앞서 운영 중이던 애니시아 라는 사이트를 시범 삼아 리뉴얼 해보기로 하였습니다.

소스코드는 아래에 공개하였습니다.

html 원형 손상이 적고 자동으로 값을 바꿔주는 것이 혁신적 이였다.
@keyup.enter 같이 지저분하게 쓸만한 것을 간단하게 표시하기 편했다.
vue의 문법이 html 에 잘 녹아들었지만 v-if / v-for 같은것이 눈에 잘 들어오지 않는다.
v-for에서 key지정이 매우 귀찮다.
일부이벤트 (키이벤트)는 input / textarea 에서만 되고 일반 div같은데에서 키이벤트를 사용하기 위해서는 vue.js가 제공하는 방법이 아닌 일반적인 방법으로 이벤트를 생성해야한다…..
element에 직접 접근하는 경우는 new CustomEvent()를 써야하는데, 좀더 우아한 방법이 있지 않았을까 싶다.
컴포넌트 선언이 너무 비대해진다.
- 이 문제는 vue 3.0에서 컴포지션 api에서 어느정도 해결된다.
- 다만 ref.value 등으로 접근 해야 하는 것이 매우 귀찮다.

뜬금 없이 가리사니의 프론트를 스벨트로 다시 만들었습니다.

정말 단순하다 vue 보다도 훨씬 단순하다.
Vue와 달리 #if 같은 문법을 사용하는데, 의외로 눈에 띄어서 가독성이 좋다.
배열 내 노드에 식별 key를 지정하지 않아도 된다. (버추얼 돔 X)
React Js, Vue.js 와 달리 SPA-라우팅 기능을 공식적으로 지원해 주지 않는다.
- 문제는 제대로된 플러그인도 존재하지 않는다..
  - 여러가지 라이브러리가 있었지만 다들 버그가 많이 있는 편이다.
  - (예를 들어 페이지를 벗어났는데도 이벤트가 계속 실행 된다던지…)
뷰와 마찬가지로 element에 직접 접근 시 new CustomEvent() 사용해야한다.
- 원리는 알겠지만 뭔가 더 편리하고 직관적인 기능을 지원 할 수도 있지 않았을까…
그 밖에도 기능이 너무 없다.
$: (유사 watch) 사용이 은근히 까다롭다.
스토어를 unuse 처리하지 않으면 onDestroy 이후에도 살아있다.

다음 문서에서 이어집니다.