SPA, VUE, ANGULAR, REACT 개념

# SPA(Single Page Application)

 : 단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다.

- 기존 어플리케이션과 SPA의 차이

기존 어플리케이션은 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다.

반면, SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.

(출처: https://velog.io/@josworks27/SPA-%EA%B0%9C%EB%85%90)

※ SPA를 만들때 VUE, ANGULAR, REACT와 같은 프레임워크를 사용한다.

---

---

---

# Angular, React, Vue 개념 정리

## ANGULAR

AngularJS는 단일 페이지 애플리케이션 (SPA, Single Page Application) 방식의 프론트엔드 개발을 위한 자바스크립트 프레임 워크 (또는 라이브러리)입니다. AngularJS는 동적 콘텐츠 작성을 하는 데 있어서 (당시로는) 획기적인 접근 방식으로 유행을 불러일으킬 만큼 많은 수요가 있었습니다.

자바스크립트에서 처리하던 부분의 많은 부분을 HTML 템플릿 내로 가져오면서 자바스크립트는 단순화 되고, 데이터의 바인딩도 자유로워서 많은 편리함을 가져다주었습니다.

가장 오래됐다.

## REACT

React는 현재 현업에서 인기 있는 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다. 보통 우리가 생각하는 어플리케이션(웹, 앱 혹은 데스크톱용 소프트웨어)을 만들기 위해서는 사용자가 조작하기 위한 UI(User-Interface), UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요하다.

이렇게 특정 부분을 나누어 개발하는 방법론을 MVC 패턴, MVVM패턴 이라고하며, React.js는 View 즉, 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다.

가장 인기있다.

## VUE

Vue(vjuː 로 발음, view 와 발음이 같다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

다른 프레임워크에 비해 쉽다.

---

# Angular vs React vs Vue 특징

    ※ 3가지를 비교하는 것은 무의미, but, 특징 정도는 알아두자

## Angular

UI 를 구현하게 되면서, 앵귤러만의 문법같은 것들이 다양하게 존재합니다. 특정 기능을 구현 할 때, 편리하게 대신 해주는 것들이 많습니다. 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 프레임워크 안에 내장되어 있습니다. 앵귤러1의 경우 만들어진지 꽤 오래 됐고, 기업에서 많이 사용이 돼서, 유지보수하고 있는 프로젝트가 많아서 사용률이 높은 편입니다. 앵귤러2의 경우 매우 성숙하긴 하지만, 인지도 측면에선 아직 성장하는 단계이며, 주로 타입스크립트랑 함께 사용됩니다.

## React

“컴포넌트” 라는 개념에 집중이 되어있는 라이브러리입니다. 컴포넌트는, 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줍니다. 페이스북 개발자들이 라이브러리의 성능과 개발자 경험을 개선하기 위해 많은 연구를 합니다. 리액트를 한번 해본 개발자들은 대부분 맘에 들어합니다. 생태계가 엄청 넓고, 사용하는 곳도 많습니다. HTTP 클라이언트, 라우터, 심화적 상태 관리 등의 기능들은 내장되어있지 않습니다. 따로 공식 라이브러리가 있는 것도 아니여서, 개발자가 원하는 스택을 맘대로 골라서 사용 할 수 있습니다 (혹은 직접 라이브러리를 만들어서 쓸 수도 있겠죠.)

## Vue

입문자가 사용하기에, 정말 쉽습니다. 대부분 Webpack 같은 모듈 번들러를 사용하여 프로젝트를 구성해야하는 앵귤러와 리액트와 달리, 단순히 CDN 에 있는 파일을 로딩 하는 형태로 스크립트를 불러와서 사용하기도 편합니다. HTML 을 템플릿처럼 그대로 사용 할 수도 있어서 마크업을 만들어주는 디자이너/퍼블리셔가 있는 경우 작업 흐름이 매우 매끄럽습니다. 공식 라우터, 상태관리 라이브러리가 존재합니다.