Angular와 AngularJS는 무엇인가?
AngularJS : 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크
Angular : 타입스크립트 기반 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크. AngularJS의 재작성된 버전입니다.
SPA (Sinlge Page Application)을 쉽게 만들기 위해 AngularJS가 만들어졌고,
AngularJS가 재개발되어 2016년부터 Angular로 진화한것이라고 말씀드릴 수 있습니다.
Angular와 AngularJS의 차이점은 무엇일까?
Angular vs AngularJS의 중요한 구별점 중 하나는 AngularJS는 JavaScript 기반인 반면,
Angular는 TypeScript 기반이라는 것입니다.
이 두 프레임워크는 동적 SPA를 만드는 프론트엔드 오픈소스 플랫폼으로서의 유사성이 있지만 그 차이점을 살펴보자.
Angular vs AngularJS의 컴포넌트
JavaScript 기반에 비해 TypeScript를 사용할 때 어떤 의미가 있는것일까요?
Angular가 사용하는 TypeScript는 ES6의 슈퍼셋으로 ES5와 하위 호환성을 가집니다.
Angular JS는 JavaScript를 기반으로 scope와 controller를 사용하는 반면,
Angular는 Component의 계층구조를 사용합니다.
Angular는 Component기반인 반면 AngularJS는 directive를 사용합니다.
Angular와 AngularJS의 directive 사용
Angular와 AngularJS 모두 Directives를 사용하는 반면, 어떻게 사용하는지가 차이를 만듭니다.
Angluar에는 표준 directive가 있는 반면, AngularJS 는 단지 diriective가 있을뿐입니다.
AngularJS에서는 directive를 사용할때 신중해야 합니다.
예를 들어, AngularJS에서 양방향 바인딩을 만들려면 ng-model을 사용해야 합니다.
단방향 바인딩의 경우 ng-bind를 사용합니다.
Angular에서는 ngModel만 있습니다. 단방향 바인딩을 위한 기호는 "[]"로,
양방향 바인딩을 위한 기호는 "[()]"로 사용할 수 있습니다.
"[]"는 속성 바인딩을 위한 것이고, "()"는 이벤트 바인딩을 위한 것입니다.
Angular vs AngularJS의 구조
AnularJS
AnularJS는 데이터, 논리, 규칙을 관리하고 애플리케이션이 어떻게 동작하는지 표현하면서 중심 구성요소 역할을 하는
모델-뷰-컨트롤러(MVC)를 가지고 있습니다.
모델: 모델은 모든 데이터의 관리가 저장되는 곳입니다.
뷰: 뷰는 모델의 정보를 검토한 후 출력을 생성합니다.
컨트롤러: 컨트롤러는 입력을 수신하여 모델 및 뷰로 전송하는 명령으로 변환합니다.
Angular
Angular는 템플릿이 있는 지시어인 구성요소를 사용합니다.
Angular는 두 종류의 directive가 있습니다.
구조적 directive: DOM의 요소를 대체함으로써 DOM의 레이아웃을 변경합니다.
속성 directive: DOM이 작동하는 방식과 요소의 모양을 변경합니다.
모바일 지원
AngularJS는 모바일 지원을 하지 않는 반면, Angular는 모바일을 지원합니다.
성능과 속도
AngularJS: 양방향 bining 기능은 궁극적으로 개발시간을 감소시킵니다.
Angular : 프레임워크가 더 나은 구조로 업그레이드되어 성능과 속도가 향상되었습니다.
도구 지원
AngularJS; 프레임워크는 IDE 및 WebStorm과 같은 타사 도구에 의존합니다.
Angular: CLI(Command Line Interface)를 사용하여 응용 프로그램을 만들 때 시간을 줄입니다.
여기까지 Angular와 AngularJS의 차이점을 알아보았습니다.
Angular가 AngularJS의 단점을 보완한 만큼, 신규프로젝트를 개발할 경우 가급적이면 Angular를 쓰는게 좋을것 같습니다~
Angular vs AngularJS: Angular와 AngularJS의 차이
#angular,#angluarjs,#typescript,#javascript,#앵귤러,#앵귤러JS,#자바스크립트,#타입스크립트,#SPA,#framework,#프레임워크
댓글