Prologue

Angular, React, Svelte, 그리고 Vue의 장단점을 알려드리겠습니다.

글 작성일 기준으로 한국에서 실무 프로젝트로 많이 사용되는 순서는 React > Vue > Angular > Svelte 입니다

확장 프레임워크에서 단점이 해결된 경우에는 혼란을 주지 않기 위해 추가 설명을 붙였습니다

---

Angular

단점.

• 허들(러닝 커브)이 높음 (Module, RxJS, Pipe, JavaScript, TypeScript, ... etc)

• 가상(Virtual) DOM이기 때문에 SEO(Search Engine Optimization)에 취약

  → 'Angular Universal' 사용해서 해결

• 초기 로딩 속도 이슈

• Angular CLI 관련 문서의 불친절함

장점.

• 개발사가 Google
• TypeScript 기반 (Angular.js는 JavaScript 기반)
• Angular CLI 사용하여 개발환경 지원
• Module + Component 기반으로 동작
• 생태계 풍부
• Material Design 지원
• NativeScript와 Ionic Framework을 이용해 App 제작 가능

React

단점.

• 가상(Virtual) DOM이기 때문에 SEO(Search Engine Optimization)에 취약

  → 'Next.js' 사용해서 해결

  → React 18에서 Suspense를 사용해 SSR 렌더링 사용

• JavaScript 기반이기 때문에 JavaScript에 대한 지식 필요

• class형으로 개발시 필연적으로 렌더링이 느림

• React Life-cycle에 대한 이해없이 개발하면 component가 느려질 수 있음

• Next.js: document, window JavaScript 기본 API 사용에 제약이 있음

장점.

• 개발사가 Meta (구 Facebook)
• CMV(Controller, Model, View) 개념 없는 개발자도 쉽게 개발 가능 (component 방식)
• (Component 분리가 제대로 되어 있다는 가정하에) UI 수정과 재사용 수월
• 개발시 바뀐 component만 리-렌더링(Re-rendering)
• function형 + React Hook을 이용해 속도 개선 가능 (쓰레기 같은 class형은 버립시다)
• Redux, Recoil(Facebook에서 개발) 등을 이용해 상태관리 가능 (npm, yarn 패키지)
• Axios를 이용해 JSON API 사용 가능. (npm, yarn 패키지)
• Styled-components, Emotion, Sass 등 다양한 스타일 component 지원 (npm, yarn 패키지)
• React Native를 이용해 App 제작 가능
• React 18: Suspense SSR 렌더링을 이용해 HTML Streaming 지원
• Next.js: SSR 렌더링 지원
• Next.js: component 마다 각각 따로 head 태그 내부의 코드를 재설정할 수 있음
• Next.js: Link, Image 등 렌더링 속도를 빠르게 하기 위한 장치들이 마련되어 있음

Svelte

단점.

• 공식 문서가 불친절함
• TypeScript 미지원 (방법은 있으나 불안정함)
• 규모가 크지 않은 생태계

장점.

• Runtime Library 불필요 (Svelte 컴파일러가 직접 JavaScript로 변환함)
• 커스텀 이벤트 지원
• return fragment 불필요
• Context API, Store 등 많은 API를 npm, yarn의 패키지 없이 자체적으로 지원
• 속도 빠름

Vue

단점.

• 가상(Virtual) DOM이기 때문에 SEO(Search Engine Optimization)에 취약

  → 'Nuxt' 사용해서 해결

• MVVM에 대한 개념이 있어야 개발 가능

• JavaScript 기반이기 때문에 JavaScript에 대한 지식 필요

• TypeScript 지원이 완벽하지 않음.

  → Vue 3에서 TypeScript 기반으로 변경

• SVG 렌더링 속도 및 메모리 사용 부분에 약간의 이슈가 있음 (프레임 드랍, 메모리 점유 증가)

• 규모가 크지 않은 생태계

장점.

• Vue.js 3: TypeScript 기반으로 개발됨
• style scope 지원
• 양방향 binding, 단방향 binding 둘 다 지원
• Instance Life-cycle 지원
• Vuex를 이용해 상태관리 가능
• Script 로딩 속도 빠름
• Axios를 이용해 JSON API 사용 가능. (npm, yarn 패키지
• Nuxt: SSR 렌더링 지원
• Nuxt: component 마다 각각 따로 head 태그 내부의 코드를 재설정할 수 있음

---

Epilogue

이번 글에서는 각 프레임워크의 장단점을 알아보았습니다.

다음 글에서는 프레임워크 설치하는 방법을 알아볼 것 같아요. 설치 환경은 macOS입니다.

참고로, O612는 윈도우즈 환경에서 개발하는 게 딱히 좋다고 생각하지 않기 때문에 윈도우즈를 가지고 개발하는 글을 쓸 계획이 1도 없습니다.

윈도우즈는 짜져있어