https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상
JavaScript 심화
2. JavaScript Framework
https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/
Front-end Framework들의 사용률에 대한 순위를 나타낸 그래프를 보면 React, Angular, Vue, Svelte 순으로 인기가 있는것으로 보이는데 어떤 특징들이 있고 어떤 장단점이 있는지 차례로 알아보자.
.
🔎 React
페이스북에서 만든 라이브러리. 프레임워크인지 라이브러리인지 갑론을박이 있었지만, 최근에는 라이브러리라는 것으로 의견이 모여지고 있으며 공식문서에서도 라이브러리라고 되어있다. Virtual DOM을 사용하고 있고 Component에 의한 재사용 가능한 UI 생성, JSX라는 특별한 문법을 사용한다는 특징이 있다.
import './App.css';
function App() {
return (
<div className="App">
<!-- 내용 -->
</div>
);
}
export default App;장점
- Component 방식으로 MVC패턴에 대한 개념이 없는 개발자도 쉽게 개발이 가능하다.
- Component 분리를 통한 UI 관리가 용이다.
- Redux, Recoil 등 상태관리 패키지를 제공한다.
- Styled-Component, Sass 등 다양한 Style component를 지원한다.
- 커뮤니티가 매우 활발하고 공식 문서가 따라하기 편하게 작성되어 있다.
단점
- Virtual DOM을 사용하기 때문에 SEO에 취약하다 (Next.js / React18의 Suspense 를 사용하여 극복)
- Class형 컴포넌트로 개발시 렌더링이 느리다. (Functional Component로 극복)
- Life-Cycle에 대한 이해가 필요하다.
.
🔎 Angular
구글에서 만든 프레임워크로 TypeScript를 기본 언어로 사용한다. Angular는 웹개발에 필요한 모든 요소를 포함하고 있어 다른 라이브러리를 추가로 설치할 필요가 없고 양방향 데이터 바인딩을 지원한다.
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Hello World';
}
// app.component.html
<h1>Hello World</h1>장점
- Angular CLI를 통한 쉬운 개발환경을 제공한다.
- Material Design을 지원한다.
- NativeScript와 Ionic Framework를 통한 App 제작이 가능하다.
단점
- Virtual DOM을 사용하기 때문에 SEO에 취약하다 (Angular Universal 을 사용하여 극복)
- TypeScript 와 다양한 라이브러리를 내포하고 있어 러닝커브가 높다.
- 굉장히 무겁고 초기 로딩 속도가 느리다.
- 공식문서가 불친절하다.
.
🔎 Vue
Evan You에 의해 시작된 프레임워크로 React와 마찬가지로 Virtual DOM을 사용한다. template, script, style 구조를 사용하여 기존 html, js, css방식과 거의 유사하게 보이기 때문에 가독성이 좋다.
<template>
<div>
{{ hello }}
</div>
</template>
<script>
export default {
name: 'Hello',
data () {
return {
hello: 'Hello World'
}
}
}
</script>
<style scoped>
div {
font-size: 20px;
}
</style>장점
- 양방향 바인딩과 단방향 바인딩을 모두 지원한다.
- Script 로딩 속도가 빠르다.
- 커뮤니티가 활발하고 러닝커브가 낮다.
단점
- Virtual DOM을 사용하기 때문에 SEO에 취약하다 (Nuxt 를 사용하여 극복)
- MVVM 패턴에 대한 개념이 필요하다.
- TypeScript 지원이 완벽하지 않다. (Vue 3 를 통해 극복)
- SVG 렌더링 속도 및 메모리 사용에 이슈가 있다. (프레임 드랍, 메모리 점유 증가)
.
🔎 Svelte
Rich Harris가 만든 컴파일러로 React 처럼 모든 기능을 갖고 있지는 않다. Virtual DOM을 사용하지 않고 실제 DOM을 직접 제어하며 상태관리를 위한 외부 라이브러리(redux, vuex)를 따로 설치할 필요 없이 내부에 store를 기본으로 내장하고 있다.
<script>
let hello = 'Hello World';
</script>
<h1>{hello}</h1>
<style>
h1 {
color:#ff3e00;
}
</style>장점
- Runtime LIbrary 불필요 (Svelte 컴파일러가 직접 JavaScript로 변환)
- 커스텀 이벤트 지원
- Context API, Store 등 많은 API를 자체적으로 지원 (외부 라이브러리 불필요)
- 속도가 빠르다.
단점
- TypeScript 미지원
- 가장 후발주자로 커뮤니티가 활발하지 않고 규모가 작다
- 공식문서가 불필요하다.
.
참조
https://streamls.tistory.com/entry/프론트엔드-프레임워크-비교-Angular-React-Vue-Svelte
https://dev1stud.io/20220110/
