React
React의 특징
1. 선언적 (Declarative)이다
리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다.
2. 컴포넌트 기반(Component-based)이다
캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있음
3. 한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere)
기존 소스를 불필요하게 다시 작성하지 않고 새 기능을 개발 할 수 있다. Node서버에서 랜더링을 할 수도 있고, 온라인 웹에서도 사용 가능하다. RN(React Native)을 쓰면 모바일 앱도 만들 수 있다.
장점
1. React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.
Controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 한다. (이게 view 역할을 담당)
2. 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능을 지원한다.
3. UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.
4. 다른 framework나 라이브러리와 병행해서 사용할 수 있다. 이는 개발이 이미 완료된 프로젝트에도 적절히 녹여낼 수 있는 확장성도 포함한다.
단점
1. IE8 이하 버전은 지원하지 않는다.
view 이외의 기능은 직접 구현하거나 라이브러리를 사용해서 구현해야 하기에 javascript 배경지식이 필수 선행이다.
2. 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안된다.
3. (치명적) 로딩시간이 길다.
4. 웹의 궁극적 지향점과는 다소 동떨어져있다.
- 웹의 핵심: 모든 것을 streaming하며, 페이지들은 HTML 태그들을 내포하고 가벼운 response만 브라우징한다.
- 리액트: 사이트에 필요한 자바스크립트를 처음에는 공백 페이지를 띄우며 다운로드 한다. 한번 다운로드 한 이후에는 다시 리소스를 다운하지 않아도 되지만, 처음 보이는 것이 없다는 것이 streaming 과의 차이이다.
Vue
Vue의 특징
1. UI 화면단 라이브러리
MVVM 패턴의 View 모델에 해당하는 화면단 라이브러리
MVVM 패턴
DOM Listners : DOM의 변경 내역을 즉각적으로 반응하여 특정 로직을 수행하는 장치
Data Binings : View에 표시되는 내용과 Model의 데이터를 동기화
화면의 요소를 제어하는 코드와 데이터 제어 로직을 분리 → 코드를 직관적으로 이해, 유지보수 편리함↑
2. 컴포넌트 기반 프레임워크
화면을 여러개의 작은 단위로 쪼개어 개발 → 재사용성↑, 구현 속도↑, 코드 가독성↑
3. React.js와 Angular.js의 장점을 가지고 있음
Angular.js의 장점
양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화 → 한쪽이 변경되면 다른 한쪽도 자동으로 변경
React.js의 장점
단방향 데이터 흐름 : 컴포넌트 단방향 통신 구조화 (상위 컴포넌트 → 하위 컴포넌트)
가상 DOM 렌더링 방식 : 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면 갱신
장점
1. 배우기 쉽다 (HTML, CSS, JS만 알고 있어도 사용이 가능함)
2. React.js의 장점과 Angular.js의 장점을 모두 가지고 있음
단점
1. 다른 프레임워크보다 생태계가 작다
Next.js
Next.js 특징
1. React 를 기반으로하는 웹 개발 프레임워크
2. Next.js는 풀스택 웹 어플리케이션을 구축하기 위한 React.js 프레임워크이며 사용자 인터페이스를
구축하기위해 React를 사용하며 추가기능과 최적화를 위해 Next.js를 사용한다.
3. Next.js는 React에 필요한 번들링,컴파일 등과 같은 툴의 구성을 추상화하며 자동으로 설정해준다.
또한 Next.js는 리액트에서 제공해주지않는 SSR,SSG,ISR과 같은 다양한 렌더링 방식을 제공해준다.
React와 함께 사용하는 이유
Next.js는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있도록 도와주는 프레임워크, React에서의 SSR 자체구현이 불가능한 것은 아니지만, 굉장히 복잡한 개발 환경을 구현해야하기 때문에 Next.js 프레임워크를 사용하는 것이 바람직
Next.js 사용했을때 장점
1. 안전성 증가
페이지를 서버에서 렌더링 및 키 관리, API 호출, 데이터 검증 작업을 '서버'에서 처리
2. 웹 사이트 제공 범위 확대
렌더링을 서버에서 담당하므로 자바스크립트를 사용하지 못하는 환경에서도 웹 페이지 제공 가능
3. 검색엔진최적화(SEO) 유리
