Svelte - 최근 관심 갖고 있는 FE 프레임워크

https://svelte.dev/

Svelte • Cybernetically enhanced web apps

Svelte는 비교적 최근에 나온 프론트엔드 웹 프레임워크로 예제 소스를 보면 아주 간결하다는게 첫 인상입니다. 

하나의 SFC(Single File Component)에 HTML, CSS, JS를 모두 서술한다는 방식은 Vue와 비슷한 컨셉인데, Virtual DOM - 가상 돔(DOM)을 사용하지 않는다는 것이 가장 큰 특징인 것 같습니다. 그러다보니 리액트나 Vue와 비교했을때 소스가 매우 간결해보이는게 특징입니다.

 

물론 리액트가 거의 산업 표준처럼 자리잡아가는 와중에 Svelte와 같은 신생 프레임워크가 비집고 들어가기엔 너무 탄탄한 상황이지만, 리액트, Vue, Angular로 대표되는 프론트엔드 프레임워크 3대장의 자리를 넘보는 프레임워크로 주목받고 있는 것도 사실입니다.

---

앵귤러를 빼고 리액트와 뷰는 한번씩 간단한 To do list나 웹사이트를 만들어봤는데, 개인적으로 학습한 경험들을 이야기해보자면, Vue가 3번째 버전에 들어서면서 Option API 방식에서 생기는 문제를 해결하기 위해 Composition API로 대대적인 변화를 가하면서 뭔가 더 혼란스러워진 느낌이라 저같이 신규 진입하는 사람 입장에서는 영 혼란스럽기 짝이 없었습니다.

 

Composition API를 사용할것을 권고하면서도 기존 개발자들은 여전히 Option API에 친숙하다보니 강의나 책을 보아도 Option API를 알아야 Composition API도 이해하기 쉽다는 식으로 접근하다보니 같은걸 두번 배우는 효과가 나와 학습방향을 갈피를 잡기 어려운 느낌이었습니다.

 

책이나 강의를 보면 script 부분에서 setup을 넣느냐 마느냐에 따라 서술되는 방식이 다르다보니 혼란한 상태인데, 강좌를 봐도 강사들마다 스타일이 달라서 그래서 이걸 쓰라는거야 저걸 쓰라는거야? 갸우뚱하게 만드는 상황도 많았습니다. 

---

리액트를 학습하면서 가장 어려웠던 점은 리액트 그 자체보다 상태관리 도구에 대한 어려움이 컸던 것 같습니다. 리덕스가 너무 어려워서 리코일이나 Zustand와 같은 도구들을 만져봐도 아직 리덕스가 차지하는 비중이 커서 그런지 자료도 쉽게 구하기 어려웠습니다.

 

리코일은 페이스북에서 만든 공식 상태관리 라이브러리임에도 불구하고 아직 성숙하지 못한 느낌이었습니다. 무엇보다 리액트는 항상 뭔가 고민해야하는게 너무 많았어요.

 

개발 자체에 대한 고민이 아니라 쓸데 없이 너무 많은 라이브러리 속에서 무얼 골라 써야 하나 이게 참 고민이었습니다. 한참 진행하다보면 서로 궁합이 맞지 않는 라이브러리들이 있어서 애써만든걸 도로 뒤집어 엎어야하는 경우도 생겨서 마치 워드프레스로 홈페이지를 만들때 플러그인끼리 궁합을 맞추는 그 스트레스가 다시 찾아오는 느낌이었습니다. 

---

게다가 학습하는 입장에서는 내놓으라하는 리액트 고수들의 소스를 봤을때 서로 다른 코딩스타일, 서로 선호하는게 다른 라이브러리를 예시로 들어 설명하다보니 중구난방으로 혼선이 오기 쉬웠습니다. 너무 높은 자유도가 오히려 초보자에게 진입장벽을 높이는 상황이었죠. 

 

그래서 아예 일관된 코딩 스타일을 강제하는 편이 낫겠다는 생각이 들었고, 앵귤러를 생각했지만, 타입스크립트라는 장벽이 좀 거대했고, 그 다음으로 생각한게 Vue였는데, 위에서 설명했듯이 API의 변경으로 혼란이 가중된 상태였습니다. 그래서 결론적으로 눈에 들어온게 Svelte. 

---

Svelte도 물론 100% 만족스럽지는 않습니다.

Rich Harris라는 사람이 주도하는 소규모 오픈소스 라이브러리다보니 아직까지는 변경사항이 수시로 발생해서 스벨트에서 NEXT.js 역할을 하고 있는 Svelte kit 같은 경우엔 1년전 튜토리얼 조차 최신 내용과 좀 다른 부분이 생기고 있거든요. 최근에 Svelte kit의 라우팅 방식이 NEXT.js와 유사하게 폴더단위로 라우팅이 되도록 변화가 왔습니다.

 

그럼에도 불구하고 다른 프론트엔드 프레임워크보다는 학습곡선이 낮아보였습니다. 강좌 몇개 들어보고 예제 소스들을 보니 제가 필요한 것들은 구현할 수 있겠다 싶을정도였습니다. 더구나 Rich Harris가 NEXT.js로 유명한 Vercel에 합류하면서 스벨트에 대한 개발에 좀 더 시간을 할애할 수 있게 되었다고 발표하면서 관심이 더 높아지는 것 같습니다. 

 

스벨트의 가장 큰 단점은 아무래도 아직까지 내놓으라할 만한 대형프로젝트 실적이 없다는 평이 있습니다. 그럼에도 불구하고 개발자들에게 사랑받는건 아무래도 단순하고 심플하다는 점인 것 같습니다. 

SEO를 해결하기 위해서 Svelte kit을 사용해야하지만, 아직 개발도중이라 정적사이트 생성 도구 Astro를 이용해봐야겠다는 생각이 듭니다. Astro도 SSG로 1~2년전부터 눈여겨보긴 했습니다만 최근 1.0으로 버전이 발표되면서 안정된 모양이에요. 강좌를 간단하게 좀 봤는데 Astro는 리액트, 뷰, 스벨트와 같은 프레임워크 도구들을 다 때려넣고 한번에 쓸 수 있는 신박한 놈이긴 합니다만, Astro 자체에서 제공하는 기능만으로도 컴포넌트 단위 개발이 가능해 보여서 무척 인상적이었습니다. 

 

한동안 리덕스를 비롯한 상태관리 도구때문에 스트레스를 많이 받았는데, 스벨트를 보니 다시 웹개발에 흥미가 생기네요.