SPA 프레임워크/라이브러리 비교 분석

효효·2024년 7월 20일

SPA 프레임워크 또는 라이브러리에 대해서 알아보고 차이점을 분석하여, 이후 프로젝트를 진행할 때 참고하고자 정리해본다.

요즘 어떤 게 제일 인기가 많은가?

  • 리액트가 가장 압도적으로 사용률이 많음
  • 왜 리액트가 가장 인기가 많은걸까?

Angular

구글에서 지원하는 TypeScript 기반의 프레임워크 (2010년 출시)

특징 (공식 문서)

  • 확장 가능한 컴포넌트 구조로 웹 애플리케이션을 만드는 프레임워크입니다
  • 라우팅, 폼 관리, 클라이언트-서버 통신 등 웹 개발에 필요한 라이브러리를 조화롭게 통합한 모음집입니다
  • 애플리케이션 개발, 빌드, 테스트, 수정에 필요한 개발자 도구를 제공합니다

장점

  • 타입스크립트 기반이기 때문에 정적 타이핑으로 컴파일 단계에서 에러를 예방할 수 있음
  • 구글이 지원하기 때문에 공식 문서와 커뮤니티가 잘되어 있음
  • 웹과 모바일 프로젝트의 생성부터 테스팅, 빌드, 배포까지 다양한 기능을 제공함

단점

  • 다양한 기능 제공과 프레임워크의 특성 상 러닝커브가 높음
  • 다른 프레임워크보다 초기로딩 속도가 느림
  • 검색 엔진이 웹 페이지를 크롤링 할 때 JavaScript를 실행하지 않고 있는 그대로 긁어가는 문제가 발생해서 검색엔진 최적화 (SEO)가 어려움

어떤 프로젝트에 사용하면 좋은가?

  • 장기적으로 운영될 프로젝트
  • 규모가 크고 다양한 기능을 제공하는 프로젝트
  • 웹 뿐만 아니라 앱을 동시에 개발해야 되는 프로젝트

Svelte

2016년 출시한 자바스크립트 프레임워크

특징(공식문서)

  • 적은 양의 코드를 사용함
  • 가상 돔이 아닌 실제 돔에 반영함 (앱을 실행 시점에서 해석하지 않고 빌드 시점에서 Vanilla JavaScript Bundle로 컴파일)
  • 별도의 상태 관리 라이브러리 없이 변수나 표현식이 변경될 때마다 자동으로 업데이트되는 코드를 작성할 수 있음

장점

  • 적은 양의 코드를 사용하기 때문에 가독성이 좋고 용량이 간소화됨
  • 상태 변경 시 컴파일 시점에서 반응형 업데이트를 처리하기 때문에 상태 관리가 편함
  • Vanilla JavaScript Bundle로 컴파일하기 때문에 성능이 좋음 (빠름)

단점

  • 빌드 속도가 느림
  • 비교적 커뮤니티가 작고 공식문서는 한글화가 되어 있지 않음
  • 비교적 라이브러리와 같은 도구가 적음
  • 프레임워크에 대한 변화가 잦아 최신 정보를 따라가기 어려울 수 있음

어떤 프로젝트에 사용하면 좋은가?

  • 성능이 중요한 작은 프로젝트에 적합

Vue.js

앵귤러와 React의 장점을 살리고 단점을 보완하여 만든 자바스크립트 프레임워크 (2014년 출시)

특징 (공식 문서)

  • HTML,CSS, 자바스크립트 표준을 기반으로, 쓰기 편한 API와 최고 수준의 문서를 제공합니다.
  • 제대로된 반응성, 컴파일러 수준에서 최적화된 렌더링 시스템은 대부분의 경우 개발자가 직접 최적화를 수행할 필요가 없습니다.
  • 라이브러리에서 부터 모든 기능을 갖춘 프레임워크 까지 확장되는 풍부하고 점진적으로 채택 가능한 에코시스템을 제공합니다.

장점

  • 공식 문서가 잘되어 있고 직관적인 API로 러닝커브가 낮음
  • 가상 DOM을 사용하여 DOM 조작을 최소화하여 성능을 향상
  • 자체 라이브러리가 지속적으로 개발되고 있어 별도로 설치하지 않아도 되어 편리함(라우터, 상태관리 등)

단점

  • 앵귤러와 리액트에 비해서는 작은 생태계
  • 자바스크립트 번들 크기가 커서 기능이 많을수록 초기 로딩 속도가 느려짐

어떤 프로젝트에 사용하면 좋은가?

  • 중소규모 프로젝트
  • 빠른 개발이 필요한 프로젝트

React

2013년 페이스북에 의해 출시된 자바스크립트 라이브러리

특징(공식 문서)

  • 손쉬운 컴포넌트 기반의 개발이 가능함
  • 풍부한 라이브러리가 있음
  • JSX를 사용하여 HTML과 JavaScript를 결합
  • 단방향 데이터 흐름

장점

  • 손쉽게 컴포넌트를 만들 수 있기 때문에 프로젝트의 일관성과 확장성이 좋음
  • 공식 문서가 잘 되어 있고, 커뮤니티가 거대함
  • 많은 라이브러리가 있고 기능을 선택적으로 추가할 수 있음
  • 가상 DOM을 사용하여 DOM 조작을 최소화하여 성능을 향상
  • 단방향 데이터 흐름으로 데이터의 흐름을 예측 가능하게 하고, 디버깅에 용이함

단점

  • 프레임워크가 아니기 때문에 라우팅, 상태 관리 등은 별도의 라이브러리를 사용해야 함
  • JSX 문법을 공부해야 되기 때문에 러닝커브가 조금 높음

어떤 프로젝트에 사용하면 좋은가?

  • 고성능 SPA (Single Page Application)
  • 재사용 가능한 UI 컴포넌트가 많은 애플리케이션

왜 리액트가 인기가 많은가?

  • 비교적 다른 프레임워크보다는 유연성과 재사용성이 높기 때문인 것 같다
  • 프론트엔드 개발의 역사가 길어지면서 유지보수성의 중요성을 깨달았고, 재사용성이 높은 리액트를 많이 사용하는 것 같다
  • 러닝커브도 앵귤러만큼 어렵지 않고, 뷰보다 생태계가 넓고, 페이스북이라는 대기업의 망하지 않을 것 같은 안정감이 있어서 가장 인기가 많은 것 같다

참고

profile
효효
효효 개발공부로그
이전 포스트

[React+TypeScript] 이미지 경로를 찾지 못할 때 오류 해결 방법

다음 포스트

자바스크립트 프로토타입 개념 정리/퀴즈

0개의 댓글