현재 다니고 있는 회사 개발팀에서 주기적으로 간략한 컨퍼런스? 토의?를 가지게 되었다.
2주에 한번, 같은 주제를 함께 조사하고 공부하며 논의를 해보는 시간이다.

앞으로 조사할 내용들은, 정확한 글이 아닐 수 있으며, 내가 찾아보고 내가 판단한 임의의 정보일 수 있다.

첫번째 주제로, 이제는 당연해진 React, Vue, Angular나 Svelte와 같은 여러 웹 개발 프레임워크들을 사용하게 된 이유와 배경등에 대해 알아보았다.

SSR에서 CSR까지

프론트엔드와 백엔드의 구분이 모호하던 시절에는 백/프론트 구분지을 것 없이 데이터 처리부터 사용자들이 보는 화면까지, 모든 부분을 담당해서 진행하곤 했었다.
이를 Server-Side Rendering, SSR이라고 한다.

점차 웹 애플리케이션들의 발전으로 인해 화면이 복잡해지고 어려워지기 시작하였고, 프로젝트는 대규모가 되기 시작한다.

기존의 SSR방식으로는 계속 개발하기엔 구현하기는 쉬웠을지언정 매우 복잡해지고 유지보수는 점점 어려워지기 시작한다.

그래서 Client-Side Rendering, CSR이 주목받기 시작한다.

백엔드와 프론트엔드를 구분짓기 시작한 것이다.

백엔드에서는 프론트엔드의 요청을 처리하고, DB 혹은 다른 API 등과 상호작용하면서 적절한 방식으로 프론트엔드에게 데이터를 반환하며, 인증 및 권한 부여 등의 역할을 중점적으로 담당하게 된다.

프론트엔드는 사용자 인터페이스를 중점으로 복잡한 요소들을 사용자들이 편하고 쉽게 사용할 수 있도록 하는데에 중점을 둔다.

SPA

프론트엔드가 구분지어지게 되고, 프론트엔드에서는 직접 사용자들이 볼 수 있는 페이지를 개발하게 되면서 UX를 더 많이 고려해야 하기 시작한다.

SPA, Single Page Application 방식이 대중화 되는데,
기존의 각각 페이지마다 새로운 페이지로 화면을 갱신하는 방식이 아닌
하나의 페이지에 필요한 부분부분을 변경하며, 빠른 응답성을 제공하여 사용자들이 페이지를 이동할때마다 로딩을 기다려야만 하는 불편함을 해소하게 된다.

SPA를 지원하는 프레임워크들로 대표되는 것들은 다음과 같다.
1. React
2. Angular
3. Vue
4. Svelte

이외에도 Ember, Backbone, Knockout ... 등등이 있지만, 한국에서는 현재 위 네가지 프레임워크를 가장 많이 사용하지 않나 싶다.

프레임워크별 장단점

(2023 프로그래머스 개발자 설문조사 프론트엔드 개발자 사용 프레임워크, 68%의 프론트엔드 개발자들이 React를 사용하고 있다)

React

장점

컴포넌트 기반 아키텍처로, 코드의 재사용성이 높다.
Virtual DOM 기반으로, UI 업데이트가 빠르고 성능이 우수하다.
가장 많이 사용되는 라이브러리로, 커뮤니티가 활발하다.

단점

복잡한 구조를 가지고 있어 러닝 커브가 높다.
상태 관리를 위해 Redux 등 별도의 라이브러리가 필요하다.

React는 복잡한 UI 요구 사항이 있는 대규모 애플리케이션에 가장 적합하다. 실시간 업데이트 및 상호 작용이 필요한 SPA 개발에 이상적이며, 웹, 모바일, 데스크톱 애플리케이션을 포함한 다양한 환경에서 사용할 수 있다.

Angular

장점

완전한 프레임워크로, 프로젝트의 구조와 코드 관리를 편리하게 할 수 있다.
의존성 주입과 모듈화 등의 기능으로 개발 생산성을 높일 수 있다.
Google에서 지원한다.

단점

복잡한 구조와 다양한 기능 때문에, 러닝커브가 높다.
높은 러닝 커브와 과도한 코드 복잡도로 인한 성능 문제가 발생할 수 있다.

Angular는 확장성과 유지 관리가 필요한 엔터프라이즈급 애플리케이션에 가장 적합하다. 데이터 바인딩, 라우팅 및 테스트를 포함하여 웹 개발의 모든 측면을 다루는 포괄적인 프레임워크를 제공하며, 고성능 및 코드 유지 관리가 필요한 크고 복잡한 애플리케이션을 구축하는 데 이상적이다.

Vue

장점

가벼운 라이브러리로, 초기 로딩 속도가 빠르고 사용자 경험을 향상시킬 수 있다.
간결하고 직관적인 문법을 가지고 있어, 러닝커브가 낮다.
React와 유사한 기능을 제공하지만, 높은 성능을 제공한다.

단점

Angular와 React에 비해 지원되는 플러그인 수가 적다.
Vue는 큰 규모의 프로젝트에서 성능 문제가 발생할 수 있다.

Vue는 가볍고 유연한 프레임워크가 필요한 중소 규모 애플리케이션에 가장 적합하다. 성능 및 사용자 경험에 중점을 둔 UI 집약적인 애플리케이션을 구축하는 데 이상적이며, 웹, 모바일, 데스크톱 애플리케이션을 포함한 다양한 환경에서 사용할 수 있다.

Svelte

장점

컴파일 시간에 UI를 생성하므로, 높은 성능을 제공한다.
가벼운 라이브러리로, 초기 로딩 속도가 빠르다.
Vue.js, React에 비해 코드량이 적어, 개발 생산성이 높다.

단점

아직은 상대적으로 새로운 프레임워크이므로, 커뮤니티 지원이 제한적이다.
가벼운 라이브러리이기 때문에, 대규모 프로젝트에서는 일부 기능이 제한될 수 있다.

Svelte는 고성능 및 코드 효율성이 필요한 중소 규모의 애플리케이션에 가장 적합하다. 성능 및 사용자 경험에 중점을 둔 UI 집약적인 애플리케이션을 구축하는 데 이상적이며, 웹, 모바일, 데스크톱 애플리케이션을 포함한 다양한 환경에서 사용할 수 있다.
하지만, 아직 얼마 되지 않은 프레임워크로써 실무에 도입해보기 보단 프로젝트 성으로 진행하는게 좋 않을까 싶다.

다시 SSR로..?

SPA 방식이 주류를 이루며, SSR 방식은 중요성이 떨어졌다.

하지만, SPA 방식을 진행하면서 또 다른 문제점에 직면한다.
SPA 방식은 JavaScript를 사용하여 클라이언트 측에서 UI를 렌더링하기 때문에 초기 페이지 로드 시간이 빠르고 UX가 좋았지만, SEO 문제와 초기 로드 속도가 느리다는 단점이 발생한다.

이에 대응하여 새로운 SSR 방식이 등장한다.

SSR은 서버 측에서 페이지를 렌더링하여 HTML을 클라이언트에게 제공하기 때문에 초기 로드 속도가 빠르고 SEO 최적화에 용이하다.

그러나 SSR 방식은 서버 리소스를 많이 사용하고 개발 및 유지보수 비용이 높아지는 등의 단점이 있어, 최근에는 React - Next.js, Vue - Nuxt.js와 같은 SSR 프레임워크를 사용하여 SSR의 장점을 취하면서도 개발 비용을 줄이고자 하는 추세이다.

돌돌순(돌고 돌아 결국엔 순정)이라는 말이 생각났다.

물론 진짜 순정은 아니지만, 그래도 결국엔 여러 문제들을 해결하기 위해 다시 SSR 방식을 위한 프레임워크들이 출시되고 주류가 되는 상황이 재미있다.

그래서 우린?

현재 우리 회사는 Vue를 사용하고 있다.

React를 찍먹해본 입장에서 Vue는 러닝커브가 굉장히 낮고, 편하다고 생각하였다.

외주 프로젝트를 진행하는 개발사이며, 큰 규모의 서비스(MFA를 도입하는 정도의) 보단 중소 규모의 프로젝트들을 진행하는 경우가 많고, 기간적인 여유가 많지 않은 경우가 많기에 Vue를 사용하는 것은 좋은 판단이라고 생각한다.

하지만, SSR방식의 Nuxt.js를 도입하는 정도는 해볼 법 하지 않나 싶다.

Vue의 라이브러리와 플러그인을 모두 사용할 수 있으며,
Vue 같은 문법과 설정을 사용하면서도
SSR 방식의 장점을 취할 수 있다고 생각하기 때문이다.

하지만 그럼에도 초기 설정이 어려워질 것, 러닝커브가 생길 것 을 고려하면
무조건 도입하자! 보다는 시도해보자! 정도의 스탠스를 가지고 싶다.