들어가며

웹 프론트엔드는 모바일과 달리 개발 방식이 자유로운 편이다. 그래서인지 개발 생태계 변화가 빠르고, 자고 일어나면 기술이 새로 생기거나 사라져 있는 경우도 많다. 때문에 어떤 프레임워크나 라이브러리가 웹 개발에 있어서 가장 적절할지 다양한 측면에서 고려해보고, 목적에 맞는 프레임워크를 선택해 사용하는 것이 중요하다. 지금부터는 웹 프론트엔드 개발계의 주요 기술인 React, Vue, Angular, Svelte의 특징을 각각 알아보도록 하겠다.

각 프레임워크의 주된 특징 및 차이점

React

웹 FE계를 주름잡고 있는 기술이 무엇이냐고 묻는다면 단언컨대 React라 할 수 있겠다. React는 페이스북에서 2013년부터 제공되어온 기술로, 자체 모듈보다는 써드파티 라이브러리를 자유롭게 적용해 쓰는 방식이기 때문에 엄밀히 말하면 프레임워크가 아니라 라이브러리로 보아야 한다. 주로 JSX 문법과 styled-components를 사용해 개발하는 것이 일반적인 방식이며, 가장 큰 장점은 재사용 가능한 UI를 사용한다는 것이다.
리액트의 또다른 특징은 상태변화에 따라 Re-rendering을 한다는 것이다. 이는 Hooks의 등장으로 라이프사이클 및 상태관리가 용이해져 더욱 효율적으로 인터랙티브한 웹 사이트를 만들 수 있게 되었다.

Vue

React가 프론트엔드계의 선두주자라면 Vue는 그 뒤를 바짝 쫓고 있는 2인자라고 볼 수 있겠다. 간결한 코드로 쉽게 개발할 수 있기 때문에 웹 프론트엔드를 처음 배우는 사람에게는 강력히 추천할만 하다. React에서 JSX를 사용하는 것처럼 Vue에서는 template을 사용해 UI를 렌더링한다.

<template>
  <div>Hello World!</div>
<template>

React와의 차이점은 단방향 데이터바인딩만을 지원하는 React와는 달리 양방향 또한 지원한다는 것이다. 또 하나는 데이터 불변성을 지키지 않는다는 것인데, Vue는 다음과 같이 데이터를 직접 변경하는 것을 허용한다.

return {
  name: "Jack",
};

this.name = "Jason";

Angular

Angular는 구글에서 제작된 프레임워크이다. 타입스크립트를 사용해 개발해야 하며, 다른 프레임워크들과 달리 의존성 주입을 기반으로 하고 있다는 것이 큰 특징이다. Angular2의 경우 React만큼의 성능을 발휘하기 때문에 아직까지 React, Vue와 함게 Top3의 반열에 올라 있다. Angular의 가장 큰 장점은 오직 JS로만 개발하는 React와 달리 HTML, SCSS, TS 파일을 따로 분리하여 개발한다는 점이다. 이는 뷰 컴포넌트와 비즈니스 로직을 분리할 수 있기 때문에 퍼블리셔와의 협업이 용이하다.

Svelte

Svelte는 React를 대체할 차세대 프레임워크라고도 봐도 과언이 아닐 정도로 성능 및 개발 용이성이 뛰어나다. 2021 Stack Overflow 설문조사에서는 가장 많이 사랑받는 언어 1위를 차지 하기도 했다. 그렇다면 사람들은 Svelte의 어떤 점에 열광하는 것일까?

<script>
JS 파트
</script>

<style>
스타일 파트
</style>

<div>
html 파트
<div>

Svelte는 위와 같은 구조를 기본으로 하는데, 웹 개발자가 아니더라도 각각이 어떤 기능을 하는지 직관적으로 파악이 가능하다. 또한 Svelte는 이러한 코드를 런타임이 아닌 빌드타임에 해석한다. 따라서 프레임워크 보다는 컴파일러에 가깝다. 이것이 갖는 장점은 여타 다른 프레임워크와 달리 가상 DOM을 사용하지 않는다는 것인데, 이렇게 되면 사용자측 컴퓨터에서는 브라우저가 이해 가능한 JS 코드만 다운로드 받으면 되므로 앱 사이즈가 크게 줄어들고 속도도 훨씬 빨라진다.

<script>
let count = 0

function inc() { count++ }
</script>

<button on:click={inc}>count: {count}</button>

Svelte에서는 상태관리를 위한 별도의 라이브러리나 hook 등이 필요없다. 위와 같이 변수를 선언하고 쉽게 변경하여 사용하면 된다. 또한 Svelte에는 좋은 개발자 경험이 담겨있다. 만약 클릭을 한번만 하게끔 제한하고 싶다면 아래와 같이 once라는 옵션을 달아주기만 하면 끝이다. 이러한 점이 Svelte가 사랑받는 이유이기도 하다.

<button on:click|once={inc}>count: {count}</button>

스타트업을 창업한다면, 무슨 라이브러리/프레임워크를 사용해야할까?

Dependency Injection이나 뷰/비즈니스로직 분리가 가능하다는 점에서 Angular는 가장 효율적인 협업을 돕는 프레임워크이다. 하지만 Angular는 러닝 커브가 높다. 이 말인 즉슨 Angular를 잘 다루는 개발자를 찾기란 어렵고, 효율적인 사용자 경험을 구축하기도 어렵다. 이러한 점은 개발 생태계에 민감하고 핵심인재가 중요하게 작용하는 스타트업에게는 매우 치명적일 수 있다.

스타트업은 빠르게 개발을 완수하고 사용자 피드백을 통해 서비스를 발전시켜나가야 한다. 그렇기 때문에 커뮤니티 규모가 가장 크고 안정적으로 빠른 개발을 할 수 있는 React가 스타트업 서비스 개발에 가장 적합하다고 생각한다. 무엇보다 사용자가 많다는 것은 인재영입이 비교적 쉽다는 것을 의미하기도 한다. 다양한 써드파티 라이브러리를 사용해 React를 자율적으로 개발할 수 있다는 점 또한 스타트업에서는 장점으로 작용한다. 하지만 자율성이 높다는 것은 양날의 검이 될 수 있다. 스타트업은 비즈니스 모델 변경이 잦으므로 목적이 불분명한 상태에서 무작정 React를 사용하는 것은 피해야 한다. 즉, React와 다양한 라이브러리를 활용해 개발하되, 회사의 서비스 특성을 잘 반영한 효율적인 아키텍쳐가 병행되어야 할 것이다. 이렇게 했을 떄 나중에 유지보수도 쉬우며, 무너지지 않는 튼튼한 기초를 잘 다질 수 있기 때문이다.

로버트 마틴의 '클린코드'에서는 80년대 후반 출시에 급급해 코드를 엉망으로 짰던 한 Killer App 회사에 대한 사례가 등장한다. 해당 회사는 초창기에 전문가들에게 많은 인기를 끌며 승승장구 했지만, 계속 기존의 나쁜 코드를 유지하다가 결국 쌓인 버그들을 감당하지 못해 문을 닫고 말았다. 이는 창업자들 뿐만 아니라 모든 프로그래머, 심지어 이제 막 개발을 시작하는 학생들도 유념해야할 만한 대목이다. 가장 좋은 라이브러리, 가장 좋은 기술이라는 것은 사실 존재하지 않을지 모른다. 왜 내가 이 기술을 배워야 하는지, 또 이 기술의 이점은 무엇이며 단점은 어떻게 보완할 수 있을지 고민하는 태도가 어쩌면 내가 쓰는 기술을 좋은 기술로 만드는 요인이 아닐까?

내가 React를 학습하는 이유

호율적인 아키텍쳐와 좋은 협업을 위해 고민하는 웹 프론트엔드 개발자에게 React는 더할 나위없이 좋은 도구라고 생각한다. React가 무조건 정답이라는 의미가 아니다. React를 통해 웹 개발을 심도있게 다뤄보되, 그 단점을 인정하고 어떻게 보완할 수 있을지 끊임없이 고민해보아야 한다는 것이다. 그리고 언제든 다른 프레임워크로 대체될 때를 대비해야 한다.

Svelte는 확실히 좋은 프레임워크이다. React가 가진 상태관리의 문제점들을 보완할 수 있는 좋은 대체재임은 분명하다. 하지만 앞서 언급했듯이 좋은 프레임워크를 쓴다고 해서 좋은 개발자가 되는 것이 아니다. Svelte라고 해서 문제점이 없을 것이라고 생각하지 않는다. 그러나 어떤 프레임워크를 사용하든, 우리는 그 장점을 최대한 발휘할 수 있는 방법은 무엇일지 항상 고민하는 개발자가 되어야 한다고 생각한다.

참고자료
https://yozm.wishket.com/magazine/detail/930/
https://velog.io/@longroadhome/FE-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-3%EB%8C%80%EC%9E%A5-%EB%B9%84%EA%B5%90%EC%99%80-%EC%A3%BC%EA%B4%80%EC%A0%81%EC%9D%B8-%EC%B5%9C%EC%8B%A0-%EC%9B%B9-%EB%8F%99%ED%96%A5%EC%97%90-%EB%8C%80%ED%95%B4-feat.-React%EB%A5%BC-%EA%B8%B0%EB%B0%98%EC%9C%BC%EB%A1%9C
https://velog.io/@teo/%EC%99%9C-Svelte%EC%8A%A4%EB%B2%A8%ED%8A%B8%EB%A5%BC-%EC%A2%8B%EC%95%84%ED%95%98%EB%82%98%EC%9A%94
https://tech.kakaoenterprise.com/109