[기타] Angular, React, Vue는 어떻게 등장하게 되었을까?

SPA 환경 구성을 위해서 뷰와 리액트를 사용하면서, 이러한 웹 개발용 프레임워크나 라이브러리가 어떻게 등장하게 되었는지에 대해 이해할 필요가 있다고 생각했습니다.

 

그래서!! 이번 포스팅에서는 기존 HTML과 CSS를 화면에 뿌려주는 방식에서 어떻게 Angular(AngularJS), React, Vue가 등장하게 되었는지에 대해 알아보도록 하겠습니다.

 

목차

---

0. Ajax와 jquery

갑자기 뜬금없이 무슨 Ajax냐? 라고 할 수 있는데!!

Angular의 등장을 이해하기 위해서는 먼저 Ajax에 대한 이해가 필요합니다.

 

Ajax는 SPA의 시초격인 정보 교환 기법입니다.

 

Ajax시대 이전에는 웹브라우저는 특정 사이트를 보여주기 위해서 매번 서버에 요청해야했고, 서버가 해당 HTML파일을 브라우저에게 보내주고, 웹브라우저는 그걸 받아서 다시 렌더링하는 과정을 거쳐야 했습니다.

사용자가 변경하고 싶은 내용을 전부 변경하고 확인 버튼을 누르면 깜빡거리는 과정과 함께 해당 내용을 반영한 HTML파일을 보게 되는 그런 구조였죠!

 

하지만 Ajax가 등장하면서 JavaScript를 통해서 HTML 파일이 아닌 데이터만 별도로 요청할 수 있게 되었고, JSON이나 XML형태로 데이터를 받아오면 그 데이터를 바탕으로 웹 페이지 내에서 필요한 부분만 고쳐서 사용자에게 보여줄 수 있게 되었습니다.

(다만 브라우저마다 화면에 페이지를 그려내는 방식, 즉 DOM을 수정하고 화면에 뿌리는 방식이 달랐기 때문에 웹 표준이란게 생겨났고, 그 이전에는 브라우저별로 돌아갈 수 있는 코드들을 하나하나 짰다고 합니다 ㅠ)  

 

Ajax의 UML / 출처 : https://www.nextree.co.kr/p4771/

 

조금 다른 이야기지만, 이런 ajax를 편리하게 사용할 수 있도록 만들어진 그 유명한(?) jQuery가 2006년 등장하게 되었습니다.

jQuery는 JavaScript를 보다 쉽고 빠르게 이용할 수 있도록 구현된 라이브러리입니다.

그리고 jQuery라는 틀 안에서 ajax도 똑같이 편리하게 사용할 수 있게 만들어졌죠,

하지만 변경사항이 발생하면 DOM에 직접 접근해서 변경하기 때문에 신경쓸 게 많아진다는 문제와 현재 시점에서 굉장히 무겁다는 문제때문에 반드시 필요한 상황이 아니라면 사용가치가 현저히 떨어지고 있는 상태입니다..

 

아무튼 ajax를 사용해서 웹 브라우저를 갱신하는 행위 자체는 굉장히 새롭고 훌륭한 기술이었지만, 당시 상황에서 이런 신기술을 이용해서 SPA 환경을 구성하기에는 다소 불편한 부분들이 많이 발생했습니다.

특히 웹 애플리케이션의 구조가 복잡해지면서 코드의 재사용이 어렵다는 문제가 발생했습니다.

또한 히스토리 관리가 되지 않고, 같은 페이지 내에서의 데이터 전송으로 인해 보안상의 문제가 발생할 여지가 있고, 연속적인 데이터 요청으로 인해서 서버 부하가 증가할 가능성이 굉장히 높았습니다.

 

해당 문제들은 충분히 VanillaJS나 서드파티 라이브러리들로 해결할 수도 있었지만, 그럼에도 불구하고 더 쉽게 애플리케이션을 만들고 유지보수할 수 있는 방법에 대한 연구는 끊임없이 이루어지게 되었습니다.

 

---

1. AngularJS의 등장

 

AngularJS는 2009년 구글의 한 직원에 의해서 등장한 프레임워크입니다.

(원래는 구글 직원의 개인 프로젝트였으나, 엄청난 반응을 불러일으키며 구글의 공식 지원을 받게 되었다고 합니다)

 

기존 Backbone, Knockout 등의 JavaScript용 프레임워크가 이미 존재했지만, 완전한 인기를 얻지 못했습니다.

하지만 AngularJS는 기존에 존재하는 프레임워크들의 단점을 줄이고 필요한 요소들을 한데 담아놓았고, 보다 조직적으로 JavaScript 파일들을 관리할 수 있도록 컨테이너를 이용해서 애플리케이션을 구성할 수 있게 만들었습니다.

 

AngularJS — Superheroic JavaScript MVW Framework

 

특히 AngularJS의 View와 Model간의 양방향 바인딩은 굉장한 인기의 주 원인이었습니다.

두 요소를 실시간으로 동기화시키는 과정이 굉장히 간소해짐으로써 기존에 비해 코드량을 획기적으로 줄일 수 있게 되었습니다.

데이터를 $scope에 저장한 다음 template에다가 Angular 문법을 버무리면 데이터에 맞게 자동으로 화면을 갱신하는 그런 신개념 기술이었죠.

jQuery에서 골치를 썩였던 DOM 조작 난이도가 획기적으로 내려가게 되었습니다!

 

하지만 애플리케이션이 점차 비대해지면서 기존에 고려되지 않았던 수준의 사용자와의 상호작용이 발생하게 되었습니다.

AngularJS는 주기적으로 $scope의 데이터의 변경을 확인하는 방법으로 양방향 바인딩을 처리하였기 때문에 규모가 커질 수록 굉장히 느려진다는 치명적인 단점이 발생하게 되었습니다.

그리고 복잡성이 증가해서 데이터의 흐름이 모호해지기 시작했습니다.

 

추후 언급하겠지만, AngularJS는 버전이 2.0로 올라가면서 Angular로 구분되었습니다!

 

---

2. React의 대세 탈환

 

페이스북은 자사 서비스를 운영하면서 같은 문제를 겪게 되었습니다.

그래서 JavaScript를 다루기 위한 아예 새로운 무언가를 만들게 되었고, 그 결과가 바로 2013년 React의 출시였습니다.

 

시작하기 – React

 

React는 처음에는 AngularJS에 비해서 지금만큼의 큰 인기는 누리지 못했습니다.

하지만 AngularJS가 Angular(v2.0~)으로의 변화를 꾀하면서 신뢰성을 다소 잃어버리게 되었습니다. (이름은 비슷하지만, 다소 큰 변화로 인해서 서로 호환되지 않는 문제가 발생했습니다!)

위 사건을 통해서 "어짜피 AngularJS에서 Angular로 변화해야 한다면, 새롭게 등장한 React를 사용하는게 어떨까?" 라는 생각에 도달하게 된 것이죠.

 

이 반사이익을 바탕으로 React는 현재까지도 가장 많이 사용되는 JavaScript 프레임워크/라이브러리의 지위를 차지하게 되었습니다.

 

출처 : https://npmtrends.com/angular-vs-react-vs-vue

 

React에서 가장 핵심이 되는 부분은 바로 Virtual DOM입니다.

React로 들어오면서 실제 DOM이 아닌 가상의 DOM을 이용해서 화면을 렌더링하게 된 것이죠.

 

그럼 왜 Real DOM을 바꿔서 화면을 렌더링하면 되지 왜 굳이 번거롭게 Virtual DOM을 사용해서 화면을 렌더링하는걸까요?

 

React는 "기존에 고려되지 않았던 수준의 사용자와의 상호작용"을 보다 효율적으로 처리하기 위해서 실제 DOM보다 연산량이 적은 가상의 DOM에서 처리하고, 그 결과를 분석해서 실제 DOM과 차이가 발생하는 부분만 실제 DOM에 반영합니다.

 

이걸 통해서 변경이 발생할 때마다 매번 실제 DOM에 접근해서 조작할 필요 없이 한번에 변경사항을 처리해서 대부분의 상황에서 보다 효율적이고 빠르게 렌더링할 수 있게 되었습니다.

 

그렇다면 이제는 DOM을 바꿔야 할 때 데이터의 변경사항은 어떻게 확인하는지에 대해 궁금할 수 있습니다.

React에서는 Angular와는 다르게 모든 내용을 감시하는 것이 아닌 props와 state가 변경되었을 때만 필요한 부분(해당 컴포넌트 및 하위 컴포넌트)을 새롭게 화면을 그리는 방식을 사용합니다.

위 내용때문에 컴포넌트를 잘게 쪼개서 렌더링을 최적화하고 재사용에도 용이하게 만드는 방식이 웹 개발에 있어서 표준적인 방법이 되었고, 지금까지도 사용하고 있습니다.

 

React의 Virtual DOM의 사용와 관련해서 Velopert님께서 훌륭하게 번역해주신 글이 있으니 참고하세요!!

 

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

 

그리고 React는 AngularJS와는 다르게 단방향 데이터 바인딩만을 사용합니다.

모델이 변경될 때 뷰가 변경되지만, 뷰는 모델을 변경시키지 않는 구조이죠.

이걸 통해서 데이터의 흐름을 양방향 바인딩에 비해서 보다 명료하게 확인할 수 있게 되었습니다.

 

또한 JSX문법을 사용함으로써 HTML보다 JavaScript에 치중된 구현 방식을 사용합니다.

일반 JavaScript 코드에 비해서 훨씬 깔끔하고 보기 좋은 모습을 확인할 수 있습니다.

덕분에 React를 사용한다면 pug와 같은 템플릿 언어를 사용해야 할 이유가 없어졌습니다!

아래 두 방식의 차이를 나타낸 코드입니다!

 

// JSX

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode)

// 일반 JavaScript로 컴파일하면?

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

 

React는 AngularJS에 비해서 완전한 프레임워크가 아닙니다. (그래서 React는 프레임워크가 아닌 라이브러리라고 불립니다)

따라서 개발에 필요한 다양한 기능들을 서드파티 라이브러리에 의존하고 있습니다.

이런 특징때문에 오히려 React의 핵심적인 부분은 Angular에 비해 양이 굉장히 적어서 학습속도가 비교적 빠르다는 장점과 사용자에게 개발 자유도를 풍부하게 제공한다는 장점을 가지고 있습니다.

 

다만 React 역시 단점이 없는 것은 아닙니다.

올바른 사용을 위해서는 JavaScript와 JSX에 대한 기본적인 학습이 되어있어야 합니다. (View에만 관여하기 때문에 보여지는 부분 이외의 것들은 전부 직접 구현해야 합니다)

그리고 IE 지원이 미약합니다. (이 문제는 IE가 레거시가 된 현재 시점에서는 크게 중요하지는 않을 수 있습니다)

 

---

3. Vue의 도전

Vue도 AngularJS처럼 구글에서 근무하던 직원인 Evan You가 2014년에 개발한 JavaScript 프레임워크입니다.

AngularJS가 충분히 훌륭한 프레임워크지만, 필요한 부분만 빼내서 보다 가볍게 만들어보고자 시작한 프로젝트가 Vue로 발전하게 된 것이죠.

 

Introduction | Vue.js

 

Vue는 AngularJS의 양방향 바인딩을 채택하고, React의 Virtual DOM을 채택했습니다.

간단하게 말해서 Angular의 장점과 React의 장점을 합친 프레임워크라고 볼 수 있습니다.

 

애초에 등장 배경이 "AngularJS를 다이어트 시키자!" 였기 때문에 가볍습니다. (일반적으로 React보다도 가벼운 편입니다!)

또한 애초에 공부해야 할 양이 어마어마한 AngularJS, 핵심 부분의 양은 크게 많지 않지만 추가로 JSX에 대한 이해가 필요한 React에 비해서 진입장벽이 비교적 낮습니다.

 

최대한 많은 것들을 JavaScript 중심으로 풀어내려고 했던 React와는 다르게 HTML을 그대로 사용할 수 있게 되어있고, 프레임워크이기 때문에 React에 비해서 비교적 코드 스타일이 획일화되어있기 때문에 다른 사람 코드 이해에 부담이 적습니다.

 

그래서 JS에 익숙하지 않은 사람들이 웹을 구성해야 할 때 비교적 빠르게 퍼포먼스를 내기 좋은 Vue를 많이 사용하곤 합니다.

다만 자유도가 React에 비해 떨어지는 문제때문에 완벽하게 React를 대체하지는 못하고 있는 상황입니다. (하지만 비슷한 느낌의 프레임워크인 Angular의 파이는 굉장히 많이 잡아먹고 있습니다!)

 

// Vue.js 코드 예제

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style scoped>
button {
  font-weight: bold;
}
</style>

 

---

4. 어떻게 변화되고 있는가

위에서 언급했다시피 AngularJS는 2.x버전부터 Angular로 변화하였습니다.

 

Angular

 

Angular는 TypeScript기반의 프레임워크로, $scope 대신 Component를 사용합니다.

React의 Component방식을 그대로 따라갔다고 보면 됩니다!

 

가장 큰 특징이라면, 아예 TypeScript를 사용하도록 되어있기 때문에 기존 AngularJS에 대해서 하위호환성이 없다는 점입니다. (이 문제때문에 React에게 그렇게 파이를 내줘야만 했죠..)

 

 

React는 큰 틀에서 변화한 내용은 없었지만, React 버전 16.8부터 Hooks의 도입으로 인해 비교적 편리하게 함수형 컴포넌트를 사용할 수 있게 되었습니다.

 

Hook의 개요 – React

 

Vue쪽에서는 올해 2월 Vue3가 Vue2를 대체하는 정식 버전이 되었습니다.

Vue2에서 부족했던 TypeScript 지원, 그리고 Composition API의 등장으로 함수형 프로그래밍을 적극적으로 지원하게 되었습니다.

 

Using Vue with TypeScript | Vue.js

 

---

5. 정리

지금까지 글을 읽어왔다면 라이브러리와 프레임워크의 선택에 있어서 정답이 있는가 까지 생각하게 될 것 같습니다.

정답은 아니오 입니다!

 

새롭게 개발을 시작하는 것인지, 혹은 레거시를 개선하고 업그레이드 하는 것인지에 따라서 각 프레임워크, 라이브러리만의 장단점이 있을 것입니다.

이것에 따라 본인이 취사선택해서 사용하면 되는 것이죠!

 

위에서 언급한 것들이 아닌 svelte 역시 떠오르는 프레임워크중 하나입니다! 제 블로그에도 사용 후기가 있으니 참고하세요 ㅎㅎ

 

Docs • Svelte

 

각각의 프레임워크나 라이브러리가 어떻게 등장했는지를 알고 사용한다면 보다 더 유익하고 효율적으로 개발을 할 수 있지 않을까 싶습니다!

 

제 글이 조금이나마 도움이 되셨길 바라면서 마무리 해보겠습니다 :)

 

---

6. 참고자료

[번역] 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가? | VELOPERT.LOG

발전한 자바스크립트와 현재 jQuery의 위치

Angular vs React vs Vue.js: Which is the Best Choice for 2022?

angular vs react vs vue | npm trends

앵귤러 vs 리액트 vs 뷰, 어떤 게 최고의 선택일까? - wishket

2022년 웹 개발에서 고려해야 할 환경

짧게 써보는 웹 프론트엔드의 역사

React를 Vue.js보다 선호하는 이유

Incremental DOM과 Virtual DOM 비교

(Angular) Incremental DOM

Angular 로드맵 - Angular의 과거와 현재, 그리고 미래 > 시티즌 인사이트 | 그레이프시티 개발자 포럼