React, Vue.js, Angular, JQuery, Svelte

자바스크립트를 쉽게 사용할 수 있도록 '도와주는' 라이브러리
자바스크립트는 넷스케이프 개발자가 단 '10일' 만에 만들었기에,
 설계도 부족했고 현재 이해하기 힘든 부분이 많다고 함.
 이러한 자바스크립트를 좀 더 효율적이게 사용할 수 있도록 도와줌

React

• 페이스북이 지원
• 리액트의 핵심 개념은 상태가 바뀌었을 때, 상태에 따라 DOM을 어떻게 업데이트 할 규칙을 정하는게 아니라, 싹다 날리고 새로운 걸 보여주는 개념 (Vue, Angular와 다른 개념)
• 다 날리고 새로운 것을 만들면 속도가 너무 느릴텐데, Virtual Dom을 사용해서 이를 가능케 했음.
  * Virtual dom 설명 : https://dlckdgml.tistory.com/28 
• 웹 뿐만 아니라 앱 개발에서도 사용 (=React Native)
• Dom 트리를 추상화하여 자바스크립트 객체로 만들어 두고 변경되는 부분은 virtual dom에서 처리하여 성능 향상
• 사용자가 사이트에 접속 했을 때 브라우저에서 자바스크립트를 로드하고 브라우저에서 가상 돔을 씀
  (Svelte 와 다른 개념, 아래 내용과 비교해서 읽어볼 것)
• 자바스크립트에 조금 더 가깝다(Vue에 비해)
  -> HTML, CSS 조차도 자바스크립트로 하자! 라는 의미가 좀 있음

Vue.js

• 오픈소스 자바스크립트 프레임워크
• Virtual Dom 지원(빠름)
• SSR -Nuxt.js
• 양방향/단방향 바인딩 지원
• TypeScript 지원
• NativeScript
• Single File Component
• 리액트나 뷰는 사용자가 사이트에 접속 했을 때 본인들 자바스크립트 로드하고 브라우저에서 가상 돔을 씀
• 작은 러닝 커브(엄청 쉽다고 한다)
• 쉬우니까 초보자에게 유리
• Vue는 선택에 있어서 경우의 수가 별로 없다. 이 말인 즉슨, 협업 시 혼돈이 적어질 듯.
  ex) '이 사람은 왜 여기서 이런 for문을 썼지?' 이러한 의문 자체가 성립 불가, 왜냐면 for문이 오직 하나 밖에 없기 때문임.
• HTML 보다 렌더링이 아~주 약간 빠르다함.
• HTML, CSS, 자바스크립트의 특성을 각각 다 살리는 느낌

Angular

• 타입 스크립트 기반 오픈소스, 구글에서 지원
• 양방향 바인딩
• RxJs (Reactive Extensions For JavaScript) : 스트림을 통한 비동기 처리방식
• 매우 큰 러닝 커브(어려움, 배울 것이 많음)
• 큰 프로젝트에서 많이 사용

Svelte

• 가상 돔 없이 효율적으로 돔을 조작함.
• 결과물을 브라우저로 전송 전에 서버측에서 모든 결과 값을 node.js로 컴파일하여 전송
  사이트가 배포되기 전에 미리 빌드함 (그래서 제일 빠름)
• 리액트나 뷰는 사용자가 사이트에 접속 했을 때 본인들 자바스크립트 로드하고 브라우저에서 가상 돔을 씀
• 이게 어떻게 가능하냐면, 특정 웹페이지에서 일어날 수 있는 경우의 수를 계산하여 딱 필요한 부분만 최적화하여 자바스크립트 파일로 컴파일해 전송(이게 한계점이 될 수도 있음)

JQuery

장점

• 자바스크립트를 이용하여 DOM을 조작해 모든 페이지를 새로고침 하지 않고 특정 부분만 새로고침하는 기능
• jQuery는 DOM을 편하게 관리할 수 있었음 (크로스 브라우징 가능)

단점

• jQuery를 쓰는 이유가 크로스 브라우징의 장점 때문인데
  자바스크립트가 es5, es6 (ECMAScript) 버전 이후로 표준화가 이루어져서 필요성이 적어짐
• jQuery는 옛날 자바스크립트에 맞춰져 있기에 무거움

React VS Vue.js

React

• 자바스크립트로 HTML, CSS 를 다 구현해버리자 의 느낌
• 라이브러리의 느낌이 강해서 복잡한 것을 구현 시 본인이 직접 다 해야함

Vue.js

• HTML, CSS, 자바스크립트의 특성을 다 살린 느낌 (초보가 하기에 오히려 좋다고함)
• 프레임워크의 느낌이 강해서 이미 다 갖춰져 있는 느낌

참고

https://www.youtube.com/watch?v=nT4OWJJjtJg