📍 AngularJS

AngularJS는 SPA(Single Page Application) JavaScript 기반 프레임워크로, MVVM(Model-View-ViewModel) 모델링이 가능하다.

SPA
단일 페이지 내에서 새로운 View를 페이지의 주소가 바뀌지 않으면서 동적으로 로드하여 사용하는 것

특징

• 쉬운 유지보수와 빠른 개발 속도
• 컴포넌트 기반으로 쉬운 재사용성
• 간편한 데이터 바인딩을 한 쉬운 view 업데이트
• 동일한 코드 패턴
• SPA 개발에 최적화
• 명확한 기능적인 분리
• MVC Architecture 구현

차이점

• 최소한의 비용으로 고성능 및 기능성
• Typescript를 이용한 쉬운 유지보수
• 선언적 UI
• 단순한 Architecture

구성요소

1. 지시자(Directive)
   View 영역으로 특정한 html 태그에 AngularJS 의 기능을 적용하고자 할 때 사용하는 것이다.

2. 필터(Filters)
   어떤 데이터를 화면에 출력하는데 있어서 원하는 데이터만을 필터링하여 가져다 사용할 수 있도록 해주는 기능이다.

3. 데이터 바인딩(Data Binding)
   표 형태의 데이터들을 원하는 위치에 사용하기 편하게 바인딩하도록 해준다.

4. 컨트롤러(Controller)
   메인 컴포넌트로, 기능별로 묶어서 사용하도록 해준다.

📍 Svelte

Svelte는 2016년 출시한 오픈 소스 웹 프레임워크로, 선언적 구성 요소를 가져와 DOM을 업데이트하는 JavaScript로 변환하는 compiler이다. 따지자면 프레임워크가 아닌 컴파일러가 더 정확한 표현이다.

특징

• 적은 양의 코드
• 번들 크기 감소
• 유지 보수 비용 감소
• Truly reactive
• 컴포넌트 기반으로 쉬운 재사용성

차이점

• No Virtual DOM
• 다른 라이브러리를 함께 배포할 필요 X
• 외부 라이브러리 기본 내장 ex) redux, vuex

📍 Vue.js

Vue.js는 웹에서 UI를 구축하기 위한 점진적인 JavaScript 프레임워크이다.

특징

• 가볍고 빠른 성능
• React(Virtual DOM), Angular(데이터 바인딩)의 장점을 가져옴.
• 컴포넌트 기반으로 쉬운 재사용성

차이점

• Virtual Dom
• 양방향과 단방향의 바인딩 지원

---

📍 Vite

Vite는 프랑스어로 "빠르다(Quick)"를 의미하며 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.

특징

• 로컬에서 개발 시 번들링을 하지 않음.
• ESM 방식으로 인한 매우 빠른 로컬 서버 구동 속도
• 수백 개 정도 되는 모듈을 갖고 있는 웹 서비스를 웹팩과 비트로 비교해 본다면 실행 시간이 수십 배 이상 차이남.
• Vue 뿐만 아니라 대부분의 프론트엔드 프레임워크 지원함.

🪄 마치면서

vite가 빌드 도구이면 앞서 공부한 npm과 같은 JavaScript 패키지 매니저랑 같이 사용하며 개발하는 것인가? 빌드는 vite가, 의존성과 모듈 등을 관리할 땐 npm이 사용되는 것일까? 아직 프레임워크도 그렇고 다 처음 들어보는 생소한 것들 뿐이라 공부가 많이 필요할 것 같다..