참고자료:
프론트엔드 프레임워크란?
- 프론트엔드는 레이아웃, 그래픽, 탐색, 타이포그래피 등등 최종 사용자에게 표시되는 부분 또는 구성요소를 말함. 또한, 프론트엔드 프레임워크는 바로 사용할 수 있는 요소를 활용하여 애플리케이션의 프론트엔드를 개발할 수 있는 도구 세트
- 기존의 SPA는 사용자가 링크를 클릭할 때마다 서버로부터 새로운 페이지 로드되는 방식이지만, SPA는 초기에 전체 페이지를 로드하고, 사용자 인터랙션에 따라 필요한 데이터만 서버로부터 비동기적으로 로드하여 업데이트하게 만듦. 이는 사용자 경험을 향상시키고 애플리케이션의 성능을 개선 시킬 수 있음.
📚 프론트엔드 프레임워크 최신 현황 그래프
이 중 상위 3개는 여전히 React, Vue.js, Angular
1) React
- 사용자 인터페이스 및 관련 컴포넌트를 개발하기 위해 잘 알려진 자바스크립트 라이브러리
📚 특징
- 가상 DOM과 문서 액세스 및 조작을 처리하는 방식
- Facebook에서 제공
- HTML 따옴표와 태그 구문을 혼합한 JSX 코딩 스타일을 사용하여 컴포넌트 생성
- 큰 컴포넌트를 개별적으로 관리할 수 있는 작은 컴포넌트를 분해
📚 장점
- 높은 컴포넌트 재사용성 : 애플리케이션의 다른 부분에서의 협업과 재사용을 용이하게 사용할 수 있음
- 가상 DOM을 사용하여 일관되고 원활한 성능을 보여줌 (DOM은 HTML 및 XML 문서와 잘 상호작용하여 트리 구조와 유사하게 작동하며 각 HTML 요소는 객체처럼 작동 )
- 클래스 없이 컴포넌트 작성 가능
📚 단점
- 여러 번 지속적으로 업데이트되기 때문에 적절한 문서 찾기 어렵고, 초보자의 학습 곡선에 영향을 미침
- JSX의 복잡성을 이해하기 어려움
- 프론트엔드에 대한 솔루션만 제공
✅ 사용업체
- Facebook, Netflix, Airbnb, Uber, Instagram
2) Angular
- Angular는 가상 DOM을 사용하지 않고 실제 DOM 사용
- 프론트엔드 프레임워크 목록을 지배하고 있는 프레임워크
- 단일 페이지 애플리케이션(SPA)을 만들기 위한 프레임워크
- 구글에서 개발한 타입스크립트 기반 개발 플랫폼
- 확장 가능한 웹 애플리케이션 개발하기 위한 구성 요소 기반 프레임워크
- 유튜브, 구글 번역에서 많이 사용
📚 장점
- 양방향 데이터 바인딩과 같은 대부분의 중요한 기능이 기본적으로 제공
- 대규모 애플리케이션 생성이 가능
📚 데이터 바인딩이란?
- 화면 상에 보여지는 데이터와 브라우저 메모리에 있는 데이터를 묶어서 서로 간의 데이터를 동기화하는 것
- 예를 들어서, HTML에서 서버 혹은 스크립트 상에서 받아온 데이터를 화면 상에 그려주는 방식이 있다면, 해당 값이 변경될 경우 다시 HTML 상에서 데이터를 변경된 값으로 맞춰 동작하게 만드는 것을 '데이터 바인딩'이라 함
- 참고로 React는 단방향, Angular와 Vue.js는 양방향 데이터 바인딩
- 양방향 데이터 바인딩: 엘리먼트에 데이터를 바인딩하면 JS 코드로 데이터를 변경할 수도 있고, 엘리먼트의 값(input)을 수정해서 데이터를 변경할 수도 있음
- 단방향 데이터 바인딩: HTML에 바인딩한 데이터를 JS에서 수정할 경우 화면에는 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을 때 JS의 데이터가 수정되도록 바인딩하는 방법은 제공하지 않음
📌 참고
- 양방향 바인딩이 가능한 것은 하위트리에서 상위트리, 상위트리에서 하위 트리로 전파 가능하기 때문에 사이드이펙트나 성능문제가 어디서 발생하는지 예측하기 어려워짐
- 구성 요소 기반 아키텍쳐: 구성요소를 외부 요소로 정의하면 구성 요소의 종속성에서 분리됨
- 종속성 주입을 사용하면 컴포넌트 높은 재사용성과 관리가 편리해짐
- 관리 가능한 애플리케이션: 테스트가 가능하고 재사용이 가능
- 지시어, 의존성 주입 기능
📚 단점
- Angular는 가상 DOM을 사용하지 않고 실제 DOM 사용 -> 애플리케이션의 크기와 복잡성 때문에 렌더링 속도 저하
- 완전한 동적 솔루션으로, 작업을 수행하는 방법이 다양하므로 학습 곡선이 가파름
- 기능이 많고 강력하지만, 사용하기 어렵고 프로젝트 구성이 복잡해짐
- 동적 앱이니 만큼 때때로 제대로 작동하지 않을 수 있음. 하지만, Angular 코드 최적화 및 모범 사례가 많음
- 제한된 SEO 기능
- 부풀어 오른 코드와 큰 크기
3) Vue.js
📚 특징
- 가상 DOM 사용
- 점진적 혜택을 최대한 활용하는 현대적이고 진보적인 MVVM 프레임워크
- 가볍고 적응하기 쉬운 인터랙티브 UI 요소를 만들어왔음
MVVM란?
- UI 및 UI 코드를 분리한 UI 아키텍쳐 디자인 패턴
- UI를 XAML로 선언적으로 정의하고 데이터 바인딩 태그를 사용하여 데이터 및 명령을 포함하는 다른 계층에 연결함
여기서, XAML이란?
- 확장 응용 프로그램 마크업 언어
- 마이크로소프트사가 구조값과 객체를 초디화하는데 사용하려고 만든 선언형 XML 기반 언어
- 유연하고 간단한 API를 통해 데이터 반응형 요소를 제공
- 소규모 프로젝트를 완료한 다음 대규모 프로젝트로 확장하는 것이 간단
- 크기가 작기 때문에 설치가 간단
- 크고 작은 템플릿을 만들 수 있고 오류를 빠르게 식별할 수 있어 시간과 노력의 절약이 가능
- 기존 애플리케이션의 바인딩을 간소화하고 광범위한 문서를 제공
- MVVM 아키텍처를 통해 HTML 블록을 더 쉽게 처리할 수 있음
📚 장점
- Angular는 많은 기능을 제공하지만, 초보자에게는 어려움. 또 프로젝트 구성이 복잡하고 많은 용량이 발생하는 프레임워크. 이에 대비하여 Vue는 단순하고 직관적인 문법이라 개발을 간편하게 할 수 있음.
- 가상 DOM을 사용하여 효율적인 렌더링 구현가능. DOM 조작을 최소화하여 성능 향상
- 작고 빠름
- 초보자에게 친숙. 배우기 쉬움
- 자세한 문서
- 간단한 구문
- 양방향 데이터 바인딩 SEO에 긍정적인 영향
- 기존 웹 애플리케이션 구성과 유사
- React는 라이브러리로 UI 렌더링 요소에 집중한 반면, Vue.js는 필요한 도구를 자체적으로 포함
✅ 가상 DOM
가상 DOM을 사용하게 되면, 메모리 상에서 가상 DOM을 변경하고, 최종 브라우저의 실제 DOM에 변경되는 부분은 이전 DOM과의 차이나는 부분만 계선하고 DOM 변경을 최소화하는 기법을 사용
이러한 기법은 브라우저의 렌더링 성능을 향상시켜줌
✅ SEO란?
웹 사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정
📚단점
- 언어 장벽과 플러그인 부족
플러그인이란?
- 호스트 프로그램과 서로 응답하는 컴퓨터 프로그램이며, 특정한 주문식 기능을 제공
- 즉, 추가적인 기능이라고 생각하면 됨
- 개인이 만든 서비스
- 대규모 프로젝트에 적용하기에는 제한적
- 강력한 비즈니스가 뒷밤침되지 않음
'프론트엔드 👩🏻💻' 카테고리의 다른 글
| [ETC] SSR, CSR, SEO에 대하여 (0) | 2024.06.16 |
|---|---|
| [패키지매니저] yarn vs npm 정리 ✨ (0) | 2024.02.22 |
| 인증 방식 정리 ✨ (3) | 2024.01.21 |
| OSI 7계층 정리 ✨ (0) | 2024.01.18 |
| 정규표현식 메타 문자 정리 ✨ (0) | 2024.01.17 |
