Vue 2 에서 Svelte 로 이관하기

• 2년간 Vue2 를 사용해왔는데, 이제 더 이상 유지 보수 안된다고 해서 이관을 결정
• Vue 3 와 Svelte 에서 고민하다가 Svelte로 가기로 한 이유를 정리

Svelte 와 Vue 3 비교

• JS 개발자 설문조사에서 Svelte 의 리텐션이 더 좋음
• Svelte가
  • Type 지원이 더 훌륭하고, 글로벌 억세스를 제한
  • (개인적으로) 문법이 더 우아하고 사용자 친화적
  • <template> 같은 추가 HTML이 필요없이 그냥 사용 가능
  • 스타일이 자동적으로 scope 처리됨
  • 데이터를 업데이트 하기 위해서 계산속성을 필요로 하지 않음. 그냥 => 함수만 작성하면 됨
  • 순수 JS 플러그인을 추가하기가 더 간단함
  • 가상 DOM 없이 컴파일. 더 최적화 되고 빠른 태스크 완료 가능
  • 선언된 변수를 통해서 데이터 자동 업데이트 가능

Svelte도 단점은 있음

• 상대적으로 작은 커뮤니티(2019년에 나왔으므로)

어떤 방법으로 이관 했나?

• 언제 : 앱을 사용하는 사람이 적어진 8월에 마이그레이션 진행
• 소요시간 : 모든 파일을 Vue 에서 Svelte로 이관하는데 2주 소요
• 개발자 수: 2명의 프론트엔드 개발자가 2주간 풀타임으로 작업하고 다른 한명은 1주간 풀타임 투입해서 총 3명
• 워크플로우 : Notion으로 개발자들에게 티켓 부여하고, 새 컴포넌트는 Storybook에 작성, 각 개발자가 정해진 페이지들을 Svelte로 재작성
• 스타트업이라 작업할 파일이 수천개는 아니어서 작업하기는 간단했음
  다만, SvelteKit이 아직 활발히 개발중일때 위험을 무릅쓰고 이관을 해서, 이동 한달만에 대대적인 변경을 수행해야 했음. 하지만 Sveltekit 팀이 훌륭한 마이그레이션 가이드를 제공해서 쉽게 새 업데이트에 적응 가능했음. 9월에 SvelteKit팀이 프레임워크가 드디어 RC단계에 접어들었다고 해서 이제 안정성도 보장
• 파일 & 컴포넌트 구성 : SvelteKit의 "folder-based routing"이 많은 걸 가져다 주었음. 각 페이지들을 서브페이지로 분할해서, 표준 변수 명인 "loading" "submit" 같은 것을 재사용 가능. 게다가 레이아웃이 관련된 라우트에 통합되어, 억세스가 더 간단.

뭘 얻었나 ?

• 더 향상되고 부드러운 성능
• 더 나은 개발자 경험
• 빠른 코드 실행
• SSR 가동 및 운영
• 간결하고 이해하기 쉬운 코드
• 타입 체킹 오류 해결