- 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 가동 및 운영
- 간결하고 이해하기 쉬운 코드
- 타입 체킹 오류 해결