Vue3를 사용해 보자!

1. Vue로 뭔가를 만들자

원래 Svelte로 사이드를 하나 진행하고 있는게 있었는데,

긴급하게 무언가를 제작해야 할 일이 생겼다. 약 2주간 진행하는 프로젝트이고 리액트보다 빠른 무언가를 찾아야 할 필요가 있었다.

1. 리액트보다 빠른 개발속도 -> 더 적은 코드량!
2. 예전에 개발된 백엔드가 이미 있음.

두 가지를 만족하기 위해서

1. 리액트(전에 잠깐 해본 바 있는 Jotai와 React-Query)
2. Svelte(요즘 해보고있음)
3. Vue(2를 조금 해보았음.)

의 선택지에서 여러가지 기능을 빠르게 작업해야 할 경우 외부 라이브러리의 사용이 필수적이기 때문에 Vue 3로 진행하게 되었다. 잠깐 튜토리얼을 보았을때 Svelte와도 아주 유사하기도 했고...

2. Vue는 진짜로 리액트보다 개발속도가 빠를까?

이것도 좋지만, 더 나은방법이 있을거야!

테스트를 위해서 간단한 페이지 하나를 제작해보기로 한다.

키워드 기반 검색 바를 만들었다. 인풋에 입력하고 엔터를 입력하면 해당 키워드가 버블의 형태로 나타난다.

비교를 위해서 Vue와 Pinia 스토어, 리액트와 Jotai, React-Query를 사용한 프로젝트를 하나씩 만들어 비교해 보았다.

// 위 예시 input 코드

<div v-if="keywords.length" class="flex gap-y-2 w-[100%]">
  <TransitionGroup name="list" tag="ul" class="flex flex-wrap gap-x-4 gap-y-2 w-[100%] px-12 py-2 items-center">
  <KeywordButton v-for="(keyword, index) in   keywords" :key="index" :selected="true" :deleteKeyword="deleteKeyword" :i="index" :keyword="keyword"><span>{{ keyword }}</span></KeywordButton>
  </TransitionGroup>
</div>

vue의 코드량: 총 572자.

// 위 예시 input 코드

{keywords.length ? (
  <TransitionGroup>
    {keywords.map((e, i) => {
      return (
		<CSSTransition key={e.id} nodeRef={e.nodeRef} timeout={500} classNames="item">
		  <div ref={e.nodeRef}>
			<KeywordButton											
              selected	deleteByIndex={deleteKeyword} i
			  className="p-4 h-[30px] flex justify-center items-center">
				<span>{e.value}</span>
			</KeywordButton>
          </div>
		</CSSTransition>
  );
})}

리액트의 코드량: 664

vs code counter 플러그인으로 확인했을 때 90자 정도가 작았다.
위의 snippet에서도 알 수 있듯이, for loop으로 렌더링 할때 코드의 차이가 꽤나 크게 나는 것을 알 수 있었다.

이외에도 이틀간 사용해보았을 때

1. 고유 문법의 길이 자체가 짧음.
2. Transition을 내부 api로 제공함.
3. WatchEffect와 Emits를 사용한 Two way-binding이 더욱 간단함.

하지만

1. 외부 라이브러리를 사용했을 때 당연히 리액트보다 양과 질이 떨어질 것임.
2. React Dev Tool을 사용할 수 없음.
3. 인터넷에서의 레퍼런스가 부족함(검색이 힘들어)

와 같은 단점을 무시할 수는 없다고 생각한다.

앞으로 작업을 더 진행해 나가면서 더 적을 내용이 있을거라고 생각한다.