😼 React
- 사용자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션 개발할 수 있게 해주는 라이브러리
- 사용자가 자유롭게 개발에 필요한 모듈을 결정하고 선택 가능
- Facebook에서 개발
- 빠른 개발환경 구축 : CRA 툴 제공
- 컴포넌트 기반의 개발 : js에 좀 더 치중됨, xml 포맷의 탬플릿을 직접 js에 내장시키는 형태로 jsx 기술을 주력으로 사용
- 가상 DOM을 이용
- 단방향 데이터 바인딩 방법(모델이 변경되면 뷰가 변경되는 방법)
- 예측 가능성이 높기에 코드가 안정적
- 양방향 바인딩에 비해 코드 작성시간이 더 필요
🙉 Vue
- js 프레임워크
- React와 같이 가상 DOM 사용하고 컴포넌트 기반 개발 중심
- 컴포넌트의 js 집중도가 낮음, jsx가 아닌 Angular처럼 HTML 마크업 기반의 템플릿 문법을 사용
- 한 컴포넌트 안에 HTML마크업 기반의 템플릿 부분과 js부분, CSS 작성 스타일 시트로 구분
- CLI툴 제공, 가이드 문서를 통해 특정모듈 권장(React처럼 방임은 아닌, Angular처럼 내장모듈이 정해진 것도 아닌 그 사이의 절충)
- 단방향 바인딩 && 양방향 바인딩(v-model속성)
- 낮은 러닝 커브
- 생태계 규모가 작지만 커뮤니티 활성화
🐮 Angular
- 강력한 명령행 도구와 잘 정돈된 폴더 구조, 프로젝트 생성과 동시에 각종 환경이 한번에 갖춰지는 등 필요한 기능을 모두 내장한 프레임워크
- Google이 개발
- 타입스크립트를 주력언어로 정적 타입을 제공하여 타입 체크, 리팩토링을 지원하는 강력한 도구 사용이 가능
- 대규모 어플리케이션 개발에 효과적
- 양방향 바인딩
- Complete Framework로 Router, Forms, HTTP 등 다양한 모듈 지원
- 컴포넌트 기반 개발을 중심
- 컴포넌트 형태로 사용자 인터페이스 정의
- js 파일과 템플릿 역할을 할 HTML 파일이나 CSS 파일도 컴포넌트에 포함(컴포넌트마다 자동으로 생성)
- Router, Form, 상태관리 등 필요한 도구들을 다 모아놓았기에 러닝 커브가 크다
🙄 데이터 바인딩!
- 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터 일치시키는 것
- mvc 모델에서 model과 view를 서로 묶어 자동 동기화시키는 것
🔄 양방향 바인딩
-
백단과 프론트 뷰 양쪽 데이터 일치시키는 것
-
데이터의 변화를 감지해 템플릿과 결합
-
데이터가 변경되는 시점에 DOM객체에 랜더링 해주거나 모델의 변경을 감지해 js실행부에서 변경
👍 장점: 코드의 양을 줄여주고 유지보수성이 좋다
👎 단점: DOM 전체를 랜더링해주는 경우가 있기에 성능감소될 수 있다
🔜 단방향 바인딩
-
데이터와 템플릿을 결합하여 화면을 생성(js->html만 가능)
-
사용자의 입력에 따라 데이터 갱신하고 화면을 업데이트(데이터 변화에 따라 화면을 업데이트하는 코드를 매번 작성해야)
👍 장점: 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능, 데이터 추적과 디버깅이 쉽다
👎 단점: 변화를 감지하고 화면 업데이트 코드를 매번 작성
출처: https://www.samsungsds.com/kr/insights/frameworks.html
https://itworldyo.tistory.com/124?category=946003
https://itworldyo.tistory.com/124?category=946003
winwin