JavaScript 기반 라이브러리, 프레임워크 비교

• 이름에 .js를 달고있는 비슷한 라이브러리/프레임워크를 직접 정리해본 글
• 각 항목의 제목은 위키페디아로, 그림은 프레임워크 홈페이지로 연결됩니다.
• (2022. 01. 21 추가)
  • 이 글이 필요하신 분께는 각각의 기술들이 프레임워크인지, 라이브러리인지는 크게 중요하지 않을 것 같습니다. (사실 저도 아직까지는 정확하게 설명하기 어렵네요.)
  • NEXT와 Nuxt를 서버 프레임워크라고 적어뒀던 부분을 고쳤습니다.
  • 그 외에도 그간 알게된 내용을 조금 덧붙여보았습니다.

---

jQuery

• 프론트엔드 라이브러리
• 명령어 간소화

$("div.test").add("p.quote").addClass("blue").slideDown("slow");
$.each([1,2,3], function() {
  document.write(this + 1);
});

• Ajax(Asynchronous Javascript And Xml)를 이용한 비동기 처리
• 한때 널리 쓰였지만 현재는 다른 프레임워크에 밀려나는 추세

React

• Facebook에서 개발한 UI 라이브러리 (사용자 인터페이스)
• 싱글 페이지 애플리케이션, 모바일 애플리케이션에 적합
  • 라우팅, API 통신 등이 요구되는 대규모 애플리케이션에는 추가 라이브러리가 필요
• TypeScript 활용이 쉬움
• 가상 DOM을 이용하여 메모리 점유율이 높음
• HTML, CSS도 모두 script로 처리
• (사견) 현실적으로 (최소한 국내 프론트엔드 기준) 다른 라이브러리/프레임워크보다 쓰이는 곳이 훨씬 많기는 하지만, JavaScript에 능통하지 않다면 발을 들이기가 쉽지는 않은 것 같음

NEXT.js

• React, Node.js 기반 프레임워크
• SSR(server-side rendering)과 SEO(search engine optimization) 등, React만으로는 해결하기 어려운 (그러나 자주 마주치는) 문제들을 해결하기 위해 만들어진 프레임워크

Vue.js

• 프론트엔드 프레임워크
• TypeScript 활용이 가능은 하지만 전용 모듈로 교체하는 등의 작업이 필요
• .vue 파일 내에 영역을 나누어 HTML, JavaScript, CSS를 모두 사용
• (사견) React에 비해 사용처가 적기는 하나, 절대적으로 적은 수는 아니고, 뭣보다 React보다 배우기 쉽다고 생각함 (어디까지나 사견)

Nuxt.js

• Vue.js, Node.js, Babel.js 기반 서버 프레임워크
  • Babel.js는 transcompiler
• Next.js에서 영감을 받았다고 하며, 실제로 React-NEXT.js의 관계와 Vue.js-Nuxt.js의 관계가 비슷함

Angular

• Google에서 개발한 프론트엔드 MVC 프레임워크
• AngularJS 버전 2 이후 TypeScript를 적용하며 별개의 프레임워크로 분화한 것
  • AngularJS는 한때 "MEAN" stack (MongoDB, Express.js, AngularJS, Node.js)이라는, JavaScript로만 풀스택 개발이 가능한 조합으로 많이 거론됨
• 싱글 페이지 애플리케이션

Express.js

• Node.js에서 동작하는 서버 프레임워크
• NEXT.js(React), Nuxt.js(Vue.js)와 연결하여 미들웨어로도 사용됨

Nest.js

• (Node.js 기반) 서버 프레임워크
• Express를 기본으로 Fastify도 선택적으로 사용
  • Fastify도 프레임워크
• AngularJS에서 영감을 받았고, 마찬가지로 최신버전 TypeScript를 사용
• 이름은 Next.js나 Nuxt.js와 비슷하지만 별로 상관 없는 듯

Node.js

• 브라우저 외에서도 JavaScript가 동작하도록 하는 런타임 환경

간단 요약

• 프론트엔드
  • jQuery: 밀려나는 추세
  • React: HTML과 CSS까지도 script만으로 작업. TypeScript 활용이 쉬움
  • Next.js: React 기반 프레임워크
  • Vue.js: HTML, JavaScript, CSS 모두 각각 사용. TypeScript 활용 '가능'
  • Nuxt.js: Vue.js 기반 프레임워크
  • Angular: TypeScript.
• 백엔드
  • Express
  • Nest.js: Express 기반 프레임워크. Angular와 궁합
• 기타
  • Node.js: JavaScript 런타임 환경

마지막 코멘트

• 이 외에도 (.js를 달고있지 않은) JavaScript 웹개발 라이브러리, 프레임워크가 굉장히 많이 있다.
• JavaScript 말고도 다른 언어 프레임워크(Python 기반 Django 등)도 많이 있으므로 굳이 JavaScript에 매여서 생각하진 말자.
• 개인적으로는 .js를 달고있는 기술들이 많이 보여 이 글을 작성하였었는데, 직접 하나를 붙잡고 시작해보는 것이 이해가 빠를 것 같다.

참고한곳

• 자바스크립트의 프레임워크 - React | Vue.js | Angular.js | Node.js @ tistory/hnm1
• 리액트(React.js)와 뷰(Vue.js)의 차이점 @ brunch/@skykamja24
• 2020 년 서버 측 개발을위한 10 가지 JavaScript 프레임 워크
  @ ichi.pro
• Nuxt, Next, Nest! Confused?
  @ codersera