React vs Svelte (feat.Vite)

지하철 노선도 같네요? o_oa,,

메모에 가까운 게시글 하나 올립니다. 

새 프로젝트를 시작함에 있어서 프레임워크 및 언어 선택, 구조 등 고려할 것들이 참 많은데, 이 게시글에서는 프론트엔드를 위해 어떤 프레임워크를 쓸 것인가에 대해 쓰려고 합니다. 두 개의 프로젝트 경험과 프론트엔드(React + Vite) 리딩을 해오면서 생긴 깊고도 얕은 안목으로 리서치하였고, 부족한 부분에 대해서는 추후 게시글을 보완할 계획입니다. 따라서, 리액트와 스벨트에 대한 장황한 이론들은 생략하고, 비교에 대한 것만 간략히 다룹니다.

컴파일러 기반  vs  런타임 라이브러리

Svelte가 각광받고 있는 이유는 뛰어난 성능 때문입니다. 이 성능은 리액트뿐만이 아닌, 앵귤러(Angular)와 Vue보다 더 뛰어나다고 하는데, 여기서 성능은 속도, 최초 로딩, 메모리를 포함하며 그 이유는 코드를 해석하는 방식에서 오는 것으로 보입니다. React는 런타임에 가상 DOM을 사용하는 라이브러리이고, Svelte는 컴파일러 기반의 프레임워크입니다. 빌드 단계에서 컴포넌트를 일반 Javascript 코드로 변환하기 때문에 런타임에 별도의 Svelte 라이브러리가 필요하지 않습니다. 여기서 가상 DOM(Virtual DOM)이란, 사용자 인터페이스에 발생한 모든 변경사항에 대한 문서 객체 모델(DOM, Document Object Model)을 메모리에 유지시켜주는 가상 임시 저장소입니다. 실제 DOM을 쓰는 것보다 가상 DOM을 사용함으로써 변경사항에 대한 렌더링만 관여하기 때문에 효율적일 수 있지만 Svelte는 컴파일러 기능을 수행하는데, 가상 DOM과 같은 추상화 계층을 만들어내지 않고 일반적인 프레임워크가 런타임에 할 일을 빌드 시에 해결하면서 사용자의 브라우저 부하를 최소화시킵니다. 따라서, Svelte는 미리 컴파일되어 최적화된 일반 Javascript 코드로 변환되기 때문에 불필요한 코드가 제거되어 번들 크기는 감소하며, 이는 초기 로딩 속도를 향상시키는 데에도 기여합니다. 런타임에 별도 라이브러리가 필요하지않기 때문에 애플리케이션의 용량도 가벼워집니다.

컴포넌트 작성 방식

Svelte는 Single File Components(SFC)를 사용하여 HTMP, CSS, Javascript 코드를 하나의 파일에 포함시킵니다. 파일 단위의 컴포넌트 관리로 컴포넌트 간의 명확한 의존성 파악이 가능하며, 자체적 모듈 관리를 통해 간결한 구조를 제공합니다. 이 부분은 실제 프로젝트 코드를 봐야 좀 명확하게 이해가 갈 것으로 보입니다. 반면, React는 Javascript 파일 안에서 JSX 문법으로 컴포넌트를 정의하고 컴포넌트 간의 의존성을 최소화하여 개발할 수 있습니다. JSX의 장점인 Javascript와 함께 동적인 UI 관리가 쉽게 구현 가능한 건 react를 쓰는 큰 장점입니다. 

음,, 리서치와 정리를 어느 정도 해보았지만 사실상 '어느게 더 뛰어나다' 혹은 '적합하다' 정도의 판단은 실제 프로젝트에 몸을 녹이면서 경험해봐야 체감이 되어보입니다. 추가적인 비교로는, React는 생태계 및 커뮤니티 확보가 잘되어있고, 대규모 프로젝트에 적합하며 복잡한 UI 구현에 최적화되어있습니다. 코드 구현 방식의 차이와 성능이 높다는 것만으로 무조건 Svelte를 써야한다고 말하기에는 일정 속도로 달려야할 프로젝트에서 새로운 프레임워크를 적용하는 것이 반드시 필요한 공수인가에 대한 의심 듭니다. 따라서, 저는 기존의 React와 Vite를 붙여서 사용하려고 합니다. 그러면 Vite는 무엇인가.!

Vite ! Vite ! Vite !

Vite는 빠른 개발 환경을 제공하는 도구(Build Tool)로, Vue.js 개발팀에 의해 만들어졌으며 React, Svelte, VanilaJS 등 다양한 프레임워크를 지원합니다. 이미 webpack이라는 번들러 중심의 개발 환경과 배포 시스템이 대중적인데, Vite는 전통적인 번들러와는 차별화된 특징을 가지고 있습니다. Vite가 React와 결합하면 빌드 시 최적화를 수행하여 트리 셰이킹(트리 쉐이킹은 번들링 과정에서 불필요한 코드(사용되지 않는 모듈)를 식별하고 제거하는 기법입니다. 이는 페이지 로딩 속도를 향상시키고, 사용자 경험을 개선하는 데 중요한 역할을 합니다.)과 코드 스플리팅(코드에서 당장 사용하는 부분만을 로딩하고, 현재 필요하지 않은 코드 부분은 따로 분리시켜 나중에 로드함으로써 로딩시간을 개선하는 것)을 통해 번들 크기를 줄여주고, 프로덕션 환경에서 높은 성능을 제공해주게 됩니다. 이는 React 애플리케이션의 빠른 개발과 운영을 가능케하며, 빠른 핫 모듈 리플레이먼트(HMR)을 통해 수정된 코드를 빠르게 반영하여 개발자에게 더 나은 개발 경험을 제공해줍니다. Vite의 모듈 기반의 개발은 선언저인 종속성을 자동으로 추적하고 최적화하므로, 불필요한 코드가 번들에 포함되지 않고, 필요한 부분만 효과적으로 로드되어 초기 로딩 속도를 향상시킵니다. 따라서, Svelte를 통해 얻을 수 있는 이점들을 기존에 사용하던 React와 결합된 Vite 형태를 통해 충족할 수 있어보입니다.