프론트엔드의 프레임워크 및 라이브러리로는 대표적으로 Angular, React, 그리고 Vue가 있다. 이들의 차이점은 각각 무엇이며 그 차이점은 무엇일지에 대해 알아보자.
참고로 Vue와 Angular는 프레임워크인 반면 React는 라이브러리이다.

1. Angular

Angular는 구글에서 만든 타입스크립트 기반의 웹 어플리케이션 오픈소스 프레임워크이다. Angular는 가장 다루기 어렵고 가장 많은 것을 만들 수 있는 프레임워크이다.
프로젝트의 생성부터 테스팅, 빌드와 배포까지 모든 기능을 제공한다. Angular는 유니크한 템플릿 문법이 정해져 있기에 자유도는 떨어지는 반면 모두가 그 문법에 맞추며 또한 타입스크립트 기반이기에 유지 관리에 용이하다. 마찬가지로 컴포넌트 기반이며, 많은 기능을 제공하는 만큼 프레임워크 자체가 무겁기에 초기 로딩속도는 느리지만 페이지간 전환 속도는 빠른 편이다.

2. React

React는 Facebook에서 만든 자바스크립트 UI 라이브러리이다. 특징으로는 라이브러리이기에 유연성이 좋으며, native를 통해 웹 뿐만아니라 앱 개발로도 확장할 수 있다. 또한 Virtual DOM을 활용하여 성능을 높였으며 create-react-app 등의 커맨드라인 인터페이스(CLI)가 많아 접근성이 좋고 편리하다는 강점이 있다. 중요한 점은 금일 기준 위의 3가지 중 가장 인기가 많기 때문에 방대한 커뮤니티를 통해 정보를 얻고 활용하기 쉽다.

React는 Vue, Angular와 달리 JSX라는 Javascript에 XML을 확장한 문법을 사용한다. 그렇기 때문에 자바스크립트에서 HTML과 유사한 형태로 코드를 작성할 수 있어서 코드가 직관적이고 가독성이 좋다. 작성한 코드는 웹팩(Webpack)과 바벨(Babel)을 통해 브라우저에 맞게 코드를 변환한다. 리액트는 컴포넌트라는 개념이 등장한다. 컴포넌트는 자바스크립트 함수와 유사한, UI를 이루는 작은 단위라고 생각하면 된다. 이렇게 캡슐화된 컴포넌트는 복잡한 어플리케이션에서의 재사용성을 높여준다. 이처럼 유명하고 편리한 React지만 로딩시간이 길다는 단점이 있다.

3. Vue

Vue는 Evan You라는 개발자가 독립적으로 만든, UI를 위한 자바스크립트 프레임워크이다. 마찬가지로 Virtual DOM을 이용하였고, 컴포넌트를 사용한다. 그 외 많은 부분에서도 React와 매우 유사하다. 차이점이 있다면 더 가볍다. 각 기술의 전반적인 학습량을 기준으로 한다면 Vue가 가장 익히기 쉽다. Vue 제작자 인터뷰에서도 React와 Angular에서 쓸만한 기능들만 따서 만들었다고 한다.

Vue의 핵심은 간단한 템플릿 구문을 활용해 선언적으로 DOM에 데이터를 렌더링하는 것이다. 이게 어떻게 활용되느냐 하면 스크립트가 HTML과 데이터를 주고받을 때, 데이터가 DOM과 연결되어 있기에 하드코딩으로 직접적으로 상호작용할 필요없이 반응형으로 변경값을 업데이트할 수 있다. Vue는 기업에서 만든것이 아니기에 유지관리 측면에서 부족할 수 있다.

또한 위의 NPM trends 순위에서 볼 수 있듯이 React에 비해선 상대적으로 마이너하다. 커뮤니티가 작다는 것은 이제 막 공부를 시작하려는 분들에겐 생각보다 큰 단점이 될 수 있다.

4. 어떤 기술 스택을 익히면 좋을까?

• 기존 앱에서 보수 및 확장이 필요하거나 빠르게 크로스플랫폼 앱개발까지 필요할 때 - React
• 가벼운 서비스를 개발할 때, 개발을 잘 모르지만 빠르게 성과를 내야할 때 - Vue
• 규모가 큰 기업에서, 많은 기능을 구현해야 하고 확장성이 높은 어플리케이션을 개발할 때 - Angular

마치며

이번 포스트에서는 프론틑엔드의 대표적인 프레임워크 및 라이브러리인 Angular, React, 그리고 Vue에 대해서 가볍게 알아보았다. 상황에 맞는 기술을 알맞게 사용하면 좋을 것 같다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧